Web-Apps schneller entwickeln mit Ionic (Hands on workshop)

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. Als Teilnehmer werden sie selbst Kernkomponenten umsetzten und Anpassungen vornehmen.

Transcript

1. Web-Apps schneller entwickeln mit Ionic & Angular Hands on! Max Schulte @MaxOSchulte Engineer / Consultant
2. 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
3. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
4. Moderne Anforderungen an Business-Apps Workshop Web-Apps schneller entwickeln mit Ionic & Angular
5. Ionic t Einordnung von Ionic Workshop Web-Apps schneller entwickeln mit Ionic & Angular Java, C++, C#, VB Swing, Qt, XAML
6. 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
7. Web-Apps schneller entwickeln mit Ionic & Angular Workshop UI-Elemente (Auszug) https://ionicframework.com/
8. Ionic als Opinionated-Framework Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://ionicframework.com/docs
9. Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://jolly-coast-018f46b03.azurestaticapps.net
10. • 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
11. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS / JS Workshop Web-Apps schneller entwickeln mit Ionic & Angular Plattform
12. • 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
13. • 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
14. • 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
15. 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
16. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
17. 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
18. $ 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
19. 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
20. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
21. • 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
22. • 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
23. optional Workshop Web-Apps schneller entwickeln mit Ionic & Angular AUFGEPASST! Definition Verwendung LAB #1 workshop/lab1 tabbed.page.html
24. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components - Ionic https://ionicframework.com/docs/api/badge
25. 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
26. • 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
27. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Component Theming & Anpassung LAB #2 workshop/lab2
28. • 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
29. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Router Animation LAB #3 workshop/lab3 custom.animation.ts
30. • 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
31. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
32. • 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
33. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Get File Input Hidden DOM Read File & Convert
34. Main. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Capacitor Plugins mit UI benutzten main.ts Verwendung LAB #4 workshop/lab4 picture.service.ts
35. $ 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
36. COD Workshop Web-Apps schneller entwickeln mit Ionic & Angular Ionic Native Plugins nutzen Verwendung LAB #5 workshop/lab5 auth.service.ts
37. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
38. 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
39. 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
40. • 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
41. • 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
42. • 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
43. navigator.storage.persist(); navigator.storage.persisted(); • Persistiert sonst temporären Storage (nicht iOS, iPadOS und 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
44. 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
45. Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://storage.spec.whatwg.org/#example-3a7051a8 Persistent Storage Permission prompt
46. Some Storage CODE Workshop Web-Apps schneller entwickeln mit Ionic & Angular IndexedDB mit Dexie.js LAB #6 workshop/lab6 picture-index-db.store.ts
47. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
48. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
49. PWA - Service Worker Service Worker Internet Website HTML/JS Cache fetch Web-Apps schneller entwickeln mit Ionic & Angular Workshop
50. 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
51. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA Fazit
52. • 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 😀 🤔
53. 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
54. 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?
55. https://www.thinktecture.com/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank