Echtes Cross-Platform mit HTML5 und JavaScript – in Action!

Write once, run anywhere? In dieser Session zeigt Ihnen Christian Liebel, wie dieser alte Traum der Softwareentwicklung mit HTML5, JavaScript und Cross-Platform-Werkzeugen Wirklichkeit werden kann. Mit nur einer Codebasis lassen sich Oberflächen für Desktops, Tablet-Computer und Smartphones entwerfen. Mischt man das dann noch mit Tools wie Apache Cordova oder GitHub Electron, so entstehen mit Single-Page-Web-Application-Frameworks wie Angular echte Anwendungen für alle relevanten Plattformen und Formfaktoren. Seien Sie live dabei, wie aus einer HTML5/JavaScript-Codebasis Apps für Windows, macOS, Linux, Android und iOS werden – die als Web-App natürlich auch im Browser funktionieren.

Transcript

1. Christian Liebel @christianliebel Consultant Echtes Cross-Platform mit HTML5 und JavaScript In Action!
2. Echtes Cross-Platform mit HTML5 und JavaScript In Action! What to expect - Overview about cross- platform development with modern web technologies - Could the modern web stack be an alternative for you? - Using Angular to handle platform differences in an easy way - Migration Paths - Demo What NOT to expect - Cordova/Electron/Angular Deep Dive - Native Technologies Expectations
3. Hello, it’s me. Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud & Enterprise Blockchain Echtes Cross-Platform mit HTML5 und JavaScript In Action!
4. Nintendo DS Windows Windows Mobile iOS Android BlackBerry 10 FireOS macOS Linux Fernseher Kühlschrank Browser Echtes Cross-Platform mit HTML5 und JavaScript In Action! Single, Multi and Cross Platform Cross-Platform == Cross-Platform?
5. In Action! Echtes Cross-Platform mit HTML5 und JavaScript Real Cross-Platform & Cross-Form-Factor
6. - Modern lifestyle, modern way of working - Data and processes need to be mobile, not just the devices we use - Reach is important - Boundaries are blurring – and will vanish - User experience (UX) will become an even more important part of software development - Facing new challenges - Building UIs with one technology approach? - But optimized for certain platforms and/or form factors “Mobile First” In Action! Echtes Cross-Platform mit HTML5 und JavaScript
7. Echtes Cross-Platform mit HTML5 und JavaScript In Action! “But that doesn’t look like a native application!”
8. Echtes Cross-Platform mit HTML5 und JavaScript In Action! https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
9. Echtes Cross-Platform mit HTML5 und JavaScript In Action! http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg
10. Web APIs Push Services Offline Availability Echtes Cross-Platform mit HTML5 und JavaScript In Action! Target Architecture
11. - Service-based architectures - Web/REST APIs - Use any platform server-side - Express or Restify - Jersey - ASP.NET Web API - Push Services - socket.io - SignalR - Consider Cloud-native approaches like (event-driven) Serverless architectures - Offline-first is a different game! Target Architecture HTTP HTTPS WebSocket Service A Service B Service C Web APIs (ASP.NET, Node.js, …) HTML5-Application (Single-Page Application) Web Cordova Electron In Action! Echtes Cross-Platform mit HTML5 und JavaScript
12. - Web browser & HTML5 as a powerful platform - JavaScript & TypeScript as application programming languages - Angular as smart client application framework – or React, or… - Responsive layouts with CSS3 & Flexbox & Grids Real applications Echtes Cross-Platform mit HTML5 und JavaScript In Action!
13. - Smart clients with single page applications (SPA) - Open source, bets heavily on TypeScript - Features - Consequently component-based - Metadata-driven - Focus on proven patterns and separation of concerns - Components, views, view models - Services and dependency injection - Large tooling ecosystem and platform tools available - Angular CLI - IDEs like WebStorm, Visual Studio Code Component-based applications with Angular In Action! Echtes Cross-Platform mit HTML5 und JavaScript
14. Native App Packaging JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Web Application Cordova Electron In Action! Echtes Cross-Platform mit HTML5 und JavaScript
15. Demo Application One application Single code base Runs on desktop, mobile & in browsers In Action! Echtes Cross-Platform mit HTML5 und JavaScript LIVE DEMO
16. A single codebase Maximum code reuse Maximum number of target platforms Maximum reach Demo Application In Action! Echtes Cross-Platform mit HTML5 und JavaScript
17. Handling Platform Differences PWA/Electron: getUserMedia Cordova: cordova-plugins-camera Echtes Cross-Platform mit HTML5 und JavaScript In Action! Demo Application
18. Demo Application In Action! Echtes Cross-Platform mit HTML5 und JavaScript
19. Handling Platform Differences? if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { takeNativePicture() } else if (window.cordova) { takeCordovaPicture() } else { alert('Not compatible'); } Demo Application In Action! Echtes Cross-Platform mit HTML5 und JavaScript
20. Handling Platform Differences! Echtes Cross-Platform mit HTML5 und JavaScript In Action! Demo Application Base Camera Service Mobile Camera Service Desktop Camera Service LIVE DEMO
21. - Toolkit and framework for building native application shells for our web apps - Make ‘app apps’ from ‘web apps’ - Uses native web view components to host the original web app locally - Provides framework and APIs via plugins to interact with underlying native platforms - CLI tools for automating project creation & build - We always need the native SDKs (e.g. iOS, Android, Windows) Mobile Apps with Cordova JS HTML CSS Native wrapper Deploy to devices In Action! Echtes Cross-Platform mit HTML5 und JavaScript
22. Cordova Architecture Mobile OS iOS Android Windows 10 UWP many more Cordova Application Cordova Plugins Geolocation Notifications Contacts Media Camera Custom Plugins HTML Rendering Engine (WebView) Single Page App HTML JS CSS Assets config.xml HTML APIs Cordova APIs OS APIs OS APIs Cordova Native APIs In Action! Echtes Cross-Platform mit HTML5 und JavaScript
23. Cordova Platform Support Android Blackberry 10 iOS Windows Phone 8 Windows (8.1 / 10, Phone 8.1) Cordova CLI macOS, Windows, Linux macOS, Windows, Linux macOS Windows Windows Embedded WebView a a Plugin Interface a a a a a In Action! Echtes Cross-Platform mit HTML5 und JavaScript
24. Echtes Cross-Platform mit HTML5 und JavaScript In Action! Cordova LIVE DEMO
25. - Create desktop applications from web apps - Hybrid approach, similar to Cordova - Target Windows desktop, macOS, and Linux - Marriage of Chromium and Node.js - Independent of installed browsers on target machines - Does not need native SDKs to build final artifact - Access to native platform features - Electron API - Node modules ecosystem - Auto-updating and platform deployment available Desktop applications with Electron In Action! Echtes Cross-Platform mit HTML5 und JavaScript
26. Electron architecture Desktop OS Electron Renderer Process (technically Chromium) Electron Main Process (technically Node.JS) MacOS Windows Linux Your Single Page Application Electron API Your custom Node.JS modules IPC Remote Node.JS In Action! Echtes Cross-Platform mit HTML5 und JavaScript
27. Echtes Cross-Platform mit HTML5 und JavaScript In Action! Electron LIVE DEMO
28. - Integrate HTML SPA apps into your existing C++, Java or .NET applications - Extend with new functionality to be shared with e.g. Web or mobile - Smoothly migrate away from Windows Forms, UWP - Chromium Embedded Framework (CEF) - Simple framework for embedding Chromium-based browsers in other applications - JCEF - Embedding CEF in other applications using Java - CEFSharp - .NET (WPF and Windows Forms) bindings for CEF Existing Applications: Integration & Migration with CEF Echtes Cross-Platform mit HTML5 und JavaScript In Action! https://en.wikipedia.org/wiki/Chromium_Embedded_Framework
29. “Write once, run anywhere?” In Action! Echtes Cross-Platform mit HTML5 und JavaScript
30. Cordova - Native SDKs (and hardware) required - Store memership (per platform) required, transaction fees Electron (and Cordova with Crosswalk) - Chromium/Node.js are bundled with the application (need to be updated too) - Application bundle gets comparably big - RAM consumption Echtes Cross-Platform mit HTML5 und JavaScript In Action! Limitations
31. Echtes Cross-Platform mit HTML5 und JavaScript In Action! Upcoming Alternative Progressive Web Apps - Web app = App app - Powerful native functionality (e.g. push, offline) - Installable to the home screen/ program list from the browser - Run in own native window (fullscreen/without address and menu bars on mobile) - No SDKs/store accounts required!
32. - Real cross-platform with Web-based technologies - SPA frameworks like Angular enable Java, .NET etc. developers to quickly move into the new world - Angular (plus a broad range of tools) enable spectrum of client application shapes - Purely web - Purely native - Hybrid, optimized for mobile - Hybrid, for web, desktop and mobile - Progressive Web Apps (PWA): Maybe we will no longer need Cordova, Electron et al. in the future? Summary In Action! Echtes Cross-Platform mit HTML5 und JavaScript
33. Thank you for your kind attention! Christian Liebel @christianliebel Consultant