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

PDF
Eintauchen in MVP mit GWT
PDF
MVP mit dem Google Web Toolkit
PDF
OSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
PDF
GWT: Eintauchen in MVP und Internationalisierung
PDF
Grails im Überblick und in der Praxis
PDF
Enterprise 2.0 Portale mit Grails. Geht das?
PDF
GWT – Google Web Toolkit in der Praxis
PDF
Kann ich mit Grails Enterprise Applikationen umsetzen?
Eintauchen in MVP mit GWT
MVP mit dem Google Web Toolkit
OSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
GWT: Eintauchen in MVP und Internationalisierung
Grails im Überblick und in der Praxis
Enterprise 2.0 Portale mit Grails. Geht das?
GWT – Google Web Toolkit in der Praxis
Kann ich mit Grails Enterprise Applikationen umsetzen?

Was ist angesagt? (11)

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

Ähnlich wie Progressive Web Apps mit Angular (20)

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

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