Moderní webové aplikace AngularJS

Rozměr: px

Začít zobrazení ze stránky:

Download "Moderní webové aplikace AngularJS"

Jan Tábor
před 7 lety
Počet zobrazení:

1 Moderní webové aplikace AngularJS

2 Milan Víťa PHP -> Javascript PHP -> Java -> Javascript

3 ?

4 vše si poskládat z knihoven použít framework

5 AngularJS je framework

6 Psal se rok 2009 ano Jak se tehdy tvořili webové aplikace? pomocí server-side frameworků scriptování v jquery Původním cílem AngularJS byl komerční framework náhrada stávajících view příklon k Single Page aplikacím

8 Serverside VS SPA

9 Serverside VS SPA požadavek HTML - celá stránka 1.požadavek aplikace požadavek HTML - konkrétní oblast požadavek na data data

10 Šablonový systém v AngularJS <html ng-app> <head> <script src=" </head> <body> <h1>ahoj {{city.name}}</h1> Upravit oslovení: <input type="text" ng-model="city.name" /> </body> </html> ukázka

11 Directivy <span ng-if="user.enabled"> {{user.name}} </span> <tr ng-repeat="user in users"> <td>{{user.name}}</td> </tr>

12 Dvoucestný databinding - milovaný i nenáviděný

13 Dvoucestný databinding - milovaný i nenáviděný <h1>ahoj {{city.name}}</h1> Upravit oslovení: <input type="text" ng-model="city.name" /> Watcher last value curent value changed? {{city.name}} false city.name (ngmodelwatch) false

14 Dvoucestný databinding - milovaný i nenáviděný <h1>ahoj {{city.name}}</h1> Upravit oslovení: <input type="text" ng-model="city.name" /> Watcher last value curent value changed? {{city.name}} Plzeň true city.name (ngmodelwatch) Plzeň true

15 Dvoucestný databinding - milovaný i nenáviděný <h1>ahoj {{city.name}}</h1> Upravit oslovení: <input type="text" ng-model="city.name" /> Watcher last value curent value changed? {{city.name}} Plzeň Plzeň false city.name (ngmodelwatch) Plzeň Plzeň false

16 Dvoucestný databinding - jak s ním žít angular výrazy vyhodnocuje pokud se něco mohlo změnit musí být rychlé nemáte pod kontrolou počet volání počet watcherů < ~ výměnou za to můžete pracovat přímo s JS objekty + ve většině případů vám ušetří čas a kód

17 Formuláře <form name="breweryform"> <input id="brewery-year" type="number" name="year" ng-model="brewery.year" required /> </form> // angular vytvoří objekt breweryform.year = { = { $submitted: $dirty: false, false, $pristine: true, $dirty: $valid: false, $pristine: $invalid: true, $valid: $touched: false, false, $invalid: true, $error: $untouched: {required: true, Array[1]} } $error: { number : true required : true } }

18 Dependency injection var UserStore = function() { this.httpservice = HTTPService.getInstance(); } var UserStore = function(httpservice) { this.httpservice = httpservice; }

19 Dependency injection v angularu var BreweryServiceConstructor = function() { // služba řeší komunikaci se serverem } var BreweryController = function(breweryservice) { this.breweries = breweryservice.load(); }; angular.module("beerapp", []).controller("brewerycontroller", BreweryController).service("breweryService", BreweryServiceConstructor);

20 Komunikace se serverem $http - základní rozhraní $resource - jednoduché pojetí RESTu var Brewery = $resource('/api/v1/brewery/:id', {id : '@id'}); var list = Brewery.query({'page' : 2}); // GET /api/v1/brewery var brewery42 = Brewery.get({id : 42}); // GET /api/v1/brewery/42 brewery42.name = 'Janáček'; brewery42.$save(); // POST /api/v1/brewery/42 brewery42.$delete(); // DELETE /api/v1/brewery/42

21 Promise step1(function (value1) { step2(value2, function(value3) { step3(value3,. ); }); }); functionwithpromise().then(promisedstep2).then(function (value2) { // Do something }).catch(function (error) { // Handle error from // all above steps })

22 Interceptory ratingservice Intercetor Server přidat hodnocení 401 Unauthorized Modální přihlašovací okno požadavek na přihlášení autentizační token Klient přidat hodnocení (opakovaný požadavek) hodnocení přidáno (201 Created)

23 Routing #/brewery controller: BreweryListController, templateurl: brewery/list.html #/brewery/edit/:id controller: BreweryEditController, templateurl: brewery/edit.html brewery/list.html nebo brewery/edit.html

24 Vlastní elementy - directivy potřebujeme předat data reagovat na akce <brewery-form brewery="..." on-save="..." on-cancel="..."> </brewery-form>

25 Vlastní elementy - directivy / komponenety var componentdefinitionobject = { templateurl: "breweryform.html", }; controller: controllerconstructor, bindings: { brewery: '=', onsave: '&', oncancel: '&' } <brewery-form brewery="..." on-save="..." on-cancel="..."> </brewery-form> angular.module('beerapp.breweryform', []).component("breweryform", function() { return componentdefinitionobject; })

26 Proč si angular vybrat Výborná dokumentace Početná komunita Ucelený framework Oddělení kódu a html Velké množství komponent a knihoven Testovatelnost ngmock protractor

27 Protractor - End to End testing for Angular nádstavba nad Seleniem přidává lokátory specifické pro Angular element(by.id('gobutton')); element(by.css('selected')); element(by.binding('user.name')); element(by.model('product.count')); element(by.repeater('product.count'));

28 AngularJS přerostl své odvětví \ MOST POPULAR TECHNOLOGIES Stack Overflow - Developer Survey 2015

29 Kdy ho použít? Aplikace, aplikace aplikace informační systémy kalkulační nástroje téměř cokoli za přihlášením Tam kde potřebujete vyměnit view a dokážete postavit REST API

30 Kdy ho nepoužít? Z důvodu SEO klasické webové stránky (není náhrada jquery) Z důvodu výkonu vysoce dynamické aplikace Excel inzerce, e-shopy?

31 Na co si dát pozor? množství a rychlost watcherů více aplikací na jedné stránce pište čistý kód malé části kódu řešící jedem problém nespoléhejte na odstínění od javascriptu prototypová dědičnost promise this dbejte na architekturu

32 Kdo ho používá Youtube, PayPal, Mall, GoG, InvisionApp, Blue Origin, Lego Indiegogo, Docker, Best buy, NBA, Forbes, CNN, Weather...

33 Angular 2 první zmínky 5/2014 Designed for the future beta.6 ( ) bude to úplně jiný framework

34 Angular 2 - technologie psaný v TypeScriptu podpora pro ES5, ES6 i Dart používá RxJS (Reactive extension for JS) a set of libraries to compose asynchronous and event-based programs using observable collections and Array#extras style composition in JS funkcionální reaktivní programovní developed by Microsoft Open Technologies, Inc.

35 Budoucnost - 1.x vs 2.x datum vydání x / 2016 upgrade? použití 1.x komponent v 2.x (ngupgrade) použítí 2.x komponent v 1.x (ngforward) spokojeně pokračovat na 1.x Má smysl na něj čekat? rozhodně stojí za to ho sledovat

36 Díky za pozornost...

37 Zdroje -

Podobné dokumenty

Vývojařská Plzeň AngularJS

Vývojařská Plzeň AngularJS Milan Lempera @milanlempera Víťa Plšek @winsik PHP -> Javascript PHP -> Java -> Javascript www.angular.cz ? Psal se rok 2009 ano 2009... Jak se tehdy tvořili webové aplikace?