Web-Apps schneller entwickeln mit Ionic & Angular

Webanwendungen werden schnell komplex. Neben den rapide wechselnden Anforderungen soll die App installierbar, performant und einfach zu warten sein – und die Entwicklungszeit ist kosteneffektiv knapp bestimmt. Genau diese und andere Herausforderungen versucht Ionic als opinionated Framework zu adressieren.

In diesem Workshop zeigt Max Schulte, was mit Ionic und Angluar möglich ist und wie Ionic, dank seiner Tools, "Production Ready"-Komponenten und APIs das Entwicklerleben für gewisse Anwendungsszenarien erleichtern kann.

Transcript

1. Web-Apps schneller entwickeln mit Ionic & Angular Max Schulte @MaxOSchulte Engineer / Consultant
2. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Timeline 9:00 – 10:30 Teil I 10:30 – 11:00 Pause 11:00 – 12:30 Teil II
3. Web-Apps schneller entwickeln mit Ionic & Angular Good to know… Max Schulte max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic und BabylonJS Workshop
4. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
5. Moderne Anforderungen an Business-Apps Workshop Web-Apps schneller entwickeln mit Ionic & Angular
6. Ionic t Einordnung von Ionic Workshop Web-Apps schneller entwickeln mit Ionic & Angular Java, C++, C#, VB Swing, Qt, XAML
7. Ionic als Opinionated-Framework Workshop Web-Apps schneller entwickeln mit Ionic & Angular Möglichkeiten Gefahren Leitplanken als ein “Feature” Nicht jede UI-Idee darstellbar Ready-To-Use Features Frameworkbeschränkung Vorgefertigte UI-Components Bestehender Code kann mit Framework-Funktionsweise kollidieren Zukunftssicher durch Web Components Tradeoff: Komplexität vs. Flexibilität
8. Web-Apps schneller entwickeln mit Ionic & Angular Workshop UI-Elemente (Auszug) https://ionicframework.com/
9. Ionic als Opinionated-Framework Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://ionicframework.com/docs
10. Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://jolly-coast-018f46b03.azurestaticapps.net
11. • Open Source Cross-Plattform Framework • Production-Ready • Tooling für Entwicklung und Produktion • Capacitor (und Cordova und Electron) als Plattform-Bridge • Enterprise & Community Plugins für Capacitor and Cordova Ionic Framework Workshop Web-Apps schneller entwickeln mit Ionic & Angular Open Source Enterprise • Premium Plugins (e.g. Offline Storage) • Appflow • Support • Encryption
12. Open Source Community In den letzten 30 Tagen @ionic/core npm Installierungen in 26 Monaten https://npm-stat.com/charts.html?package=%40ionic%2Fcore&from=2018-06-04&to=2020-08-31 https://github.com/ionic-team/ionic/pulse/monthly Workshop Web-Apps schneller entwickeln mit Ionic & Angular
13. Open Source Community In den letzten 30 Tagen @capacitor/core npm installs in 26 Monaten https://npm-stat.com/charts.html?package=%40ionic%2Fcore&from=2018-06-04&to=2020-05-30 https://github.com/ionic-team/capacitor/pulse/monthly Workshop Web-Apps schneller entwickeln mit Ionic & Angular
14. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS / JS Workshop Web-Apps schneller entwickeln mit Ionic & Angular Plattform
15. • Web Components (Stencil) • Android- / iOS-like Look-And-Feel • Optimiert für mobile Plattformen • Theme-Support mit CSS variablen UI-Elemente-Schicht UI (Ionic) HTML / CSS / JS WebView Capacitor Workshop Web-Apps schneller entwickeln mit Ionic & Angular
16. • iOS: WKWebView • Android: Chromium-based WebView for Android • Darstellung der Webinhalte in Apps • In App optimierter HTTPS-Server für App-Files • PWAs werden nicht in einer WebView dargestellt WebView-Schicht WebView Capacitor UI (Ionic) HTML / CSS / JS Workshop Web-Apps schneller entwickeln mit Ionic & Angular
17. • Bridge zu Plattform-Features • Toast & Camera für PWAs • Camera, Fingerprint, Storage • Eine API für alle Plattformen • Unterstützt Cordova Plugins • CLI Tooling lokal oder per npx • Auch standalone nutzbar Capacitor-Schicht Capacitor WebVIew UI (Ionic) HTML / CSS / JS Workshop Web-Apps schneller entwickeln mit Ionic & Angular
18. Cordova • Low-Level-APIs • Mobile-Plattform-Bridge • Plugin-fokussiert Capacitor vs Cordova Capacitor • Higher-Level-APIs • Plattform-Bridge • Direkte Nutzung der APIs mit fertigen Plugins • Löst Codova ab • Unterstützt Cordova-Plugins Workshop Web-Apps schneller entwickeln mit Ionic & Angular
19. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
20. CLI Tooling Workshop Web-Apps schneller entwickeln mit Ionic & Angular Befehl Beschreibung npx ionic start Ein neuen Projekt anlegen - interaktiv npx ionic generate Eine Component / Page etc. generieren npx ionic capacitor add platform Eine Plattform hinzufügen (ios, android, electron) npx ionic capacitor run platform -l -- external Dev Server und Anwendung starten mit Live- Reload npm install some-plugin Installiere ein Plugin e.g. von Cordova npx cap update Update Capacitor – berücksichtigt neue Plugins npx cap copy Kopiere die die Sourcen in die Plattform npx cap sync Cap Update + Cap Sync
21. $ npx ionic capacitor run ios –l --external “Serve & Run” die App auf verfügbaren Plattformen mit Live-Reload Workshop Web-Apps schneller entwickeln mit Ionic & Angular
22. iOS – Xcode & Safari Remote Debugger Android – IDE & Chrome Remote Debugger (chrome://inspect/#devices) & VS Code (Plugin) Web – In Browser & IDE Web-Apps schneller entwickeln mit Ionic & Angular Workshop Debugging
23. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
24. • Shadow DOM • Custom Elements API window.customElements.define('my-element', MyElementClass) • HTML Templates • Slots: Ein slot-Tag gibt einem die Möglichkeit, Elemente aus dem Template zu ersetzten (ähnlich wie ng-content • CSS Parts: CSS Styling, welches von außen gesetzt werden kann, um dem Nutzer eine gewisse Möglichkeit zu geben die Component anzupassen https://www.thinktecture.com/de/articles/web-components/ https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/ Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components
25. • Ionic Components fast wie normale Angular-Components • Proxies - Anuglar Wrapper um Web-Components • Dokumentation genau lesen https://github.com/ionic-team/ionic-framework/blob/master/angular/src/directives/proxies.ts Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components - Ionic
26. Workshop Web-Apps schneller entwickeln mit Ionic & Angular AUFGEPASST! Definition Verwendung
27. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components - Ionic https://ionicframework.com/docs/api/badge
28. Shadow Dom • Internes CSS nicht überschreibbar • Liest CSS-Variablen aus • Nimmt keinen einfluss auf externen Style Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components - Ionic Component Scoped • CSS überschreibbar mit specifiziertem Selektor • Liest CSS-Variablen aus • Kann externen Style beeinflussen und davon beinflusst werden
29. • CSS Custom Properties & CSS Variables • :root als EntryPoint • Component Attributes • CSS Parts • Global CSS Variablen Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components - Theming
30. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Component Theming & Anpassung
31. • Seiten bleiben im DOM, ”versteckt” • OnInit & OnDestroy anders als “erwartet” • State und Data bleiben über Navigation hinweg • Scroll-Position bleibt erhalten • Router Animations • Seiten können mit UI, programmatisch und via “zurück“ Navigation vom DOM entfernt werden Web-Apps schneller entwickeln mit Ionic & Angular Workshop Ionic Routing
32. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Router Animation
33. • Ionic fügt einer Seite neue Events & Callbacks hinzu • Ausgleich für abgeändertes verhalten von OnInit & OnDestroy • ionViewWillEnter • ionViewDidEnter • ionViewWillLeave • ionViewDidLeave Web-Apps schneller entwickeln mit Ionic & Angular Workshop Ionic Page Events
34. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
35. • Einheitliche API für diverse Plattformen • Keine Abhängigkeiten zu Ionic (außer UI Elemente) • Teilweise mit UI (Web Components) Web-Apps schneller entwickeln mit Ionic & Angular Workshop Capacitor Plugins
36. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Get File Input Hidden DOM Read File & Convert
37. Main. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Capacitor Plugins mit UI benutzten main.ts Verwendung
38. $ npm install cordova-plugin-fingerprint-aio $ npm install @ionic-native/fingerprint-aio $ ionic cap sync Web-Apps schneller entwickeln mit Ionic & Angular Workshop Ionic Native Plugins installieren
39. COD Workshop Web-Apps schneller entwickeln mit Ionic & Angular Ionic Native Plugins nutzen
40. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
41. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Offline Storage Varianten für Web-Apps Local Storage (& Session Storage) IndexedDB Coockie Web SQL (Application Cache) (File System) ( Native File System API – Project Fugu) Hybrid-App: SQLite
42. const { quota, usage } = await navigator.storage.estimate(); • Angaben sind nur Schätzwerte • Schätzung erschwert Fingerprinting • Kompression, De-Duplication und andere Einflüsse auf die ”physische Größe” • Konservative Schätzung verhindert Datenverlust • Prüft Cache, Cookies, File System (Browser provided & sandboxed), IndexedDB • Error: QuotaExceededError • Nicht im Safari Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Quota
43. • Chrome: 60% des freien Festplatten-Speicherplatz • Chromium-based können abweichen • Internet Explorer > 10: 250MB + User-Prompt nach 10 MB • Firefox: 50% des freien Speicherplatz, weitere Einschränkung Gruppenlimit 2GB • (Not Official: Safari Desktop & Mobile: 1GB + User-Prompt für mehr Kapazität) Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Quota
44. • Schafft Speicherplatz • Löscht alle gespeicherten Ressourcen zu einer Quelle (Full Qualified Domain Name) • Firefox und Chromium-Based löschen nach dem LRU – Last Recently Used - Prinzip • https://developer.mozilla.org/de/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_ eviction_criteria • https://developer.chrome.com/apps/offline_storage Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Eviction
45. • Chromium-Based Browser & Firefox löschen bis die Nutzung unter dem Limit ist • Safari löscht nach 7 Tagen Inaktivität auf der Ursprungsseite (nicht iOS Home Screen Apps) • https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/ Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Eviction
46. navigator.storage.persist(); navigator.storage.persisted(); • Persistiert sonst temporären Storage (nicht iOS, nicht iPadOS, Safari) • https://developer.mozilla.org/en-US/docs/Web/API/Storage_API • https://developer.chrome.com/apps/offline_storage#persistent Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Persist
47. navigator.permissions.query({name: "persistent-storage"}) • Nur im Secure-Context (HTTPS) • Benötigt Nutzererlaubnis und Interaktion • Kann nicht deaktiviert werden Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Persist Permission
48. Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://storage.spec.whatwg.org/#example-3a7051a8 Persistent Storage Permission prompt
49. Some Storage CODE Workshop Web-Apps schneller entwickeln mit Ionic & Angular
50. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
51. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
52. PWA - Service Worker Service Worker Internet Website HTML/JS Cache fetch Web-Apps schneller entwickeln mit Ionic & Angular Workshop
53. manifest.webmanifest { "short_name": "PWA Demo", "name": "My PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } PWA - Web App Manifest Title Icons Start URL Display Type Age Rating Additional Config Description Related Apps Web-Apps schneller entwickeln mit Ionic & Angular Workshop
54. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA Fazit
55. • Datengetriebene Anwendungen • Schnelle Entwicklung mit fertigen Komponenten • Corporate-Identity mittels Theming • Native-like Look-and-Feel (Android & iOS) • Eine Basis für alle Plattformen • Integration / Erweiterung bestehendender Anwendungen mit Capacitor & Ionic Framework • Angular-CLI Schematics Einsatzszenarien für Ionic Workshop Web-Apps schneller entwickeln mit Ionic & Angular • Custom-Design Look-And-Feel • High-Performance Apps – grafikintensiv • Perfekte Desktopanwendung • Komplexe Navigation
56. Ungelöste Herausforderungen • SDK Management • Gerätevielfalt • Kotlin / Java Cross-Plattform • macOS notwendig • Swift / Objective-C • Besondere Features (3D Touch, Radar) • Play Store & App Store Access • Vendor Policies • Testing • Deployment / Testing • Access Rights & Permissions Workshop Web-Apps schneller entwickeln mit Ionic & Angular
57. Als eine Alternative und Ergänzung zu anderen Frameworks mit dem Vorteil der Framework Agnostik und Web-Components. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Wie hilft Ionic und Capacitor?
58. https://www.thinktecture.com/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank
59. Capacitor 3.0 (Announced) • Plugins ES2017 / ES8 (Vorher ES5) • Plugin Imports • Entfernt Permissions und Photos Plugin • Dynamic-Capacitor-Configs • CLI Release-Builds https://github.com/ionic-team/capacitor/issues/3133 Workshop Web-Apps schneller entwickeln mit Ionic & Angular