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

Schneller ans Ziel: Web-Apps mit Ionic

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.

9984f149d5e5823a09ff6089abaeaf19?s=128

Max Schulte

July 02, 2021
Tweet

Transcript

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

    @MaxOSchulte Engineer / Consultant
  2. Web-Apps mit Ionic Auf Schienen schneller ans Ziel? Good to

    know… Max Schulte max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS
  3. Moderne Anforderungen an Business-Apps Auf Schienen schneller ans Ziel? Web-Apps

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

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

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

    Ionic https://ionicframework.com/docs
  8. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic https://jolly-coast-018f46b03.azurestaticapps.net

  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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Open Source Enterprise § Premium Plugins (e.g. Offline Storage) § Appflow § Support § Encryption
  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 AUFGEPASST! Definition

    Verwendung
  18. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Get File

    Input Hidden DOM Read File & Convert
  19. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic main.ts Verwendung

    picture.service.ts
  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 § Deployment / Testing § Testing § Access Rights & Permissions Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
  22. Web-Apps mit Ionic Auf Schienen schneller ans Ziel? https://www.thinktecture.com/de/cheatsheet/ionic/

  23. Capacitorjs v3 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic

    § Einfachere Plugin-Imports § Plugins als eigene NPM-Packages § Plugin Schnittstelle für Permissions § Ein neuer “npx cap run” befehl § Config in TS & Env. Variables § Besserer CLI Output
  24. 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?
  25. https://www.thinktecture.com/de/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank