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

Web-Apps mit Ionic: Auf Schienen schneller ans Ziel?

Web-Apps mit Ionic: Auf Schienen schneller ans Ziel?

Webanwendungen können mitunter komplex werden. Täglich gibt es neue Anforderungen und am besten soll die App noch Cross-Plattform verfügbar sein. Und natürlich darf die Entwicklung nicht zu lange dauern. Ionic versucht als Opinionated-Framework dieses Problem zu adressieren.
In diesem Webinar zeigt Max Schulte, was mit Ionic als SPA-Framework möglich ist und wie es dank seiner Tools, "Production Ready"-Komponenten und APIs das Entwicklerleben für gewisse Anwendungsszenarien erleichtern kann.

9984f149d5e5823a09ff6089abaeaf19?s=128

Max Schulte

June 24, 2020
Tweet

Transcript

  1. Web-Apps mit Ionic Auf Schienen schneller ans Ziel? Max Schulte

    @MaxOSchulte Engineer / Consultant
  2. Moderne Anforderungen an Business-Apps Auf Schienen schneller ans Ziel? Web-Apps

    mit Ionic
  3. Ionic t Einordnung von Ionic Auf Schienen schneller ans Ziel?

    Web-Apps mit Ionic Java, C++, C#, VB Swing, Qt, XAML
  4. Ionic als Opinionated-Framework Auf Schienen 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
  5. Web-Apps mit Ionic Auf Schienen schneller ans Ziel? UI-Elemente (Auszug)

    https://ionicframework.com/
  6. Ionic als Opinionated-Framework Auf Schienen schneller ans Ziel? Web-Apps mit

    Ionic https://ionicframework.com/docs
  7. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic https://black-sea-05aba9c03.azurestaticapps.net/

  8. • 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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Open Source Enterprise • Premium Plugins (e.g. Offline Storage) • Appflow • Support • Encryption
  9. Open Source Community In den letzten 30 Tagen @ionic/core npm

    installs in 24 Monaten https://npm-stat.com/charts.html?package=%40ionic%2Fcore&from=2018-06-04&to=2020-05-30 https://github.com/ionic-team/ionic/pulse/monthly Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
  10. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS /

    JS Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Plattform
  11. • Web Components (Stencil) • Android- / iOS-like Look-And-Feel •

    Optimiert für mobile Plattformen UI-Elemente-Schicht UI (Ionic) HTML / CSS / JS WebView Capacitor Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
  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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
  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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
  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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
  15. CLI Tooling Auf Schienen 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 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
  16. $ npx ionic capacitor run ios –l --external “Serve &

    Run” die App auf verfügbaren Plattformen mit Live-Reload Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
  17. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic 2. Eine

    Navigationsdefinition mehrfach verwenden 1. Navigation definieren Problematisch
  18. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic 1.. Definiere

    Input- Element und Trigger (Template) 2. Beziehe Bild- Input 3. Convertiere Bild-Input zu Base64 String
  19. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic

  20. • 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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic • Custom-Design Look-And-Feel • High-Performance Apps – grafikintensiv • Perfekte Desktopanwendung • Komplexe Navigation
  21. 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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
  22. Ja, durch fertige Komponenten und einen schlüssigen Workflow, wenn man

    bereit ist auf Freiheiten zu verzichten - mit neuster, zukunftssicherer Technologie. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Kommt man wirklich schneller ans Ziel?
  23. https://www.thinktecture.com/de/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank