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.

Transcript

1. Angular & Ionic Cross-Plattform aus einer Hand Max Schulte @MaxOSchulte Engineer / Consultant
2. 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
3. Good to know… Max Schulte max.schulte@thinktecture.com 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
4. Moderne Anforderungen an Business-Apps Cross-Plattform aus einer Hand Angular & Ionic
5. Ionic t Einordnung von Ionic Cross-Plattform aus einer Hand Angular & Ionic Java, C++, C#, VB Swing, Qt, XAML
6. 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
7. Angular & Ionic Cross-Plattform aus einer Hand UI-Elemente (Auszug) https://ionicframework.com/
8. Ionic als Opinionated-Framework Cross-Plattform aus einer Hand Angular & Ionic https://ionicframework.com/docs
9. Cross-Plattform aus einer Hand Angular & Ionic https://jolly-coast-018f46b03.azurestaticapps.net
10. § 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
11. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS / JS Cross-Plattform aus einer Hand Angular & Ionic Plattform
12. § 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
13. § 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
14. § 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
15. 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
16. 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
17. $ 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
18. Cross-Plattform aus einer Hand Angular & Ionic AUFGEPASST! Definition Verwendung
19. Cross-Plattform aus einer Hand Angular & Ionic Get File Input Hidden DOM Read File & Convert
20. Cross-Plattform aus einer Hand Angular & Ionic main.ts Verwendung picture.service.ts
21. § 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 😀 🤔
22. 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
23. Angular & Ionic Cross-Plattform aus einer Hand https://www.thinktecture.com/de/cheatsheet/ionic/
24. 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
25. 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?
26. https://www.thinktecture.com/de/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank