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

Schneller ans Ziel: Web-Apps mit Ionic

9984f149d5e5823a09ff6089abaeaf19?s=47 Max Schulte
February 16, 2021

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 versucht als opinionated Framework dieses Problem zu adressieren. In seinem Vortrag 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

February 16, 2021
Tweet

Transcript

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

    / Consultant Session
  2. Moderne Anforderungen an Business-Apps Schneller ans Ziel: Web-Apps mit Ionic

    Session
  3. Ionic t Einordnung von Ionic Schneller ans Ziel: Web-Apps mit

    Ionic Java, C++, C#, VB Swing, Qt, XAML Session
  4. 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
  5. Schneller ans Ziel: Web-Apps mit Ionic UI-Elemente (Auszug) https://ionicframework.com/ Session

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

    Session
  7. Schneller ans Ziel: Web-Apps mit Ionic https://jolly-coast-018f46b03.azurestaticapps.net Session

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

    Installationen in 24 Monaten https://npm-stat.com/charts.html?package=%40ionic%2Fcore&from=2018-06-04&to=2021-01-31 https://github.com/ionic-team/ionic/pulse/monthly Schneller ans Ziel: Web-Apps mit Ionic Session
  10. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS /

    JS Schneller ans Ziel: Web-Apps mit Ionic Plattform Session
  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 Schneller ans Ziel: Web-Apps mit Ionic Session
  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
  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
  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
  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 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
  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
  17. Schneller ans Ziel: Web-Apps mit Ionic 2. Eine Navigationsdefinition mehrfach

    verwenden 1. Navigation definieren Aufgepasst Session
  18. 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 Session
  19. Schneller ans Ziel: Web-Apps mit Ionic Session

  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 Schneller ans Ziel: Web-Apps mit Ionic • Custom-Design Look-And-Feel • High-Performance Apps – grafikintensiv • Perfekte Desktopanwendung • Komplexe Navigation 😀 🤔 Session
  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 Schneller ans Ziel: Web-Apps mit Ionic Session
  22. Schneller ans Ziel: Web-Apps mit Ionic Session https://www.thinktecture.com/de/cheatsheet/ionic

  23. Ja, durch fertige Komponenten und einen schlüssigen Workflow, wenn man

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