pwas mit angular - rg-ostwestfalen.gi.de...wellenbewegung des web-enthusiasmus web 2.0 ajax-Ära...
TRANSCRIPT
![Page 1: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/1.jpg)
PWAs mit Angular Jens Binfet
![Page 2: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/2.jpg)
#1 Herausforderung im Engineering von Benutzeroberflächen:
In welchem Kontext wird die Applikation
ausgeführt werden?
![Page 3: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/3.jpg)
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?
![Page 4: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/4.jpg)
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
![Page 5: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/5.jpg)
Zusätzliche Anforderungen aus aktueller Sicht- Internationalisierung / Lokalisierung
- Echtzeitkommunikation
- Offline-Fähigkeit
- Time to Interaction
- Notifications (Push)
- ...
![Page 6: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/6.jpg)
Ein aktueller Lösungsansatz: PWAProgressive Web-Apps sind Webapplikationen (HTML/CSS/JS),
die zahlreiche Charakteristika einer nativen App mit den
Vorteilen einer Webapplikation kombinieren.
➔ “Das Beste aus beiden Welten”
![Page 7: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/7.jpg)
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
![Page 8: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/8.jpg)
Wie hängen Angular und PWA zusammen?
![Page 9: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/9.jpg)
Was ist Angular?
“Angular is a Platform that makes it easy to build
applications with the web (PWA)”
Stephen Fluin - Developer Advocate Google
![Page 10: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/10.jpg)
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)
![Page 11: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/11.jpg)
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!
![Page 12: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/12.jpg)
User Experience / Angular Kern Features
Ein selektiver Überblick
![Page 13: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/13.jpg)
Single Page Pattern● Keine Pagereloads für den Benutzer
● “App-Feeling”
● Nach dem initialen load, nur noch reiner Datenaustausch
● Funktioniert exzellent mit REST Datenquellen
![Page 14: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/14.jpg)
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
![Page 15: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/15.jpg)
Routing● Das Routing geschieht im Client (Browser)
● Dadurch:
○ Bookmarkbare “Seiten” / Deeplinks
○ Lazy Loading ganzer Module
○ Daten-Preloading
○ “Guards”
![Page 16: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/16.jpg)
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.)
![Page 17: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/17.jpg)
Weitere Features● Internationalisierung und Lokalisierung
● Accessibility
● native Browser Animationen
● Formularunterstützung (Validierung, Multistep etc.)
● Http-Library
● Modulsystem (einfach konsumierbares Ökosystem)
![Page 18: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/18.jpg)
Developer Experience
![Page 19: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/19.jpg)
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
![Page 20: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/20.jpg)
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
![Page 21: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/21.jpg)
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
![Page 22: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/22.jpg)
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
![Page 23: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/23.jpg)
Serve & Develop● Serve
○ Devbuild & Server (inkl. Livereload etc.)
○ CodeStyle (Codelyzer/Linting)
● i18n
● Direkter Doku Zugriff/Suche via CLI
● ...
![Page 24: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/24.jpg)
Build & Distribute● Build
○ Vorkonfigurierter Dev & Prod Buildtask & Profil
○ Eigene Build Konfigurationen
○ ENV-Variablen etc.
![Page 25: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/25.jpg)
Test● Test
○ Setup für Unitests (Karma)
○ End-to-End Tests (Protractor)
● Testabdeckungs Bericht
● Unittests werden bei der Generierung mit generiert (TDD /
BDD ready)
![Page 26: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/26.jpg)
Erweitertes Tooling ● Augury (Chrome Ext) - Deep App Inspection
● NG Universal Tools für PWA Optimierung:
○ Service Worker
○ App Shell
○ Push Notifications
● ...
![Page 27: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/27.jpg)
Und das Backend? - Fullstack Generierung● jHipster
● NinjaCodeGen
● Celerio Angular Quickstart (Spring Boot + rel. DB)
● ...
![Page 28: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/28.jpg)
Community
![Page 29: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/29.jpg)
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)
![Page 30: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/30.jpg)
DokumentationAngular hat eine herausragende Dokumentation (genauso wie
übrigens TypeScript)
![Page 31: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/31.jpg)
Ö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
![Page 32: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/32.jpg)
Und was wenn der Browser nicht genug ist?● Angular Universal
● Electron
● NativeScript
● Ionic
● React Native
● Windows UWP
● ...
![Page 33: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/33.jpg)
Fazit
![Page 34: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/34.jpg)
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
![Page 35: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/35.jpg)
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 ...)
● ...
![Page 36: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/36.jpg)
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)
● ...
![Page 37: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/37.jpg)
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
![Page 38: PWAs mit Angular - rg-ostwestfalen.gi.de...Wellenbewegung des Web-Enthusiasmus Web 2.0 Ajax-Ära Responsive Design Single-Page Applikationen mit JavaScript Progressive Web Apps Jede](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec5681a0e30496ba6458772/html5/thumbnails/38.jpg)
Demo / Fragen & Diskussion