AngularJS

382 Aufrufe

Veröffentlicht am

Vortrag Expertenkreis Java 27.8.2015, GEDOPLAN GmbH, Bielefeld

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
382
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

AngularJS

  1. 1. www.agentbase.de 1 Expertenkreis Java 27.August 2015 Michael Steinhoff – agentbase AG
  2. 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. 3. www.agentbase.de 3 AngularJS Agenda Einführung Konzepte Demo Tests, Tests, Tests Ausblick Version 2.0
  4. 4. www.agentbase.de 4 AngularJS Einführung Google Webtrends
  5. 5. www.agentbase.de 5 AngularJS Einführung Indeed.com Job Trends
  6. 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. 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. 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. 9. www.agentbase.de 9 AngularJS Einführung
  10. 10. www.agentbase.de 10 AngularJS Einführung
  11. 11. www.agentbase.de 11 Konzepte AngularJS
  12. 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. 13. www.agentbase.de 13 AngularJS Model-View-Controller Trennung Logik und Darstellung Senken Komplexität Bessere Wartbarkeit Bessere Testbarkeit
  14. 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. 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. 16. www.agentbase.de 16 erste kurze Demo AngularJS 2-Wege Datenbindung
  17. 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. 18. www.agentbase.de 18 AngularJS Expressions {{expression}} Daten aus dem Scope in der View anzeigen $scope.expression Automatisches Update durch dirty checking
  19. 19. www.agentbase.de 19 AngularJS Filter Transformationen {{expression | lowercase}} {{expression | date}} {{expression | uppercase}} {{expression | number}} {{expression | currency}} {{expression | json}} Daten - Einschränkungen
  20. 20. www.agentbase.de 20 AngularJS Controller Controller definieren einen Scope für einen Teil des DOM HTML JavaScript
  21. 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. 22. www.agentbase.de 22 AngularJS Routing Konzept von Single-Page Applications Mapping von URLs auf Templates und Controller
  23. 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. 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. 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. 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. 27. www.agentbase.de 27 AngularJS Promises deferred Objekt über $q resolve(value) reject(reason) notify(value)
  28. 28. www.agentbase.de 28 AngularJS Direktiven Verwendbar über neue HTML Tags Wiederverwendbare Komponenten AngularJS bringt viele Direktiven mit ngRepeat ngShow ngModel ngClick
  29. 29. www.agentbase.de 29 AngularJS Direktiven Eigene Komponenten
  30. 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. 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. 32. www.agentbase.de 32 zweite kurze Demo AngularJS Ein einfaches Beispiel
  33. 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. 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. 35. www.agentbase.de 35 Demo AngularJS
  36. 36. www.agentbase.de 36 Tests, Tests, Tests AngularJS
  37. 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. 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. 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. 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. 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. 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. 43. www.agentbase.de 43 AngularJS Unit Tests - Beispiel
  44. 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. 45. www.agentbase.de 45 AngularJS End-To-End Tests - Beispiel
  46. 46. www.agentbase.de 46 Ausblick Version 2.0 AngularJS
  47. 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. 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. 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. 50. www.agentbase.de 50 AngularJS Ausblick auf Version 2.0 – Hello World Angular 1.x
  51. 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. 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

×