Budapest University of Technology and Economics, Faculty of Electrical Engineering and Informatics

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

Vizsgaidőszakban: 

·       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

Dr. Kővári Bence, egyetemi docens, AUT

Rajacsics Tamás, mérnöktanár, AUT

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.