Slide 1
Slide 1 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und
ohne Wrapper
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Christian Liebel
Twitter:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Angular & PWA
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
Web-Apps mit Angular
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Webinar-Reihe
Yannick Baron: State im Griff mit
NgRx Entity Adapter und Component Store
22.02.2023
Sascha Lehmann: Wie Sie mit Animationen
Ihrer Web-App den letzten Schliff verleihen
08.03.2023
Christian Liebel: Mobile & Desktop mit Tauri,
Capacitor und ohne Wrapper
05.04.2023
Max Marschall: Was Sie
über Formulare wissen müssen
24.05.2023
Slide 4
Slide 4 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Slide 5
Slide 5 text
Angular Tauri Capacitor
Ohne
Wrapper
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Slide 6
Slide 6 text
– Single-page application framework provided by Google
– Based on Google’s experience when builing large-scale apps
– Opinionated framework for building apps for web, mobile and desktop
– Batteries included: Architectural patterns, tooling (build process,
routing, form frameworks, …)
– Good choice for large-scale applications
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Angular
Slide 7
Slide 7 text
“The New Angular” (v16+)
Signals & Zone-less change detection
Introduces a new reactive primitive for more effective change detection,
reducing bloat and ensuring compatibility with other libraries.
Standalone Apps
Allows developers to get rid of NgModules entirely, which often led to
confusion and architectural problems.
Hydration
Allows faster startup times by attaching to pre-rendered DOM.
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Angular
Slide 8
Slide 8 text
SPA Architecture
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Angular
Server-
Logik
Web API
Push Service
Web API
DBs
HTML, JS,
CSS, Assets
Webserver Webbrowser
SPA
Client-
Logik
View
HTML/CSS
View
HTML/CSS
View
HTML/CSS
HTTPS
WebSockets
HTTPS
HTTPS
Slide 9
Slide 9 text
https://paint.js.org
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
LIVE DEMO
Slide 10
Slide 10 text
Angular Tauri Capacitor
Ohne
Wrapper
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Slide 11
Slide 11 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Slide 12
Slide 12 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Electron Architecture
Desktop OS
Electron Renderer Process
(Chromium)
Electron Main Process
(Node.js)
macOS Windows Linux
Single-Page
Application
Electron API
Custom Node.js
Modules
IPC
Remote
Node.js
Electron-
App
Slide 13
Slide 13 text
Advantages
- Many desktop target platforms
- Windows 7+, macOS 10.10+, Ubuntu, Debian, Fedora
- macOS App Store, Microsoft Store, Snapcraft
- Access to all native APIs
- Well-defined runtime environment (Chromium and Node.js)
- Integration scenarios with native applications
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Electron
Slide 14
Slide 14 text
Disadvantages
- Wrapper is large in size (“hello world” starts with ~100 MB)
- Outdated Node.js & Chromium versions may pose security risks to
users – developers have to take care of regular updates of the
wrapper
- Each Electron instance leads to RAM overhead (e.g. Slack)
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Electron
Slide 15
Slide 15 text
– Uses the platform-specific web view for rendering the web content
(WebView2 on Windows, WebKit on macOS, WebKitGTK on Linux)
– Support for iOS and Android planned for v2
– Uses Rust for the backend (non-exclusive)
– Security First: No server required for backend communication, API
surface can be reduced, …
– Backed by 1Password, Cloudflare, DigitalOcean, Netlify and others
– Advanced tooling (self-updater, installer build process, …)
– CLI: create-tauri-app
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Tauri
Slide 16
Slide 16 text
Advantages
– Using built-in web views reduces bundle size significantly
(starting at around 600 K)
– Potentially better performance
– Cross-platform: support for iOS und Android planned for version 2
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Tauri
Slide 17
Slide 17 text
Disadvantages
- Different web views: platform and API support will vary, additional
testing effort
- The new kid on the block
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Tauri
Slide 18
Slide 18 text
Deployment
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Tauri/Capacitor
JS
HTML
CSS
.ipa
.exe .app ELF
.apk
Single-Page
Application
Capacitor
Electron
Slide 19
Slide 19 text
Angular Tauri Capacitor
Ohne
Wrapper
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Slide 20
Slide 20 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
https://appfigures.com/top-sdks/development/apps
Slide 21
Slide 21 text
– Provided by Ionic
– Native projects are source
assets (instead of build
assets)
– Backwards-compatible with
Cordova (and many of its
plug-ins)
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Capacitor
Slide 22
Slide 22 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Cordova Architecture
Cordova Application
Single-Page Application
HTML JS CSS Assets
Cordova Plugins
Geolocation
Notifications
Media
Camera
Custom Plugins
HTML Rendering Engine (WebView)
Cordova Native APIs
Cordova APIs
HTML APIs
Mobile OS
Android iOS Windows 10 UWP and more…
OS APIs
OS APIs
Slide 23
Slide 23 text
Advantages
- Supports app development for iOS, Android
- Access to all native APIs
- Official App Store deployments
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Capacitor
Slide 24
Slide 24 text
Disadvantages
- Plug-ins are often outdated
- App store membership required
- Dependent on guidelines and goodwill of platform provider
- App/update validation can take several hours or days
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Capacitor
Slide 25
Slide 25 text
Angular Tauri Capacitor
Ohne
Wrapper
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Slide 26
Slide 26 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Responsive Linkable Discoverable Installable App-like
Connectivity
Independent
Fresh Safe Re-engageable Progressive
Slide 27
Slide 27 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Slide 28
Slide 28 text
Architecture Overview & Deployment
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
Browser
Internet
Single-Page
Application
Cache
fetch
JS
HTML
CSS
Server
Service
Worker
Slide 29
Slide 29 text
Install Experience
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
Slide 30
Slide 30 text
Web Native
Web App Gap
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
Web App Gap
Slide 31
Slide 31 text
Project Fugu
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
»Let’s bring the web
back – API by API«
Thomas Steiner, Google
Slide 32
Slide 32 text
Project Fugu
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
Contacts
Picker
Screen Wake
Lock API
Picture in
picture
File System
Access API
Capability missing?
http://bit.ly/new-fugu-request
Slide 33
Slide 33 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Project Fugu
https://fugu-tracker.web.app/
Slide 34
Slide 34 text
Fugu Example: File System Access API
if ('showOpenFilePicker' in window) {
const handle = await window.showOpenFilePicker();
const file = await handle.getFile();
// do something with the file
} else {
// use fallback API or disable feature in app
}
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
Feature Detection
Browser takes care of
calling OS-level APIs
Slide 35
Slide 35 text
Browser
Cross-Platform Web APIs
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
window.showOpenFilePicker();
Intent.ACTION_GET_CONTENT IFileDialog
…
NSOpenPanel
Slide 36
Slide 36 text
Store Deployments (Simplified)
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
https://example.com
.appx
.apk
Server
Microsoft
Store
Galaxy
Store
Source
Files
Slide 37
Slide 37 text
Advantages
- One single codebase, maximum reach
- No app store, installation, third-party software, … required
- No app store approvals required
- Super easy deployment (SFTP is enough, no redeployment via MSI, …)
- Latest app version is always available
- Fully backwards compatible
- App store support (Microsoft Store, Samsung Galaxy Store)
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
Slide 38
Slide 38 text
Disadvantages
- Web App Gap
- not all native APIs are available on the web platform
- expected to get smaller thanks to Project Fugu
- not all web APIs are available in every browser
- No control over execution environment
- Requires an up-to-date browser
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Progressive Web Apps
Slide 39
Slide 39 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
TWA
Slide 40
Slide 40 text
Bubblewrap
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
TWA
https://github.com/GoogleChromeLabs/bubblewrap
Slide 41
Slide 41 text
Advantages
- Same easy deployment model as for PWA
- App store support for Google Play Store
- Keep the existing user base
- Helps target older devices
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
TWA
Slide 42
Slide 42 text
Disadvantages
- No Apple App Store support
- Web App Gap
- No control over execution environment
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
TWA
Slide 43
Slide 43 text
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Target Platforms
PROGRESSIVE WEB APPS
CAPACITOR .
TAURI .
+ cars, smart fridges, …
Slide 44
Slide 44 text
Isolated Web Apps
Web apps that are bundled and
distributed through a store
This additional trust anchor allows
exposing even more powerful
capabilities (e.g., Direct Sockets API or
Borderless Windows Mode)
Bundles may even contain native code
Run on an isolated origin
APIs will not be proprietary, but
standardized instead
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Outlook
Slide 45
Slide 45 text
Direct Sockets API
Allows websites and PWAs to
open client TCP and UDP ports
Applications can talk to
servers and devices that don’t
support web protocols:
- SSH
- FTP
- …
https://wicg.github.io/direct-sockets/
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Outlook
Slide 46
Slide 46 text
- Developers should aim for Progressive Web Apps
- If required, web apps can be (additionally) wrapped in a Capacitor or
Tauri container à your web app investment always pays off!
- Consider Capacitor and Tauri as “uber-polyfills” that will become less
relevant in the future
- Feature-detect modern web APIs and use them, fall back to
Tauri/Capacitor APIs or alternatives if unavailable
- Report your use cases and missing web capabilities to browser
vendors
Web-Apps mit Angular
Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
Recap
Slide 47
Slide 47 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]