Slide 1
Slide 1 text
JavaScript Fullstack Day
Cross-Platform
Max Schulte
@MaxOSchulte
Consultant
Slide 2
Slide 2 text
Web-Apps schneller entwickeln mit Ionic & Angular
Good to know…
Max Schulte
[email protected]
https://www.thinktecture.com/max-schulte
@MaxOSchulte
• Consultant und Engeneer bei der Thinktecture AG.
• Spezialisiert in Angular, Ionic / Capacitor und Babylon.js
Workshop
Slide 3
Slide 3 text
Cross-Platform
JavaScript Fullstack Day
Slide 4
Slide 4 text
Ionic Capacitor & Hybrid-Apps
Cross-Platform
Java, C++, C#, VB Swing, Qt, XAML
JavaScript Fullstack Day
Slide 5
Slide 5 text
Ionic Capacitor & Hybrid-Apps
Cross-Platform
Java, C++, C#, VB Swing, Qt, XAML
JavaScript Fullstack Day
Slide 6
Slide 6 text
Ionic Capacitor & Hybrid-Apps
Cross-Platform
Ionic
t
Java, C++, C#, VB Swing, Qt, XAML
JavaScript Fullstack Day
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
• 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
Slide 9
Slide 9 text
Layers
WebView
Capacitor
UI (Ionic)
HTML / CSS / JS
Cross-Platform
Plattform
JavaScript Fullstack Day
Slide 10
Slide 10 text
• 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
Slide 11
Slide 11 text
• 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
Slide 12
Slide 12 text
• 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
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Cross-Platform
JavaScript Fullstack Day
Slide 16
Slide 16 text
Main.
Use Capacitor plugins with UI
main.ts
Usage
Slide 17
Slide 17 text
Get File Input
Hidden DOM
Read File & Convert
Slide 18
Slide 18 text
https://www.thinktecture.com/max-schulte
Max Schulte
@MaxOSchulte
Architect / Consultant
Vielen Dank