Belépés címtáras azonosítással
magyar nyelvű adatlap
Kliensoldali rendszerek
A tantárgy angol neve: Client-Side Systems
Adatlap utolsó módosítása: 2024. március 25.
Mérnök informatikus szak, BSc képzésSzoftverfejlesztés specializációMindhárom ágazat (AUT/IIT/MIT) számára választható tárgy
Dr. Kővári Bence, egyetemi docens, AUT
Rajacsics Tamás, mérnöktanár, AUT
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
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
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
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:
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.
· 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
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.