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

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

June 26, 2018
Tweet

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