K-INFO
HU
EN
Belépés
Tantárgy » BMEVIAUAC17
Régebbi verziók TAD letöltése (PDF)

Kliensoldali rendszerek

Client-Side Systems
A tantárgyleírás hatályossága
Hatályosság kezdete:
2026. March 21.
Hatályosság vége:
—
Tantárgy neve (magyarul, angolul)
Kliensoldali rendszerek
Client-Side Systems
Tantárgykód BMEVIAUAC17
Tantárgyjelleg —
Képzési szint —
Kurzustípusok és óraszámok (heti/féléves)
Kurzustípus elmélet gyakorlat laboratóriumi gyakorlat
óraszám (heti) 2 2 0
jelleg (kapcsolt/önálló) — kapcsolt —
Tanulmányi teljesítmény/értékelés típusa vizsga
Tantárgy kreditértéke 5
Tantárgyfelelős
DR. Kővári Bence András
beosztás: egyetemi docens
Tantárgyat gondozó oktatási szervezeti egység
Automatizálási és Alkalmazott Informatikai Tanszék
https://www.aut.bme.hu
Kar Villamosmérnöki és Informatikai Kar
Tantárgy weboldala www.aut.bmne.hu
Tantárgy elsődleges mintatantervi jellege —
Közvetlen előkövetelmények – Erős előkövetelmény nincs
Közvetlen előkövetelmények – Gyenge előkövetelmény nincs
Közvetlen előkövetelmények – Párhuzamos előkövetelmény nincs
Közvetlen előkövetelmények – Mérföldkő előkövetelmény nincs
Közvetlen előkövetelmények – Kizáró feltétel nincs

Célkitűzés

Tantárgyprogram

Előadások:

 1. Előnyök, hátrányok (szerver oldali megoldáshoz képest). Botok, crawlerek, share-link botok támogatása. Hogyan működnek a kliens oldali keretrendszerek (React és társai) alapszinten

2. Ergonómia

3. TypeScript

4. React (Hello World) – Tree reconciliation. Kompozíció minta, komponens alapú fejlesztés. React, Vue, Angular, Svelte, SvelteKit történelme. JSX, TSX. React fa. Osztály és függvény komponens. Props. Komponens életciklusa. Kompozíció, komponensek egymásba ágyazása. Statikus és feltételes gyerekek, listák. Feltételes attribútumok, class és classList.

5. React (Állapot és eseménykezelés) – state és useState. stable identity és closure kérdések. Aszinkron állapotkezelés. Eseménykezelés. Felhasználói bemenet, input és társai. Props/state/mixed alapú render (controled, uncontroled). DOM-ban tárolt állapot. Validáció. Reducers.

6. React (Kommunikáció a fában) – Higher order components, lifting state, forceupdate, context, külső eseményekre feliratkozás, erőforrások használata. Refs.

7. React (Render) – PureComponent, memo. Render okai, stable identity. Fragment. key attribútum. Komponens paraméterként. requestAnimationFrame. Portal. Suspense, lazy.

8. Angular, Vue – Összehasonlítás

9. Progressive Web Application (PWA), Telepített kliensek (Electron, react-native, PWA) általában. Telepíthetőség követelményei. Manifest.json. Service worker, életciklusa, eseményei, interfésze. Cache API és cache stratégiák. Share API.

10. Csomagolás és optimalizáció – Csomagolók (webpack régi, ES bundler). Tree shaking (DCE), Minifying. Lazy load: modulokra, képekre. Média formátumok: JPEG-től, AVIF-ig, picture tag. Tömörítés. http/2 és http/3 protokollok. Subpixel rendering és fontok. Fetch, XHR,   CORS,  websocket. Bináris adatok Javascriptben. Web alapú játékok: WebGL, WebGPU.

11. Blazor (Architektúra) – WebAssembly, C# a böngészőben, AoT, trim, DOM manipuláció és JavaScript interop. Hoszt modellek: szerver és kliens oldali renderelés, SignalR. Blazor Hybrid: Web View, MAUI. Standalone/hosted Blazor WASM. Projekt stuktúra, fejlesztési modellek.

12. Blazor (Komponensek) – Razor szintaxis, kulcsszavak, vezérlő utasítások, direktívák. Komponensek életciklusa és eseményei. Routing és navigáció, paraméterek. REST API hívás.

13. Blazor (Technikák) – Layout, adatkötés és eseménykezelés. Formok kezelése, fájl fel- és letöltés. UI virtualizáció. Sablonok. Néhány beépített komponens bemutatása.

14. Blazor (Infrastruktúra) - Konfiguráció és függőség injektálás, naplózás, hibakezelés. SignalR használata. Bootstrapping. Aszinkronitás. Lokalizáció. Autentikáció és autorizáció.

Gyakoraltok/laborok: 

1. -

2. -

3. Házi feladat témaválasztás

4. React – Alapok

5. Házi feladat kidolgozás és konzultáció 

6. React – Eseménykezelés, kommunikáció

7. Házi feladat kidolgozás és konzultáció 

8. React – Komplex alkalmazás

9. Házi feladat kidolgozás és konzultáció 

10. React – Konfiguráció, telepítés, PWA

11. Házi feladat kidolgozás és konzultáció 

12. Blazor – Architektúra, komponensek

13. Blazor – Komplex alkalmazás

14. Házibemutatás

 


A tárgy célja, hogy a hallgatók betekintést nyerjenek a kliensoldali alkalmazások fejlesztésének alapelveibe és meghatározó technológiáiba. A tárgy keretében bemutatásra kerülnek a legfontosabb felhasználói platformok (desktop, tablet, mobil), valamint az alkalmazás-felületek fejlesztésének rájuk vonatkozó ergonómiai alapelvek. A hallgatók megismerkednek a korszerű vékonykliens fejlesztéshez szükséges eszköztárral. Tárgyalásra kerülnek az adatkötési megoldások, valamint az űrlap generálási technikák. A tárgy különböző tervezési kérdéseket érint: az MV* tervezési minták kapcsán a hallgatók megtapasztalhatják, miként lehetséges a felület és a mögöttes felületlogika (és ezáltal a fejlesztő és a designer munkájának) szétválasztása. A tárgy szerves részét képezik a gyakorlati foglalkozások, melyek lehetőséget biztosítanak a hallgatók számára, hogy az előadáson tanultakat maguk is kipróbálhassák és érdemben hasznosítható tapasztalatot szerezzenek.   A tantárgy követelményeit eredményesen teljesítő hallgató képes lesz: · (K2) bemutatni az alapvető webes technológiákat, rámutatni azok kapcsolatrendszerére és jellegzetességeire, egymáshoz viszonyított előnyeire és hátrányaira ·       (K3) egyszerűbb kliensalkalmazások fejlesztésére Blazor technológiával ·       (K3) webes alkalmazások fejlesztésére React technológiával ·       (K2) alapvető ergonómiai elvek ismerete és alkalmazása webes környezetben

Tanulmányi eredmények

Ez a tantárgy a KKK rendeletben meghatározott, következő kompetenciák fejlesztését szolgálja:

Tudás

Nincsenek rögzített tanulási eredmények.

Képességek

Nincsenek rögzített tanulási eredmények.

Attitűd

Nincsenek rögzített tanulási eredmények.

Autonómia és felelősség

Nincsenek rögzített tanulási eredmények.

Oktatási módszertan

Előadás  Az előadások keretében, illetve a kiadott digitális segédanyagok által a hallgatók elsajátíthatják a tárgy tananyagát. Gyakorlat 6 gyakorlatalkalom a tanult technológiák elmélyítését, míg a további 6 a házi feladat elkészítését támogatja. Aszinkron tananyagok A tárgy épít alapvető webes programozási alapismeretekre (pl. HTML, REST ismerete) és a C# nyelv minimális ismeretére, melyek tömör, a tárgyhoz szükséges összefoglalásához aszinkron módon elsajátítható tananyagokat biztosítunk

Tanulástámogató anyagok

Online források
·      ; Christopher Nance: TypeScript Essentials, 2014, Packt; Publishing, ISBN: 978- 1783985760; Matt Frisbie: Angular 2 Cookbook - Second; Edition, 2017, Packt Publishing, ISBN: 978-1785881923; Christian Nagel, Jay Glynn and Morgan Skinner: Professional; C# 5.0 and .NET 4.5.1, Wrox, ISBN: 978-1118833032

A tantárgy teljesítéséhez ajánlott előzetes ismeretek

Tudás típusú kompetenciák
(azon előzetes ismeretek összessége, amelyek megléte nem kötelező, de a tantárgy eredményes teljesítését nagyban elősegíti)
Webes fejlesztési alapismeretek, melyek a tárgy részeként, vagy a tárggyal párhuzamosan is elsajátíthatók
Képesség típusú kompetenciák
(azon előzetes képességek és készségek összessége, amelyek megléte nem kötelező, de a tantárgy eredményes teljesítését nagyban elősegíti)
nincs
Ajánlott (nem kötelező) előzetesen megszerzendő kompetenciák
(azon ajánlott (nem kötelező) előzetesen megszerzendő kompetenciák összessége, amelyek jelentősen hozzájárulnak a tantárgy eredményes teljesítéséhez)
Webes fejlesztési alapismeretek, melyek a tárgy részeként, vagy a tárggyal párhuzamosan is elsajátíthatók
Általános szabályok
Követelmények: Szorgalmi időszakban   1.       a gyakorlást a gyakorlatokon elvégzett feladatok biztosítják, amelyekről még a gyakorlat során jegyzőkönyvet kell készíteni, és beadni (részteljesítmény értékelés), valamint 2.       a szorgalmi időszak során egy kiadott nagy házi feladatot kell önállóan megoldani és beadni (részteljesítmény értékelés).   A félév végi aláírás feltételei: a hallgató legalább 4 gyakorlat jegyzőkönyvét, valamint a hozzá tartozó programot futtatható állapotában, forráskód mellékelésével, határidőre beadta, és ezek mindegyike eléri az elégséges (2) szintet, és a hallgató a kiadott házi feladatot a kijelölt határidőig beadta és a feladatra megkapta legalább az elérhető pontszám 50 százalékát   Vizsgaidőszakban:  írásbeli vizsga.   A házi feladat 40%-ban, a vizsga 60%-ban számít az érdemjegybe. Az osztályozhatósághoz a vizsgán az elérhető pontszám 50%-át meg kell szerezni.   Pótlási lehetőségek: A házi feladat utólag is, a pótlási héten leadható, vagy a pótlási héten ismételt beadásával az elért pontszáma javítható.  Gyakorlatok pótlására nincs lehetőség. Ugyanakkor a 6-ból csupán 4 gyakorlat teljesítése elvárt.   Idegen nyelvi részteljesítés követelményei: A tárgy nem kínál idegen nyelven teljesíthető feladatokat, ugyanakkor angol nyelven is fut, mely a mindenkori TVSZ szerint szabadon felvehető
Teljesítményértékelési módszerek
Szorgalmi időszakban végzett teljesítményértékelések részletes leírása

Nincs megadva részletes értékelés.

Szorgalmi időszakban végzett teljesítményértékelések részaránya

Nincs megadva részarány.

Vizsgaidőszakban végzett teljesítményértékelések részletes leírása

Nincs megadva részletes értékelés.

Vizsgarészek részaránya

Nincs megadva részarány.

Érdemjegy megállapítása

Nincs megadva érdemjegy határ.

Jelenléti és részvételi követelmények

Nincs megadva jelenléti követelmény.

Javítás, ismétlés és pótlás különös szabályai

Nincs megadva.

Rövid leírás

Nincs megadva.

Részletes leírás
IMSc program: A tananyag mélyebb megértésére a házi feladatok során külön követelmények teljesítésével nyílik lehetőség. Ezek az extra részfeladatok segítenek jobban megérteni az előadáson kevésbé részletezett ismereteket is.  IMSc pontok: IMSc pontok a következő módon szerezhetők: Extra technológiák, komplexebb megoldások alkalmazása a házi feladatban (maximum 25 pont) Az IMSc pontok megszerzése a programban nem résztvevő hallgatók számára is biztosított.
Ajánlott tantárgyak
(HTML, JavaScript), melyek szükség esetén a Mobil és webes rendszerek párhuzamos felvételével is elsajátíthatók, mert a két tárgy anyaga és ütemezése összehangolt 
A tantárgy elvégzéséhez szükséges tanulmányi munka

Nincs megadva munkaidő bontás.

Tantárgykövetelmények hatályossága
Tantárgykövetelmények hatályosságának kezdete:
—
Tantárgykövetelmények hatályosságának vége:
—
Tantervi elhelyezés

Nincsenek rögzített tantervi elhelyezések ehhez a tárgyverzióhoz.