Cross-platform with Capacitor - Javascript Fullstack Day IJS Munich 2022

This talk is part of the “JavaScript Fullstack Day” Workshop at the International JavaScript Conference 2021 in Munich – a collaboration of different Speakers to cover the modern full programming stack. Each talk, provided by an expert, covers particular tooling or part of the stack.

In this part, you will learn about hybrid apps and the cross-platform approach.
Learn how to create android, ios and electron apps using Capacitor and your existing web app.

Transcript

1. JavaScript Fullstack Day Cross-Platform Max Marschall @MaxOSchulte Consultant
2. Good to know… Max Marschall max.schulte@thinktecture.com h2ps://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und Engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic / Capacitor und Babylon.js Cross-Pla)orm JavaScript Fullstack Day
3. Cross-Pla)orm JavaScript Fullstack Day
4. Ionic Capacitor & Hybrid-Apps Cross-Pla)orm Java, C++, C#, VB Swing, Qt, XAML JavaScript Fullstack Day
5. Ionic Capacitor & Hybrid-Apps Cross-Platform Java, C++, C#, VB Swing, Qt, XAML JavaScript Fullstack Day
6. Ionic Capacitor & Hybrid-Apps Cross-Pla)orm Ionic t Java, C++, C#, VB Swing, Qt, XAML JavaScript Fullstack Day
7. Cordova • Low-Level-APIs • Mobile-Plattform-Bridge • Plugin-Focused Capacitor vs Cordova Capacitor • Higher-Level-APIs • PlaPorm-Bridge • Includes commonly used plugins • Supports Cordova-Plugins Cross-Platform JavaScript Fullstack Day
8. Unsolved • SDK Management • Many different devices • Kotlin / Java Cross-Pla:orm • macOS • Swift / Objective-C • Speacial features (3D Touch, Radar) • Play Store & App Store access • Vendor policies • TesZng • Deployment / TesZng • Access Rights & Permissions Cross-Pla)orm JavaScript Fullstack Day
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 Cross-Pla)orm Open Source Enterprise • Premium Plugins (e.g. Offline Storage) • Appflow • Support • EncrypZon JavaScript Fullstack Day
10. Layers WebView Capacitor UI (Ionic) HTML / CSS / JS Cross-Pla)orm PlaEorm JavaScript Fullstack Day
11. • 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-Pla)orm JavaScript Fullstack Day
12. • 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-Pla)orm JavaScript Fullstack Day
13. • 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-Pla)orm JavaScript Fullstack Day
14. Cross-Pla)orm JavaScript Fullstack Day
15. 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
16. Main. Use Capacitor plugins with UI main.ts Usage
17. Get File Input Hidden DOM Read File & Convert
18. Electron, Cordova …. Cross-Pla)orm Cheat Sheets JavaScript Fullstack Day h2ps://www.thinktecture.com/digital-content/electron-cordova-pwa/
19. Ionic, Capacitor … Cross-Pla)orm Cheat Sheets JavaScript Fullstack Day h2ps://www.thinktecture.com/digital-content/ionic-fuer-web-apps/
20. https://www.thinktecture.com/max-marschall Max Marschall @MaxOSchulte Architect / Consultant Vielen Dank