SlideShare ist ein Scribd-Unternehmen logo
PWAs mit Angular
Jens Binfet
#1 Herausforderung im Engineering von Benutzeroberflächen:
In welchem Kontext wird die Applikation
ausgeführt werden?
Web all the things?
Das Web als Plattform verspricht, diese Probleme zu lösen.
● Eine einzige Plattformabstraktion
● One code to rule them all
● Lauffähig auf so gut wie jeder Hardware
● Keine Softwareverteilungs / Updateproblematik
● ...
Aber - Funktioniert das auch in der Praxis?
Wellenbewegung des Web-Enthusiasmus
● Web 2.0
● Ajax-Ära
● Responsive Design
● Single-Page Applikationen mit JavaScript
● Progressive Web Apps
➔ Jede Wellenbewegung hat in ihrem teilweisen “Scheitern” das
Web als Plattform enorm vorangebracht
Zusätzliche Anforderungen aus aktueller Sicht
- Internationalisierung / Lokalisierung
- Echtzeitkommunikation
- Offline-Fähigkeit
- Time to Interaction
- Notifications (Push)
- ...
Ein aktueller Lösungsansatz: PWA
Progressive Web-Apps sind Webapplikationen (HTML/CSS/JS),
die zahlreiche Charakteristika einer nativen App mit den
Vorteilen einer Webapplikation kombinieren.
➔ “Das Beste aus beiden Welten”
Charakteristika
● Single Codebase (Plattform & Deviceunabhängigkeit)
● Progressive Feature Enhancement
● Offline Funktionalität (Offline-First)
● Keine Installation
● Add-To-Homescreen (scheinbare Installation)
● Push-Notification
● URL
● Niedrige Time-to-Interaction
Wie hängen Angular und PWA zusammen?
Was ist Angular?
“Angular is a Platform that makes it easy to build
applications with the web (PWA)”
Stephen Fluin - Developer Advocate Google
Was macht Angular so hilfreich?
Angular ist nicht nur ein Framework, sondern eine Plattform um
das Framework!
Das bedeutet:
Angular Plattform
=
User-Experience + Developer Experience + Community
(Features) + (Entwicklungsprozess) + (Ökosystem)
Ist Angular das beste Framework?
Angular ist sicher nicht für jeden Anwendungsfall das beste
Framework.
Es gibt da draußen jede Menge technisch exzellente Frameworks.
Angular hat aus meiner Sicht das Gesamtkonzept (Plattform)
mit dem größten allgemeinen Mehrwert!
User Experience / Angular Kern Features
Ein selektiver Überblick
Single Page Pattern
● Keine Pagereloads für den Benutzer
● “App-Feeling”
● Nach dem initialen load, nur noch reiner Datenaustausch
● Funktioniert exzellent mit REST Datenquellen
Databinding
● Die Darstellung der Daten reagiert umgehend auf Änderung
der Daten
● Angulars Observable Pattern (RxJs) gibt viel
Gestaltungsfreiraum für Datenflüsse und Transformationen
ohne Performanceeinbußen
Routing
● Das Routing geschieht im Client (Browser)
● Dadurch:
○ Bookmarkbare “Seiten” / Deeplinks
○ Lazy Loading ganzer Module
○ Daten-Preloading
○ “Guards”
Webcomponents
● W3C Standard
● UI-Elemente können als selbstdefinierte “HTML”-Elemente
wiederverwendet werden
○ gekapselte Styles (Keine Seiteneffekte)
○ Verhalten des Elements (JS)
○ Struktur/Markup
● Diverse CSS-Frameworks bieten auf diese Weise
Integrationen an (Bootstrap, Material etc.)
Weitere Features
● Internationalisierung und Lokalisierung
● Accessibility
● native Browser Animationen
● Formularunterstützung (Validierung, Multistep etc.)
● Http-Library
● Modulsystem (einfach konsumierbares Ökosystem)
Developer Experience
TypeScript
● Vorteile typisierter Sprachen, ohne die Flexibilität von
JavaScript zu verlieren
● Implizite Lösung des Feature-Gap Problems
(Implementation ist unabhängig vom Unterstützungslevel in
den anvisierten Browsern)
● Einfachere Zusammenarbeit auch mit unerfahrenen Kollegen
● Einfacherer Umstieg aus einer streng typisierten Sprache
IDE Unterstützung (Languageserver)
● Durch den Language Server von Angular kann die IDE
Angular Code “verstehen”
● Falsche Bindings werden vor der Laufzeit erkannt
● Code Completion selbst in Templates
CLI - Commandline Tool
● Das Commandline Tool ist das Herz der DX-Strategie
● Es bündelt Tools und Best-Practices für den gesamten
Dev-Lifecycle
Scaffold & Generate
● Setup - Generierung und Konfiguration einer Initialen App
○ Wir starten mit einer lauffähigen, präkonfigurierten App
○ Durch flags können Features direkt integriert werden
z.B. git Initialisierung, Style Präprozessor (SASS)
● Generate - Entitäten (Module, Komponenten etc.) inklusive
Tests generieren und integrieren
Serve & Develop
● Serve
○ Devbuild & Server (inkl. Livereload etc.)
○ CodeStyle (Codelyzer/Linting)
● i18n
● Direkter Doku Zugriff/Suche via CLI
● ...
Build & Distribute
● Build
○ Vorkonfigurierter Dev & Prod Buildtask & Profil
○ Eigene Build Konfigurationen
○ ENV-Variablen etc.
Test
● Test
○ Setup für Unitests (Karma)
○ End-to-End Tests (Protractor)
● Testabdeckungs Bericht
● Unittests werden bei der Generierung mit generiert (TDD /
BDD ready)
Erweitertes Tooling
● Augury (Chrome Ext) - Deep App Inspection
● NG Universal Tools für PWA Optimierung:
○ Service Worker
○ App Shell
○ Push Notifications
● ...
Und das Backend? - Fullstack Generierung
● jHipster
● NinjaCodeGen
● Celerio Angular Quickstart (Spring Boot + rel. DB)
● ...
Community
Kern Projekt - Ein Community Projekt?
● 12.000+ OpenSource Contributors im Projekt (2016)
● Offene Entwicklung auf Github
● Google veröffenlicht massiv Videos aber auch ein ständig
aktualisiertes Tutorial und Themenartikel z.B. zu Testing,
Security oder Internationalisierung
● Google investiert zwar am meisten Entwickler Ressourcen
und hat auch die Projektleitung, pflegt aber einen sehr
integrativen Stil (z.B. dedizierte Communitymanager)
Dokumentation
Angular hat eine herausragende Dokumentation (genauso wie
übrigens TypeScript)
Ökosystem
● Durch die Community und die Offenheit des Projektes gibt
es eine Menge an hochqualitativen Dritt Modulen
○ in i18n kein xliff sondern json nutzen?
○ Statt Material Design Twitter Bootstrap nutzen?
○ Ich brauche eine komplexe Datatable (Filter, Sort,
Aggregate)?
○ Integration in Firebase, GraphQL etc.?
○ JWT, Basic oder Session Authentication?
➔ Kein Problem, es gibt bereits eine Komponente/Modul dafür
Und was wenn der Browser nicht genug ist?
● Angular Universal
● Electron
● NativeScript
● Ionic
● React Native
● Windows UWP
● ...
Fazit
Größere Projekte / Enterprise mit Angular?
● Gerade die Plattform Angular bietet ein exzellentes Umfeld
● Skalierbarkeit ist durch TypeScript und Tooling gegeben
● Gerade heterogene Teams profitieren von der Doku und den
Best Practice “Trampelpfaden”
● Angular ist ein etabliertes Projekt, maintained von einer
Firma, die selbst massiv auf die Technologie setzt
● Strategische Technologieentscheidung: Sehr vielseitig
einsetzbar und damit eine gute Aufwand-Nutzen Relation
Ist Angular für jedes Projekt die richtige Wahl?
Natürlich nicht!
● Hochspezialisierte Projekte
● Starker Bezug zu (Spezial) Hardware (z.B. Messgeräte)
● Grafikintensive Applikationen (Spiele,
Konstruktionssimulationen ...)
● ...
Für welche Projekte ist Angular gut geeignet?
● Formularbasierte Anwendungen
● Anwendungen in einem Microservice Kontext
● Anwendungen mit Multiplattform Anspruch
● Visualisierungen & Datenauswertung
● Dashboards, Cockpits etc. (aggregative Applikationen)
● ...
Welche Mehrwerte habe ich?
Gegenüber klassischer nativer oder klassischer Webentwicklung:
● Das Beste aus beiden Welten
● Einen extrem agilen Entwicklungsprozess (Scrum, TDD ...)
● Klar definierte Trennung zwischen FE & Server/DB -> REST
● Ein standardkonformes “mitwachsendes” Framework
● Sehr starke Annäherung zu “One Code to rule them all”
● Starker Fokus auf UX & Accessibility (B2C / Behörden)
● Starke Unterstützung für Code Quality & Testabdeckung
Demo / Fragen & Diskussion

Weitere ähnliche Inhalte

Was ist angesagt?

JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
OPEN KNOWLEDGE GmbH
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
Torben Brodt
 
Windows 8.1 UI für Entwickler
Windows 8.1 UI für EntwicklerWindows 8.1 UI für Entwickler
Windows 8.1 UI für Entwickler
Thomas Claudius Huber
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
greenrobot
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft AG
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016
Robert Siegel
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
🙌 Christoph Häckel
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
schmichri
 
Creasoft - Windows Azure
Creasoft - Windows AzureCreasoft - Windows Azure
Creasoft - Windows Azure
Creasoft AG
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
greenrobot
 
Windows 8 für Entwickler
Windows 8 für EntwicklerWindows 8 für Entwickler
Windows 8 für Entwickler
Jan Hentschel
 

Was ist angesagt? (11)

JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Windows 8.1 UI für Entwickler
Windows 8.1 UI für EntwicklerWindows 8.1 UI für Entwickler
Windows 8.1 UI für Entwickler
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
 
Creasoft - Windows Azure
Creasoft - Windows AzureCreasoft - Windows Azure
Creasoft - Windows Azure
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
 
Windows 8 für Entwickler
Windows 8 für EntwicklerWindows 8 für Entwickler
Windows 8 für Entwickler
 

Ähnlich wie Progressive Web Apps mit Angular

Progressive Web Apps Presentation
Progressive Web Apps PresentationProgressive Web Apps Presentation
Progressive Web Apps Presentation
Steffen Wagner
 
Rich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit AndroidRich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit Android
Dominik Helleberg
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
Torsten Fink
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
 
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die CloudApplikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
Aarno Aukia
 
Hybride Entwicklung mit Ionic
Hybride Entwicklung mit IonicHybride Entwicklung mit Ionic
Hybride Entwicklung mit Ionic
Lukas Leander Rosenstock
 
TDD für Testmuffel
TDD für TestmuffelTDD für Testmuffel
TDD für Testmuffel
Hendrik Lösch
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Niels de Bruijn
 
Applikationsentwicklung für Android
Applikationsentwicklung für AndroidApplikationsentwicklung für Android
Applikationsentwicklung für Android
Thorsten Weiskopf
 
Java in the Cloud - am Beispiel der Google App Engineg
Java in the Cloud - am Beispiel der Google App EnginegJava in the Cloud - am Beispiel der Google App Engineg
Java in the Cloud - am Beispiel der Google App Engineg
gedoplan
 
Implementierung der Knowledge Engineering Workbench in myCBR
Implementierung der Knowledge Engineering Workbench in myCBRImplementierung der Knowledge Engineering Workbench in myCBR
Implementierung der Knowledge Engineering Workbench in myCBR
Alexander Hundt
 
Webservice API - Webportale mit Force.com verbinden
Webservice API - Webportale mit Force.com verbindenWebservice API - Webportale mit Force.com verbinden
Webservice API - Webportale mit Force.com verbinden
Aptly GmbH
 
.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript
Manfred Steyer
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
Marc Müller
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantModerne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Christian Nagel
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
gedoplan
 
JSF vs. GWT? JSF und GWT!
JSF vs. GWT? JSF und GWT!JSF vs. GWT? JSF und GWT!
JSF vs. GWT? JSF und GWT!
Christian Kaltepoth
 

Ähnlich wie Progressive Web Apps mit Angular (20)

Progressive Web Apps Presentation
Progressive Web Apps PresentationProgressive Web Apps Presentation
Progressive Web Apps Presentation
 
GWT
GWTGWT
GWT
 
Rich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit AndroidRich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit Android
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die CloudApplikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
 
Hybride Entwicklung mit Ionic
Hybride Entwicklung mit IonicHybride Entwicklung mit Ionic
Hybride Entwicklung mit Ionic
 
TDD für Testmuffel
TDD für TestmuffelTDD für Testmuffel
TDD für Testmuffel
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)
 
Applikationsentwicklung für Android
Applikationsentwicklung für AndroidApplikationsentwicklung für Android
Applikationsentwicklung für Android
 
Java in the Cloud - am Beispiel der Google App Engineg
Java in the Cloud - am Beispiel der Google App EnginegJava in the Cloud - am Beispiel der Google App Engineg
Java in the Cloud - am Beispiel der Google App Engineg
 
Implementierung der Knowledge Engineering Workbench in myCBR
Implementierung der Knowledge Engineering Workbench in myCBRImplementierung der Knowledge Engineering Workbench in myCBR
Implementierung der Knowledge Engineering Workbench in myCBR
 
Webservice API - Webportale mit Force.com verbinden
Webservice API - Webportale mit Force.com verbindenWebservice API - Webportale mit Force.com verbinden
Webservice API - Webportale mit Force.com verbinden
 
.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantModerne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
JSF vs. GWT? JSF und GWT!
JSF vs. GWT? JSF und GWT!JSF vs. GWT? JSF und GWT!
JSF vs. GWT? JSF und GWT!
 

Progressive Web Apps mit Angular

  • 2. #1 Herausforderung im Engineering von Benutzeroberflächen: In welchem Kontext wird die Applikation ausgeführt werden?
  • 3. Web all the things? Das Web als Plattform verspricht, diese Probleme zu lösen. ● Eine einzige Plattformabstraktion ● One code to rule them all ● Lauffähig auf so gut wie jeder Hardware ● Keine Softwareverteilungs / Updateproblematik ● ... Aber - Funktioniert das auch in der Praxis?
  • 4. Wellenbewegung des Web-Enthusiasmus ● Web 2.0 ● Ajax-Ära ● Responsive Design ● Single-Page Applikationen mit JavaScript ● Progressive Web Apps ➔ Jede Wellenbewegung hat in ihrem teilweisen “Scheitern” das Web als Plattform enorm vorangebracht
  • 5. Zusätzliche Anforderungen aus aktueller Sicht - Internationalisierung / Lokalisierung - Echtzeitkommunikation - Offline-Fähigkeit - Time to Interaction - Notifications (Push) - ...
  • 6. Ein aktueller Lösungsansatz: PWA Progressive Web-Apps sind Webapplikationen (HTML/CSS/JS), die zahlreiche Charakteristika einer nativen App mit den Vorteilen einer Webapplikation kombinieren. ➔ “Das Beste aus beiden Welten”
  • 7. Charakteristika ● Single Codebase (Plattform & Deviceunabhängigkeit) ● Progressive Feature Enhancement ● Offline Funktionalität (Offline-First) ● Keine Installation ● Add-To-Homescreen (scheinbare Installation) ● Push-Notification ● URL ● Niedrige Time-to-Interaction
  • 8. Wie hängen Angular und PWA zusammen?
  • 9. Was ist Angular? “Angular is a Platform that makes it easy to build applications with the web (PWA)” Stephen Fluin - Developer Advocate Google
  • 10. Was macht Angular so hilfreich? Angular ist nicht nur ein Framework, sondern eine Plattform um das Framework! Das bedeutet: Angular Plattform = User-Experience + Developer Experience + Community (Features) + (Entwicklungsprozess) + (Ökosystem)
  • 11. Ist Angular das beste Framework? Angular ist sicher nicht für jeden Anwendungsfall das beste Framework. Es gibt da draußen jede Menge technisch exzellente Frameworks. Angular hat aus meiner Sicht das Gesamtkonzept (Plattform) mit dem größten allgemeinen Mehrwert!
  • 12. User Experience / Angular Kern Features Ein selektiver Überblick
  • 13. Single Page Pattern ● Keine Pagereloads für den Benutzer ● “App-Feeling” ● Nach dem initialen load, nur noch reiner Datenaustausch ● Funktioniert exzellent mit REST Datenquellen
  • 14. Databinding ● Die Darstellung der Daten reagiert umgehend auf Änderung der Daten ● Angulars Observable Pattern (RxJs) gibt viel Gestaltungsfreiraum für Datenflüsse und Transformationen ohne Performanceeinbußen
  • 15. Routing ● Das Routing geschieht im Client (Browser) ● Dadurch: ○ Bookmarkbare “Seiten” / Deeplinks ○ Lazy Loading ganzer Module ○ Daten-Preloading ○ “Guards”
  • 16. Webcomponents ● W3C Standard ● UI-Elemente können als selbstdefinierte “HTML”-Elemente wiederverwendet werden ○ gekapselte Styles (Keine Seiteneffekte) ○ Verhalten des Elements (JS) ○ Struktur/Markup ● Diverse CSS-Frameworks bieten auf diese Weise Integrationen an (Bootstrap, Material etc.)
  • 17. Weitere Features ● Internationalisierung und Lokalisierung ● Accessibility ● native Browser Animationen ● Formularunterstützung (Validierung, Multistep etc.) ● Http-Library ● Modulsystem (einfach konsumierbares Ökosystem)
  • 19. TypeScript ● Vorteile typisierter Sprachen, ohne die Flexibilität von JavaScript zu verlieren ● Implizite Lösung des Feature-Gap Problems (Implementation ist unabhängig vom Unterstützungslevel in den anvisierten Browsern) ● Einfachere Zusammenarbeit auch mit unerfahrenen Kollegen ● Einfacherer Umstieg aus einer streng typisierten Sprache
  • 20. IDE Unterstützung (Languageserver) ● Durch den Language Server von Angular kann die IDE Angular Code “verstehen” ● Falsche Bindings werden vor der Laufzeit erkannt ● Code Completion selbst in Templates
  • 21. CLI - Commandline Tool ● Das Commandline Tool ist das Herz der DX-Strategie ● Es bündelt Tools und Best-Practices für den gesamten Dev-Lifecycle
  • 22. Scaffold & Generate ● Setup - Generierung und Konfiguration einer Initialen App ○ Wir starten mit einer lauffähigen, präkonfigurierten App ○ Durch flags können Features direkt integriert werden z.B. git Initialisierung, Style Präprozessor (SASS) ● Generate - Entitäten (Module, Komponenten etc.) inklusive Tests generieren und integrieren
  • 23. Serve & Develop ● Serve ○ Devbuild & Server (inkl. Livereload etc.) ○ CodeStyle (Codelyzer/Linting) ● i18n ● Direkter Doku Zugriff/Suche via CLI ● ...
  • 24. Build & Distribute ● Build ○ Vorkonfigurierter Dev & Prod Buildtask & Profil ○ Eigene Build Konfigurationen ○ ENV-Variablen etc.
  • 25. Test ● Test ○ Setup für Unitests (Karma) ○ End-to-End Tests (Protractor) ● Testabdeckungs Bericht ● Unittests werden bei der Generierung mit generiert (TDD / BDD ready)
  • 26. Erweitertes Tooling ● Augury (Chrome Ext) - Deep App Inspection ● NG Universal Tools für PWA Optimierung: ○ Service Worker ○ App Shell ○ Push Notifications ● ...
  • 27. Und das Backend? - Fullstack Generierung ● jHipster ● NinjaCodeGen ● Celerio Angular Quickstart (Spring Boot + rel. DB) ● ...
  • 29. Kern Projekt - Ein Community Projekt? ● 12.000+ OpenSource Contributors im Projekt (2016) ● Offene Entwicklung auf Github ● Google veröffenlicht massiv Videos aber auch ein ständig aktualisiertes Tutorial und Themenartikel z.B. zu Testing, Security oder Internationalisierung ● Google investiert zwar am meisten Entwickler Ressourcen und hat auch die Projektleitung, pflegt aber einen sehr integrativen Stil (z.B. dedizierte Communitymanager)
  • 30. Dokumentation Angular hat eine herausragende Dokumentation (genauso wie übrigens TypeScript)
  • 31. Ökosystem ● Durch die Community und die Offenheit des Projektes gibt es eine Menge an hochqualitativen Dritt Modulen ○ in i18n kein xliff sondern json nutzen? ○ Statt Material Design Twitter Bootstrap nutzen? ○ Ich brauche eine komplexe Datatable (Filter, Sort, Aggregate)? ○ Integration in Firebase, GraphQL etc.? ○ JWT, Basic oder Session Authentication? ➔ Kein Problem, es gibt bereits eine Komponente/Modul dafür
  • 32. Und was wenn der Browser nicht genug ist? ● Angular Universal ● Electron ● NativeScript ● Ionic ● React Native ● Windows UWP ● ...
  • 33. Fazit
  • 34. Größere Projekte / Enterprise mit Angular? ● Gerade die Plattform Angular bietet ein exzellentes Umfeld ● Skalierbarkeit ist durch TypeScript und Tooling gegeben ● Gerade heterogene Teams profitieren von der Doku und den Best Practice “Trampelpfaden” ● Angular ist ein etabliertes Projekt, maintained von einer Firma, die selbst massiv auf die Technologie setzt ● Strategische Technologieentscheidung: Sehr vielseitig einsetzbar und damit eine gute Aufwand-Nutzen Relation
  • 35. Ist Angular für jedes Projekt die richtige Wahl? Natürlich nicht! ● Hochspezialisierte Projekte ● Starker Bezug zu (Spezial) Hardware (z.B. Messgeräte) ● Grafikintensive Applikationen (Spiele, Konstruktionssimulationen ...) ● ...
  • 36. Für welche Projekte ist Angular gut geeignet? ● Formularbasierte Anwendungen ● Anwendungen in einem Microservice Kontext ● Anwendungen mit Multiplattform Anspruch ● Visualisierungen & Datenauswertung ● Dashboards, Cockpits etc. (aggregative Applikationen) ● ...
  • 37. Welche Mehrwerte habe ich? Gegenüber klassischer nativer oder klassischer Webentwicklung: ● Das Beste aus beiden Welten ● Einen extrem agilen Entwicklungsprozess (Scrum, TDD ...) ● Klar definierte Trennung zwischen FE & Server/DB -> REST ● Ein standardkonformes “mitwachsendes” Framework ● Sehr starke Annäherung zu “One Code to rule them all” ● Starker Fokus auf UX & Accessibility (B2C / Behörden) ● Starke Unterstützung für Code Quality & Testabdeckung
  • 38. Demo / Fragen & Diskussion