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

Web-Apps mit Ionic: Auf Schienen schneller ans ...

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.

Avatar for Max Schulte

Max Schulte

June 24, 2020
Tweet

More Decks by Max Schulte

Other Decks in Programming

Transcript

  1. Ionic t Einordnung von Ionic Auf Schienen schneller ans Ziel?

    Web-Apps mit Ionic Java, C++, C#, VB Swing, Qt, XAML
  2. 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
  3. • 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
  4. 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
  5. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS /

    JS Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Plattform
  6. • 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
  7. • 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
  8. • 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
  9. 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
  10. 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
  11. $ 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
  12. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic 2. Eine

    Navigationsdefinition mehrfach verwenden 1. Navigation definieren Problematisch
  13. 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
  14. • 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
  15. 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
  16. 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?