IJS JavaScript Fullstack Day - Cross-Platform - Munich 2021

Transcript

1. JavaScript Fullstack Day Cross-Platform Max Schulte @MaxOSchulte Consultant
2. Web-Apps schneller entwickeln mit Ionic & Angular Good to know… Max Schulte max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und Engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic / Capacitor und Babylon.js Workshop
3. Cross-Platform JavaScript Fullstack Day
4. Ionic Capacitor & Hybrid-Apps Cross-Platform Ionic t Java, C++, C#, VB Swing, Qt, XAML JavaScript Fullstack Day
5. Unsolved • SDK Management • Many different devices • Kotlin / Java Cross-Plattform • macOS • Swift / Objective-C • Speacial features (3D Touch, Radar) • Play Store & App Store access • Vendor policies • Testing • Deployment / Testing • Access Rights & Permissions Cross-Platform JavaScript Fullstack Day
6. • 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-Platform Open Source Enterprise • Premium Plugins (e.g. Offline Storage) • Appflow • Support • Encryption JavaScript Fullstack Day
7. Layers WebView Capacitor UI (Ionic) HTML / CSS / JS Cross-Platform Plattform JavaScript Fullstack Day
8. • Web Components (Stencil) • Android- / iOS-like Look-And-Feel • Optimiert für mobile Plattformen • Theme-Support mit CSS variablen UI-Layer UI (Ionic) HTML / CSS / JS WebView Capacitor Cross-Platform JavaScript Fullstack Day
9. • iOS: WKWebView • Android: Chromium-based WebView for Android • Displaying content in apps • Served by an in app optimised HTTPS-server • PWAs are not inside a WebView WebView-Layer WebView Capacitor UI (Ionic) HTML / CSS / JS Cross-Platform JavaScript Fullstack Day
10. • Bridge to platform-features • Toast & Camera etc. • Camera, Fingerprint, Storage • One API for all platforms • Supports Cordova plugins • Standalone Capacitor-Layer Capacitor WebVIew UI (Ionic) HTML / CSS / JS Cross-Platform JavaScript Fullstack Day
11. Cordova • Low-Level-APIs • Mobile-Plattform-Bridge • Plugin-Focused Capacitor vs Cordova Capacitor • Higher-Level-APIs • Plattform-Bridge • Includes commonly used plugins • Supports Cordova-Plugins Cross-Platform JavaScript Fullstack Day
12. iOS – Xcode & Safari Remote Debugger Android – IDE & Chrome Remote Debugger (chrome://inspect/#devices) & VS Code (Plugin) Web – In Browser & IDE Cross-Platform Debugging JavaScript Fullstack Day
13. Get File Input Hidden DOM Read File & Convert
14. Main. Use Capacitor plugins with UI main.ts Verwendung
15. https://www.thinktecture.com/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank