WEBES ALKALMAZÁSFEJLESZTÉS 1. Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816
2
Nagy méretű webes alkalmazások
Kliensoldali webes alkalmazások fejlődése 3
2000-es évek eleje: szerveroldali technológiák Megbízhatatlan
kliensoldal, kiforratlan környezet, „ismeretlen” nyelv HTTP input HTML oldal generálása Üzleti logika Adatok perzisztálása Felhasználókezelés Kapcsolattartás szolgáltatásokkal
Kliensoldali webes alkalmazások fejlődése 4
2005-től: Ajax technológia Kényelmes,
élményszerű webes alkalmazások Nyelv felfedezése Technológiák fejlődése Böngészők fejlődése
Nagy kódbázis a kliensoldalon Szerepkörök egy része kliensoldalon HTML
generálás Adatok feldolgozása Adatok tárolása
Egyoldalas alkalmazások 5
Új alkalmazáskategória Single Page Application (SPA) Jellegzetességei oldal
egyszer töltődik be további szerverkommunikáció a háttérben (Ajax) főleg adatcsere
Nagyon sok JavaScript kód
Kódszervezési problémák 6
Függvények, objektumok, modulok Sok modul hogyan szerveződik alkalmazássá? Az adat és a nézet hogyan különül el? Segíthet ebben a jQuery? felelősségi körök elválasztása
Alkalmazás feladatai 7
Alkalmazás feladatai 8
Alkalmazás feladatai 9
modulok kezelése események kezelése DOM kezelése, elemek megjelenítése adatok és üzleti logika definiálása adatok tárolása, mentése (pl. AJAX) URL kezelése
10
Modulkezelés
Modulkezelés 11
Alkalmazásszintű modulkezelés egy olyan alapvető alkalmazásarchitektúra definiálását jelenti, amely elősegíti a modulok együttműködését és kommunikációját anélkül, hogy közben szorosan kapcsolódjanak egymáshoz. Modul = az alkalmazás egy független része Koncepciók Nicholas
C. Zakas Addy Osmani
Modulkezelés 12
Modulkezelés funkciói névterezés
(névtér minta) minden modul számára egy közös alapfunkcionalitás biztosítása (homokozó minta) modulok élettartamának kezelése (regisztrálás, indítás, megállítás) eseménykezelő rendszer biztosítása a modulok kommunikációjához alkalmazásszintű adatok kezelése bővítmények definiálása
Architektúrakoncepció 13
Modulok 14
Felhasználói felület egyes részei JavaScript kód + adatok + felületi elemek Szabványos modulinterfész, amit minden modulnak implementálnia kell var moduleInterface = { start: function () {}, stop: function () {} };
Homokozó objektum 15
Modulok nem tudnak a többiről Kommunikáció a homokozó objektumon keresztül Minden modul megkapja egy példányát Homlokzat minta (Facade pattern) = közös API Funkciók eseménykezelés DOM AJAX stb
műveletek
Homokozó objektum 16
Homokozó prototípus var sandboxProto = extendDeep({ //... }, observable);
Példa moduldefiníció var module1 = function (sandbox) { //A modul implementációja //sandbox használata //Publikus API meghatározása return extendDeep(Object.create(moduleInterface), { //... }); };
var weatherModule = function (sandbox) { var state = 'sunny', changeState = function (newState, hours) { state = newState; 17 sandbox.notify(newState, hours); }; return extendDeep(Object.create(moduleInterface), { changeState: changeState }); var smartphoneModule = function (sandbox) { }; var warnForRain = function (hours) { console.log('Rain is coming in ', hours, 'hours!'); }, prepareForSun = function (hours) { console.log('The sun will shine in ', hours, 'hours!'); }, init = function () { sandbox.addObserver('rainy', warnForRain); sandbox.addObserver('sunny', prepareForSun); }; return extendDeep(Object.create(moduleInterface), { init: init }); };
Események kibocsátása + megfigyelése Megfigyelő minta Példa: böngésző és DOM objektumai Hátránya: referencia
a megfigyelő objektumra szoros kapcsolat kapcsolat karbantartására fordított idő nő
Eseménygyűjtők 24
Központi eseményvezérlő minta Előnye a
megfigyelőnek és a megfigyeltnek nem kell tudnia egymásról lazán kapcsolt rendszerek tipikusan a homokozó objektumon keresztül valósul meg
Hátránya nincs
biztosítva az esemény feldolgozása
Eseménybuszok 25
Jól kontrollált és adminisztrált környezet üzenetek kezelésére állapotmenedzsment logolás üzeneteknek kötött formátuma van
Eseménysorok 26
Speciális eseménybusz Eltérő feldolgozási sebesség Sorrend megtartása
Eseménykezelési stratégia kiválasztása 27
Esemény kibocsátása, megfigyelhetőség: aszinkron viselkedést nyújtó függvénykönyvtárak Eseménygyűjtő: alkalmazás egyes részei közötti kommunikáció Eseménybusz: rétegek közötti kommunikáció nagy méretű alkalmazásoknál
28
MN* architektúrák
MNV-minta (MVC) 29
Kiindulási pont: adat és nézet szétválasztása Architekturális tervezési minta Modell: adat + feldolgozási logika Nézet: felhasználói felület kezelésével kapcsolatos logika Vezérlő: a modell és a nézet irányítása
Eredeti MNV-minta 30
Smalltalk-80 (1979) Jellegzetességei: Modell
független a felhasználói felülettől Nézet-vezérlő pár a megjelenítéshez Vezérlő a bemeneti adatok feldolgozásáért felel
MNP-minta (MVP) 31
Modell-Nézet-Prezenter Passzív nézet Prezenter: központi irányító Nézet: interfész
Az előző architektúrák alkalmazkodtak a kliensoldal jellegzetességeihez Maradt modell nézet
Többi sokféle
MN* architektúra
MN* architektúrák 34
Kijelöli az adat és megjelenítés helyét Lazább kapcsolat Nagyobb rugalmasság Nagy kódbázisnál érdemes használni Jól bevált megoldások egyéb dolgokra is
35
MN* architektúrák alkotóelemei
Megfigyelhető modellek 36
Modell változás esetén eseményt bocsát ki adatkötés Elemei megfigyelhetővé tenni megfigyelő minta változáskor eseményt kibocsátani modellt
Utóbbira megoldások get(),
set() metódusok natív getter és setter használata adattagok metódusokká alakítása Object.observe()
get() és set() metódusok 37
var book = { author: 'Stoyan Stefanov', title: 'JavaScript Patterns' }; var observableBook = makeObservable(book); observableBook.addObserver('change', function (book) { console.log('Book changed', book); }); observableBook.addObserver('change:title', function (title) { console.log('Title changed', title); }); observableBook.set('title', 'JavaScript Patterns rev.3.'); var title = observableBook.get('title');
//"Hagyományos" modell var book = { author: 'Stoyan Stefanov', title: 'JavaScript Patterns' }; //minimvc modell var book = minimvc.model.create({ author: 'Stoyan Stefanov', title: 'JavaScript Patterns' });
book.addObserver('change:title', function (val) { console.log('A könyv címe megváltozott: ', val); }); book.set('title', 'Pro JavaScript Patterns');