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
   

   View Slide

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
   

   View Slide

3. Cross-Pla)orm
   JavaScript Fullstack Day
   

   View Slide

4. Ionic Capacitor & Hybrid-Apps
   Cross-Pla)orm
   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-Pla)orm
   Ionic
   t
   Java, C++, C#, VB Swing, Qt, XAML
   JavaScript Fullstack Day
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. Layers
    WebView
    Capacitor
    UI (Ionic)
    HTML / CSS / JS
    Cross-Pla)orm
    PlaEorm
    JavaScript Fullstack Day
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. Cross-Pla)orm
    JavaScript Fullstack Day
    

    View Slide

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
    

    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. Electron, Cordova ….
    Cross-Pla)orm
    Cheat Sheets
    JavaScript Fullstack Day
    h2ps://www.thinktecture.com/digital-content/electron-cordova-pwa/
    

    View Slide

19. Ionic, Capacitor …
    Cross-Pla)orm
    Cheat Sheets
    JavaScript Fullstack Day
    h2ps://www.thinktecture.com/digital-content/ionic-fuer-web-apps/
    

    View Slide

20. https://www.thinktecture.com/max-marschall
    Max Marschall
    @MaxOSchulte
    Architect / Consultant
    Vielen Dank
    

    View Slide