Vortrag Expertenkreis Java 27.8.2015, GEDOPLAN GmbH, Bielefeld

1. www.agentbase.de 1
Expertenkreis Java
27.August 2015
Michael Steinhoff – agentbase AG

2. www.agentbase.de 2
AngularJS
agentbase AG - Profil
IT-Dienstleister, Paderborn
Focus
Business Process Management
Portale
Social Business
Anwendungsentwicklung
Anwendungsmodernisierung / -webifizierung
Systemintegration / -administration
Schulungen und Workshops

3. www.agentbase.de 3
AngularJS
Agenda
Einführung
Konzepte
Demo
Tests, Tests, Tests
Ausblick Version 2.0

4. www.agentbase.de 4
AngularJS
Einführung
Google Webtrends

5. www.agentbase.de 5
AngularJS
Einführung
Indeed.com Job Trends

6. www.agentbase.de 6
AngularJS
Einführung
< HTML has angle brackets, so angle brackets, Angular >
Start ~2009
Entwicklung von Google Feedback stockte
Neuentwicklung mit damaligem Angular Framework
2-3 Wochen
17.000  1.500 Codezeilen
Google
hauptsächlich interne Apps (form-driven)
DoubleClick
YouTube Leanback (SmartTV)

7. www.agentbase.de 7
AngularJS
Einführung
“Angular is what HTML would have been, had it been
designed for applications. “ (angularjs.org)
HTML gut für statische Seiten
Angular ergänzt um Syntax und Konstrukte für Web-Apps
Abstraktion von Low-level DOM Operationen

8. www.agentbase.de 8
AngularJS
Einführung
Dinge die der Entwickler nicht braucht…
Manuelle HTML DOM Manipulation
unhandlich und fehleranfällig
Bereitstellen von Daten für und von dem UI
CRUD Operationen sind die wesentlichen Aufgaben
Server  Internes Objekt  HTML Form
AngularJS arbeitet mit einfachen JavaScript POJOs
Boilerplate Code
Code schreiben, um den eigentlichen Code schreiben zu können

9. www.agentbase.de 9
AngularJS
Einführung

10. www.agentbase.de 10
AngularJS
Einführung

11. www.agentbase.de 11
Konzepte
AngularJS

12. www.agentbase.de 12
AngularJS
Single-Page Application Framework
Kein kompletter Seiten-Reload
Backend Zugriffe ausschließlich über Ajax
Vorteile
Plattformunabhängigkeit
Benutzerfreundlichkeit
Offlinefähigkeit
Architektur
Trend zu Service-basierten Systemen
Seiten sind bookmarkable
Nachteile
JavaScript zulassen
verschiedene Browser (Framework Entwicklung)
SEO

13. www.agentbase.de 13
AngularJS
Model-View-Controller
Trennung Logik und Darstellung
Senken Komplexität
Bessere Wartbarkeit
Bessere Testbarkeit

14. www.agentbase.de 14
AngularJS
Model-View-ViewModel
Weiterentwicklung MVC
ViewModel
Entkopplung Präsentationslogik von UI
Deklarative Bindung zum UI, kennt View selbst nicht
Testbarkeit Präsentationslogik

15. www.agentbase.de 15
AngularJS
2-Wege Datenbindung
Model – Single-Source of Truth
Änderung des Models bewirkt Änderung in gesamter Anwendung
Kein Observer notwendig, weniger fehleranfälliger Code
Keine direkte DOM – Maniplation!

16. www.agentbase.de 16
erste kurze Demo
AngularJS
2-Wege Datenbindung

17. www.agentbase.de 17
AngularJS
Dirty Checking
View wird sofort aktualisiert wenn das Model sich ändert
innerhalb des aktuellen Scopes (ViewModel)
gilt nur für angezeigte Daten
Es wird ständig auf Aktualisierungen geprüft
Performance-Impact bei starker Nutzung
bei ng-model dirty checking bei jedem Tastendruck

18. www.agentbase.de 18
AngularJS
Expressions
{{expression}}
Daten aus dem Scope in der View anzeigen
$scope.expression
Automatisches Update durch dirty checking

19. www.agentbase.de 19
AngularJS
Filter
Transformationen
{{expression | lowercase}} {{expression | date}}
{{expression | uppercase}} {{expression | number}}
{{expression | currency}} {{expression | json}}
Daten - Einschränkungen

20. www.agentbase.de 20
AngularJS
Controller
Controller definieren einen Scope für einen Teil des DOM
HTML
JavaScript

21. www.agentbase.de 21
AngularJS
Scope Hierarchien
Root Scope überall vorhanden
nur für Daten verwenden, nicht für Funktionen  Service
Expressions werden von innen nach außen evaluiert

22. www.agentbase.de 22
AngularJS
Routing
Konzept von Single-Page Applications
Mapping von URLs auf Templates und Controller

23. www.agentbase.de 23
AngularJS
Dependency Injection
Prinzip: Inversion of control
Kontrolle über Instanziierung wird an zentrale Stelle abgegeben
Ohne dependency injection
Mit dependency injection

24. www.agentbase.de 24
AngularJS
Dependency Injection
Vorteile
Modularer und wiederverwendbarer Code
Der Code wird wartbarer
Bessere Testbarkeit
Die API wird einfacher und abstrakter
Injektion über den Namen
Aufpassen bei Minifyer/Obfuscator!

25. www.agentbase.de 25
AngularJS
Services
Services sind Singletons
Erst bei Benutzung instanziiert (Lazy)
Austauschbar
Objekte genutzt mittels Dependency Injection
Angular bringt schon eigene Services mit ( z.B. „$http“)
Verschiedene Typen
Provider komplex
Factory
Service
Value einfach

26. www.agentbase.de 26
AngularJS
Promises
$http-Service läuft asynchron
Promise: mögliches Ergebnis eines asynchronen Calls
Verwendung des Promise z.B. in einem Controller
Durchführung sobald Ergebnis aus Service vorliegt
Ähnlich zu try-catch für synchrone Calls

27. www.agentbase.de 27
AngularJS
Promises
deferred Objekt über $q
resolve(value)
reject(reason)
notify(value)

28. www.agentbase.de 28
AngularJS
Direktiven
Verwendbar über neue HTML Tags
Wiederverwendbare Komponenten
AngularJS bringt viele Direktiven mit
ngRepeat
ngShow
ngModel
ngClick

29. www.agentbase.de 29
AngularJS
Direktiven
Eigene Komponenten

30. www.agentbase.de 30
AngularJS
Module
Container für verschiedene Teile der Anwendung
Jede Anwendung besteht aus min. einem Modul
Kapselung in wiederverwendbare Module
Laden in beliebiger Reihenfolge
Viele 3rd party Module verfügbar

31. www.agentbase.de 31
AngularJS
Module
Setup in größeren Anwendungen
Ein Modul für jedes Feature
Ein Modul für jede wiederverwendbare Komponente
Direktiven
Filter
Ein Applikations-Modul das alle anderen Module beinhaltet

32. www.agentbase.de 32
zweite kurze Demo
AngularJS
Ein einfaches Beispiel

33. www.agentbase.de 33
AngularJS
Weitere Module
Es gibt eine Vielzahl hinzufügbarer Module
Internationalisierung
Maskenerstellung und Validierung
Sichten, Tabellen und Filter
UI-Elemente
Spinner
Breadcrumb
File-Upload
Messages
…
Charts
und vieles mehr
http://ngmodules.org/ (>1500 Module)

34. www.agentbase.de 34
AngularJS
Bootstrap
CSS / HTML /Javascript Framework von Twitter
Wird gerne zusammen mit AngularJS verwendet
Styling von
Tabellen
Formularen
Buttons
Grids, Responsive
Einige Komponenten machen Probleme wegen jQuery
Spezielle Projekte
UI Bootstrap (http://angular-ui.github.io/bootstrap/)
AngularStrap (http://mgcrea.github.io/angular-strap/)

35. www.agentbase.de 35
Demo
AngularJS

36. www.agentbase.de 36
Tests, Tests, Tests
AngularJS

37. www.agentbase.de 37
AngularJS
Programmieren mit JavaScript
JavaScript Guru Douglas Crockford
spezifizierte JSON
„JavaScript is the only language that I’m aware of that
people feel they don’t need to learn before they start
using it.“

38. www.agentbase.de 38
AngularJS
Test, Test, Tests
mehr „Seriosität“ bei der Entwicklung
Unit Tests
Code-level Testing
Testen von einzelnen Komponenten
Isoliertes Testen
Angular Code Base > 4000 Unit Tests
End-To-End Tests
User-level Testing
Testen Zusammenspiel mehrerer Komponenten
Automatische Browser Tests
Laden von Seiten
Masken Submit
Prüfen auf Vorhandensein von Seiten Elementen

39. www.agentbase.de 39
AngularJS
Test, Test, Tests
Mock-Objekte
Platzhalter für „echte“ Objekte
keine dynamischen Ergebnisse gewünscht
kein Zugriff auf andere Systeme notwendig
Dependency Injection
vereinfacht Testen
Dependencies können relativ einfach „gemocked“ werden

40. www.agentbase.de 40
AngularJS
Unit Tests - Tools
Karma
Test-Runner
JavaScript Command-Line Tool
startet HTTP Server und führt die Tests durch
testet gegen die gängigsten Browser
Jasmine
Test-Framework
Test-Strukturierung
Assertions
ngMock
Angular Modul
liefert definierte Ergebnisse für REST-Calls

41. www.agentbase.de 41
AngularJS
Unit Tests - Jasmine
describe()
Test-Beschreibung
beforeEach() / afterEach()
wird vor / nach jedem Testlauf ausgeführt
expect()
erwartetes Ergebnis eines Testdurchlaufs
toBe() / toEquals / toBeNull() / toBeLessThan() …
Matcher

42. www.agentbase.de 42
AngularJS
Unit Tests - ngMock
module()
lädt ein Angular Modul für den Unit Test
inject()
Dependency Injection für den Unit Test
$controller
Instanziierung von Controllern
$httpBackend
mocken eines http-Service

43. www.agentbase.de 43
AngularJS
Unit Tests - Beispiel

44. www.agentbase.de 44
AngularJS
End-To-End Tests - Tool
Protractor
Frontend für Selenium
Verwendet Jasmine Test Syntax
Objekte
browser – Zugriff auf Browser (z.B. Url)
element().by… – Zugriff Elemente im Source Code
by.css(`h2.cssClass`)
by.model(`modelvar`)
by.binding(`binding`)
sendKeys() – Eingabe durchführen

45. www.agentbase.de 45
AngularJS
End-To-End Tests - Beispiel

46. www.agentbase.de 46
Ausblick Version 2.0
AngularJS

47. www.agentbase.de 47
AngularJS
Ausblick Version 2.0
Motivation
Performance
neue Technologien und Browser
Mobile First
Ease of Use – focus on business

48. www.agentbase.de 48
AngularJS
Ausblick Version 2.0
Designed für moderne Browser
Internet Explorer > Version 10
mobile Geräte im Vordergrund
ECMAScript 6
Published 06-2015
Weitere Modularisierung
Optimierung Change Detection
Erweitertes Routing
Integration von Authentifikation und Autorisierung
State-basiertes Routing
Vorladen und Verschachteln von Views

49. www.agentbase.de 49
AngularJS
Ausblick Version 2.0
Version 1.x
Controller
$scope
ES5
Angular Module
relevant (geschätzt) bis 2018
Version 2.0
noch Alpha
Web Components
ES6 und ES6 Module
Annotationen
ab (im Laufe von) 2016
Migrationspfad?

50. www.agentbase.de 50
AngularJS
Ausblick auf Version 2.0 – Hello World
Angular 1.x

51. www.agentbase.de 51
AngularJS
Ausblick auf Version 2.0 – Hello World
Angular 2.0 mit TypeScript
(https://angular.io/docs/js/latest/index.html)

52. www.agentbase.de 52
Vielen Dank für Ihre Aufmerksamkeit!
agentbase AG
Eggertstraße 7
33100 Paderborn
Fon: +49 5251 547 2600
Fax: +49 5251 547 2699
E-Mail: info@agentbase.de
Web: www.agentbase.de