ENTERPRISEY ANGULAR.JS

Transkript

1 ENTERPRISEY ANGULAR.JS THE GOOD, THE BAD, AND THE UGLY EnterJS Ralph Guderlei

2

3 ENTERPRISE APPLICATIONS? komplexe Datenmodelle (100+ Entities) komplexe Geschäftsprozesse Integration mit Drittsystemen relativ wenig Concurrent User

4 AGENDA 1. Angular.js 2. Organisation großer Projekte 3. Performance 4. komplexe Prozesse

5 ANGULAR.JS

6 ANGULAR.JS Javascript MV*-Framework entwickelt von Google momentan das populärste JS-MVC-Framework

7 TEMPLATES HTML-Fragmente deklaratives two-way databinding <label>name:</label> <input type="text" ng model="yourname" placeholder="enter a name here"> <hr> <h1>hello {{yourname}}!</h1>

8 CONTROLLER & SCOPE Controller ist Konstruktor für Scope Scope ist ViewModel simpleapp.controller('simplecontroller', function($scope) { $scope.yourname = 'enterjs'; })

9 DEMO Name: world Hello world!

10 SERVICES enthalten Daten und Funktionalität Singletons erlauben die gemeinsame Nutzung von Daten

11 DIREKTIVEN DOM-Manipulationen geschlossene Komponente: isolated scope bestehen meistens aus Template+Controller

12 ORGANISATION GROSSER PROJEKTE

13 STRUKTUR & NAMENSKONVENTIONEN Feature-basierte Ordnerstruktur Ordnerstruktur entspricht Modul-Namen 1 Modul pro Datei oft 1 Element (Controller, Service, Direktive) pro Datei Name enthält Elementtyp: foo.service.js

14 ROUTER Router-States definieren die Zustände der Anwendung $stateprovider.state('home', {}).state('movies', {abstract: true,...}).state('movies.list', {...}).state('movies.detail', {...}); Anwendungs-Zustände entsprechen Sichten, z.b. Filmliste/-details Ordnerstruktur der beteiligten Elemente entspricht dem Router-State/URL

15 TEMPLATES - DON'TS enthalten Logik: Rechte/Rollen/Varianten besser über Router-States abbilden ng-include <section id="headline"> <h1>exxcellent Movie Database</h1> </section> <a href="..." ng show="isadmin()">...</a> <section id="topmovies"> <div ng include="'movielist.tpl.html'" ng controller="movielistc </section>

16 TEMPLATES - DOS Darstellung der Daten Strukturierung über Direktiven <section id="headline"> <h1>exxcellent Movie Database</h1> </section> <section id="topmovies"> <h3>top movies</h3> <movie list movies="movies.topmovies"></movie list> </section>

17 DIREKTIVEN isolated scope verbessert Nachvollziehbarkeit Markup besser verständlich <ul class="list group"> <li ng repeat="movie in movies" class="list group item"> <movie element movie="movie"></movie element> </li> </ul> angular.module('angularlt.home.movielist', []).directive('movielist', function(){ return { restrict: 'E', templateurl: 'app/home/movielist.tpl.html', scope: { movies: '=' } }; });

18 CONTROLLER - DON'TS Daten aktiv laden Geschäftslogik Scope inheritance (ng-include) $scope.$watch angular.module('angularlt.home',[]).controller('homecontroller', function ($scope, $http) { $http.get('/api/movies', function(response){ $scope.topmovies = _.take(response.data, 10); }); });

19 CONTROLLER - DOS $scope: Verbindet Funktionalität/Daten mit Templates nur Darstellungs-Logik Daten im resolve-step des Routers laden skinny controller angular.module('angularlt.home',[]).controller('homecontroller', function ($scope, movieservice) { $scope.movies = movieservice; });

20 SERVICES Service ist Modell enthalten "Geschäftslogik" interagieren mit dem Backend halten Daten (z.b. angemeldeter Benutzer) erzeugen Events

21 ZUSAMMENFASSUNG Angular Template Controller $scope Service Rest der Welt View Konstruktor View-Model ViewModel Model

22 PERFORMANCE

23 BEISPIEL - DATENMODELL

24 URSACHEN Two-Way Databinding: viele Watcher Limit ca Watcher ineffizientes Backend

25 OPTIONEN - WATCHER Transparenz schaffen: Chrome Extension weniger Daten One-Time Binding (Angular 1.3, BindOnce)

26 OPTIONEN - BACKEND weniger HTTP-Calls, Caching Datenvolumen auf Serverseite reduzieren Antwortzeiten reduzieren bei vielen Direktiven: Template Cache nutzen

27 KOMPLEXE PROZESSE

28 BEISPIEL

29 TYPISCHE PROZESSE viele Einzelschritte nicht sequenziell unterschiedliche Aktoren beteiligt

30 ROUTER ALS STATEMACHINE jeder Zustand des Vorgangs ein Router-State Zustände individuell darstellbar Zustände bookmarkfähig Zulässigkeit der Transition bei onenter

31 ROUTER ALS STATEMACHINE - BEISPIEL $stateprovider.state('process', {abstract: true,...}).state('process.created', {...}).state('process.submitted', {...});

32 SYNCHRONISATION MIT BACKEND Idee: Vorgang als REST-Resource Repräsentation enthält Links auf zulässige Transitionen REST-Service für Transitionen keine Logik im Client Standards: Siren, HAL, collection+json, UBER

33 SYNCHRONISATION MIT BACKEND - BEISPIEL POST /api/processes > 201 Created { "links": { "_self": "/api/processes/4711", "revoke": "/api/processes/4711/actions/revoke", "submit": "/api/processes/4711/actions/submit" }, "state" : "created", "data" : {} }

34 SYNCHRONISATION MIT BACKEND - BEISPIEL PUT /api/processes/4711/actions/submit > 202 Accepted { "links": { "_self": "/api/processes/4711", "revoke": "/api/processes/4711/actions/revoke" }, "state" : "submitted", "data" : {} }

35 FAZIT

36 THE GOOD großes Ökosystem, viele Erweiterungen (angulartranslate) gibt Strukturen vor weite Verbreitung viele Informationsquellen

37 THE BAD hohe Komplexität des Frameworks aufwändige Einarbeitung anfällig für Performance-Probleme viele Möglichkeiten für unwartbare Implementierung

38 THE UGLY eigenes Modulsystem schwer zu debuggen Verbose: "Javascript EE" Entwickler programmieren "Angular", verstehen aber wenig von Javascript

39 AUSBLICK Angular 1.x weiter verwenden spannend: Migration zu Angular 2 Alternativen (z.b. React, Polymer) beobachten

40 VIELEN DANK FÜR IHRE AUFMERKSAMKEIT!