JavaScript Fullstack Day London - cross-platform with Capacitor

Transcript

1. JavaScript Fullstack Day
   Cross-Platform
   Max Schulte
   @MaxOSchulte
   Consultant
   

   View Slide

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
   

   View Slide

3. Cross-Platform
   JavaScript Fullstack Day
   

   View Slide

4. Ionic Capacitor & Hybrid-Apps
   Cross-Platform
   Java, C++, C#, VB Swing, Qt, XAML
   JavaScript Fullstack Day
   

   View Slide

5. Ionic Capacitor & Hybrid-Apps
   Cross-Platform
   Java, C++, C#, VB Swing, Qt, XAML
   JavaScript Fullstack Day
   

   View Slide

6. Ionic Capacitor & Hybrid-Apps
   Cross-Platform
   Ionic
   t
   Java, C++, C#, VB Swing, Qt, XAML
   JavaScript Fullstack Day
   

   View Slide

7. 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
   

   View Slide

8. • 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
   

   View Slide

9. Layers
   WebView
   Capacitor
   UI (Ionic)
   HTML / CSS / JS
   Cross-Platform
   Plattform
   JavaScript Fullstack Day
   

   View Slide

10. • 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
    

    View Slide

11. • 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
    

    View Slide

12. • 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
    

    View Slide

13. 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
    

    View Slide

14. 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
    

    View Slide

15. Cross-Platform
    JavaScript Fullstack Day
    

    View Slide

16. Main.
    Use Capacitor plugins with UI
    main.ts
    Usage
    

    View Slide

17. Get File Input
    Hidden DOM
    Read File & Convert
    

    View Slide

18. https://www.thinktecture.com/max-schulte
    Max Schulte
    @MaxOSchulte
    Architect / Consultant
    Vielen Dank
    

    View Slide