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

Angular & Ionic - Cross-Plattform aus einer Hand

Max Schulte
September 29, 2021

Angular & Ionic - Cross-Plattform aus einer Hand

Eine Anwendung mit einer Codebasis für alle Plattformen entwickeln – schnell und einfach? In dieser Session zeigt Max Schulte wie Ionic und Angular zusammen genutzt werden, um eine Cross-Plattform-App bereitzustellen: für das Web, den Desktop und für mobile Geräte, unabhängig vom Betriebssystem. Ionic bietet dem Entwickler verschiedene Tools und Frameworks, die nahtlos ineinandergreifen. Angefangen bei der CLI bis hin zu Web Components für die Umsetzung der UI einer Anwendung kommt alles aus einer Hand. Sie lernen, wie diese Tools und Komponenten verwendet werden, um die Entwicklung Ihrer Web-basierten App zu vereinfachen und beschleunigen.

Max Schulte

September 29, 2021
Tweet

More Decks by Max Schulte

Other Decks in Technology

Transcript

  1. The image part with relationship ID rId12 was not found

    in the file. The image part with relationship ID rId12 was not found in the file. Special Day Cross-Plattform Applications Thema Sprecher Datum, Uhrzeit Figma, Storybook und Angular: Toolchain für plattformunabhängige UI-Entwicklung Andreas Wissel DO, 23. September 2021, 09.15 bis 10.15 Realtime Cross-Plattform-Applikationen mit Angular, ASP.NET Core und SignalR Fabian Gosebrink DO, 23. September 2021, 10.45 bis 11.45 Angular & Ionic – Cross-Plattform aus einer Hand Max Schulte DO, 23. September 2021, 12.15 bis 13.15 Electron.NET – Neue Features, Tipps und Tricks Gregor Biswanger DO, 23. September 2021, 15.30 bis 16.30 Electron, Capacitor, PWA – was, wann, wie & warum? Christian Liebel DO, 23. September 2021, 17.00 bis 18.00
  2. Good to know… Max Schulte [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant

    at Thinktecture AG. • Specialised in Angular, Ionic / Capacitor and BabylonJS Angular & Ionic Cross-Plattform aus einer Hand
  3. Ionic als Opinionated-Framework Cross-Plattform aus einer Hand Angular & 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
  4. § 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 Cross-Plattform aus einer Hand Angular & Ionic Open Source Enterprise § Premium Plugins (e.g. Offline Storage) § Appflow § Support § Encryption
  5. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS /

    JS Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & Ionic
  10. CLI Tooling Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & Ionic
  12. § 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 Cross-Plattform aus einer Hand Angular & Ionic § Custom-Design Look-And-Feel § High-Performance Apps – grafikintensiv § Perfekte Desktopanwendung § Komplexe Navigation 😀 🤔
  13. 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 Cross-Plattform aus einer Hand Angular & Ionic
  14. Capacitorjs v3 Cross-Plattform aus einer Hand Angular & 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
  15. Ja, durch fertige Komponenten und einen schlüssigen Workflow, wenn man

    bereit ist auf Freiheiten zu verzichten - mit neuster, zukunftssicherer Technologie. Cross-Plattform aus einer Hand Angular & Ionic Kommt man wirklich schneller ans Ziel?