WEBES ALKALMAZÁSFEJLESZTÉS 1

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 }); };

Alkalmazásobjektum 18



Modulok kezelése  regisztrálás  indítás  leállítás  hibakezelés

 modulok

közti kommunikáció

var application = (function () { var modules = {}; return { register: function (moduleId, module) { var moduleInstance = module(Object.create(sandboxProto)); 19 modules[moduleId] = moduleInstance; return moduleInstance; }, start: function (moduleId) { modules[moduleId].start(); }, stop: function (moduleId) { modules[moduleId].stop(); }, startAll: function () { for (moduleId in modules) { if (modules.hasOwnProperty(moduleId)) { this.start(moduleId); } } } //... application.register('weather', weatherModule); }; application.register('smartphone', smartphoneModule); })();

Alkalmazásobjektum

application.startAll();

Kiegészítők 20

 

Alkalmazás funkcionalitásának gazdagítása Beépülhet  homokozó

objektum interfészébe  alkalmazásba

Megvalósítások 21

 

  

Terrific Aura scaleApp Kernel.js Hydra.js

22

Eseménykezelés

Eseményt kiváltó objektumok 23

 

 

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

MNNM-minta (MVVM) 32

 



Modell-Nézet-Nézetmodell Deklaratív nézet Kétirányú adatkötés

MN* architektúrák 33





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');

get() és set() metódusok 38

var makeObservable = function(o) { return extendDeep({}, observable, { get: function (attr) { return this.attributes[attr]; }, set: function (attr, val) { this.attributes[attr] = val; this.notify('change:' + attr, val); this.notify('change', this.attributes); }, attributes: extendDeep({}, o) }) };

Natív getter és setter 39

var makeObservable = function(o) { var newO = extendDeep({}, observable); var attributes = {}; for (var i in o) { if (o.hasOwnProperty(i)) { attributes[i] = o[i]; Object.defineProperty(newO, i, { enumerable: true, get: function() { return attributes[i]; }, set: function(val) { attributes[i] = val; this.notify('change:' + i, val); this.notify('change', attributes); } }); observableBook.title = 'JavaScript Patterns rev.3.'; } var title = observableBook.title; } return newO; };

Adattagok metódussá alakítása 40

var makeObservable = function(o) { var newO = extendDeep({}, observable); var attributes = {}; for (var i in o) { if (o.hasOwnProperty(i)) { attributes[i] = o[i]; newO[i] = function(val) { if (arguments.length > 0) { attributes[i] = arguments[0]; this.notify('change:' + i, val); this.notify('change', attributes); } else { return attributes[i]; } } } observableBook.title('JavaScript Patterns rev.3.'); } var title = observableBook.title(); return newO; };

Sablon-kezelés (template-ek) 41

 

Felhasználói felület kialakítása Szövegösszefűzés rossz gyakorlat  feladatkörök

szétválasztása sérül: logika + HTML

elemek  körülményes és olvashatatlan  nagy számítási igény function createListItem(book) { return '

' + book.title + '

'; }

Sablon 42

 

Sablonnyelv + sablonfeldolgozó HTML struktúra + dinamikus elemeket jelölő részek  változók  ciklus

(logika?)  elágazás (logika?) 

Sablonnyelvek  Jade,

Mustache, Handlebars, Haml, EJS, Plates, Pure, Underscore microtemplates

Sablonnyelvek 43



Jade

li a(href='show/'+id)= title 

Handlebars.js

{{title}}



Underscore

"><%= title %>

Sablon és sablonfeldolgozó 44

<script id="listItem" type="text/template">

"><%= title %>

//Sablonszöveg kiolvasása var templateString = $('#listItem').html(); //Sablon fordítása var compiledTemplate = _.template(templateString); //Adat megadása var book = { id: 12, title: 'JavaScript Patterns' }; //HTML-szöveg előállítása var htmlString = compiledTemplate(book); //A HTML-szöveg beillesztése a dokumentumba $('#viewWrapper').html(htmlString);

45

minimvc

Prekoncepciók 46

 

Hagyományos MVC-minta Függőségek  jQuery  Underscore

var minimvc = {};

Modell 47

minimvc.model = (function() { var proto = extendDeep({ get: function(attr) { return this.attributes[attr]; }, set: function(attr, val) { this.attributes[attr] = val; this.notify('change:' + attr, val); this.notify('change', this.attributes); }, toJSON: function() { return _.clone(this.attributes); } }, observable); return { create: function(attrs) { return extendShallow(Object.create(proto), { id: _.uniqueId('model'), attributes: attrs || {} }); } }; })();

Modell használata 48

//"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');

Nézet 49



Üres objektumliterál minimvc.view = (function() { var proto = {}; return { create: function(attrs) { return extendShallow(Object.create(proto), { id: _.uniqueId('view') }, attrs || {}); } }; })();

Vezérlő 50

minimvc.controller = (function() { var proto = {}; return { create: function(attrs) { var obj = extendShallow(Object.create(proto), { id: _.uniqueId('controller') }, attrs || {});

if (attrs.events) { _.each(attrs.events, function(methodName, domEventName) { var parts = domEventName.split('.'); var selector = parts[0]; var eventType = parts[1]; $(document).on(eventType, selector, function(e) { obj[methodName](e); }); }); } return obj; } }; })();

Használata 51

HTML oldal 52



<script type="text/template" id="bookForm-template"> Title:
Author: <script type="text/template" id="bookPanel-template"> Title: <%= title %>
Author: <%= author %> <script <script <script <script <script <script <script

type="text/javascript" type="text/javascript" type="text/javascript" type="text/javascript" type="text/javascript" type="text/javascript" type="text/javascript"

src="jquery.js"> src="underscore.js"> src="extendDeep.js"> src="extendShallow.js"> src="observable.js"> src="minimvc.js"> src="book.js">

Modell 53

var book = minimvc.model.create({ author: 'Stoyan Stefanov', title: 'JavaScript Patterns' });

Űrlap nézet 54

var formView = minimvc.view.create({ el: '#bookForm', model: book, template: _.template($('#bookForm-template').html()), initialize: function() { this.model.addObserver('change', this.updateView.bind(this)); this.render(this.model.toJSON()); },

render: function(data) { $(this.el).html(this.template(data)); }, updateView: function(data) { $(this.el).find('#txtTitle').val(data.title); $(this.el).find('#txtAuthor').val(data.author); } });

Panel nézet 55

var panelView = minimvc.view.create({ el: '#bookPanel', model: book, template: _.template($('#bookPanel-template').html()), initialize: function() { this.model.addObserver('change', this.render.bind(this)); this.render(this.model.toJSON()); }, render: function(data) { $(this.el).html(this.template(data)); } });

Vezérlő 56

var bookController = minimvc.controller.create({ model: book, formView: formView, panelView: panelView, events: { '#txtTitle.keyup': 'writing', '#txtAuthor.keyup': 'writing' }, initialize: function() { this.formView.initialize(); this.panelView.initialize(); }, writing: function(e) { this.model.set('title', $('#txtTitle').val()); this.model.set('author', $('#txtAuthor').val()); } }); bookController.initialize();

57

MN* keretrendszerek

Keretrendszerek 58

 

 

Backbone (MVC vagy MVR) Knockout (MVVM) Ember Angular (MVW)

Backbone 59