Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web-Apps schneller entwickeln mit Ionic & Angular

9984f149d5e5823a09ff6089abaeaf19?s=47 Max Schulte
September 04, 2020

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.

9984f149d5e5823a09ff6089abaeaf19?s=128

Max Schulte

September 04, 2020
Tweet

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