Schneller ans Ziel: Web-Apps mit Ionic

Webanwendungen können mitunter komplex werden. Täglich gibt es neue Anforderungen und am besten soll die App auch noch Cross-Platform verfügbar sein. Und natürlich darf die Entwicklung nicht zu lange dauern. Ionic Framework versucht als opinionated Framework dieses Problem zu adressieren.

In seinem Vortrag zeigt Max Schulte, was mit dem Ionic Framework und Angular möglich ist und wie es dank seiner Tools, Production-Ready-Komponenten und APIs das Entwicklerleben für gewisse Anwendungsszenarien erleichtern kann.

Transcript

1. Schneller ans Ziel: Web-Apps mit Ionic
   Max Schulte
   @MaxOSchulte
   Engineer / Consultant
   

   View Slide

2. Schneller ans Ziel: Web-Apps mit Ionic
   https://green-water-09fdd2b03.1.azurestaticapps.net/
   Session
   

   View Slide

3. Moderne Anforderungen an Business-Apps
   Schneller ans Ziel: Web-Apps mit Ionic
   Session
   

   View Slide

4. 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
   

   View Slide

5. Einordnung von Ionic
   Schneller ans Ziel: Web-Apps mit Ionic
   Ionic
   t
   Java, C++, C#,
   VB
   Swing, Qt,
   XAML
   Session
   

   View Slide

6. Ionic als Opinionated-Framework
   Schneller ans Ziel: Web-Apps mit Ionic
   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
   Session
   

   View Slide

7. Schneller ans Ziel: Web-Apps mit Ionic
   UI-Elemente (Auszug)
   https://ionicframework.com/
   Session
   

   View Slide

8. Ionic als Opinionated-Framework
   Schneller ans Ziel: Web-Apps mit Ionic
   https://ionicframework.com/docs
   Session
   

   View Slide

9. • 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
   Schneller ans Ziel: Web-Apps mit Ionic
   Open Source Enterprise
   • Premium Plugins (e.g. Offline Storage)
   • Appflow
   • Support
   • Encryption
   Session
   

   View Slide

10. Ionic Architekturschichten
    WebView
    Capacitor
    UI (Ionic)
    HTML / CSS / JS
    Schneller ans Ziel: Web-Apps mit Ionic
    Plattform
    Session
    

    View Slide

11. • 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
    Schneller ans Ziel: Web-Apps mit Ionic
    Session
    

    View Slide

12. • 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
    Schneller ans Ziel: Web-Apps mit Ionic
    Session
    

    View Slide

13. • 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
    Schneller ans Ziel: Web-Apps mit Ionic
    Session
    

    View Slide

14. 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
    Schneller ans Ziel: Web-Apps mit Ionic
    Session
    

    View Slide

15. CLI Tooling
    Schneller ans Ziel: Web-Apps mit Ionic
    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
    Session
    

    View Slide

16. $ npx ionic capacitor run ios –l --external
    “Serve & Run” die
    App auf verfügbaren
    Plattformen mit Live-Reload
    Schneller ans Ziel: Web-Apps mit Ionic
    Session
    

    View Slide

17. iOS – Xcode & Safari Remote Debugger
    Android – IDE & Chrome Remote Debugger (chrome://inspect/#devices) & VS Code (Plugin)
    Web – In Browser & IDE
    Schneller ans Ziel: Web-Apps mit Ionic
    Debugging
    Session
    

    View Slide

18. • 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/
    Schneller ans Ziel: Web-Apps mit Ionic
    Web Components
    Session
    

    View Slide

19. • 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
    Schneller ans Ziel: Web-Apps mit Ionic
    Web Components - Ionic
    Session
    

    View Slide

20. Schneller ans Ziel: Web-Apps mit Ionic
    Web Components - Ionic
    https://ionicframework.com/docs/api/badge
    Session
    

    View Slide

21. optional
    Schneller ans Ziel: Web-Apps mit Ionic
    AUFGEPASST!
    Definition
    Verwendung
    Session
    

    View Slide

22. Schneller ans Ziel: Web-Apps mit Ionic
    Router Animation
    Session
    

    View Slide

23. • Einheitliche API für diverse Plattformen
    • Keine Abhängigkeiten zu Ionic (außer UI Elemente)
    • Teilweise mit UI (Web Components)
    Schneller ans Ziel: Web-Apps mit Ionic
    Capacitor Plugins
    Session
    

    View Slide

24. Schneller ans Ziel: Web-Apps mit Ionic
    Get File Input
    Hidden DOM
    Read File & Convert
    Session
    

    View Slide

25. Main.
    Schneller ans Ziel: Web-Apps mit Ionic
    Capacitor Plugins mit UI benutzten
    main.ts
    Verwendung
    Session
    

    View Slide

26. • 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
    Schneller ans Ziel: Web-Apps mit Ionic
    • Custom-Design Look-And-Feel
    • High-Performance Apps – grafikintensiv
    • Perfekte Desktopanwendung
    • Komplexe Navigation
    ! !
    Session
    

    View Slide

27. 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
    Schneller ans Ziel: Web-Apps mit Ionic
    Session
    

    View Slide

28. Als eine Alternative und Ergänzung zu anderen
    Frameworks mit dem Vorteil der Framework
    Agnostik und Web-Components.
    Schneller ans Ziel: Web-Apps mit Ionic
    Wie hilft Ionic und Capacitor?
    Session
    

    View Slide

29. https://www.thinktecture.com/max-schulte
    Max Schulte
    @MaxOSchulte
    Engineer / Consultant
    Vielen Dank
    

    View Slide