Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron

Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron

Der Traum von einer einzigen Codebasis für alle Clientplattformen: Er lebt immer noch. In dieser Session zeigt Ihnen Christian Weyer, wie weit dieser Traum mit HTML5/JavaScript und aktuellen Cross-Plattform-Werkzeugen Wirklichkeit werden kann. Auf Basis moderner UI/UXKonzepte lassen sich Oberflächen für Desktops, Tablets und Smartphones entwerfen – mit einer Codebasis. Mischt man diesen Ansatz mitTools wie Cordova und Electron, so kann man mit Single-Page-Applications-(SPA-)Frameworks wie Angular 2 echte Anwendungen für alle relevanten Plattformen und Devicegrößen bauen, Mobile und Desktop: Windows, Linux, macOS, iOS, Android und Co. – und natürlich den Browser. Sehen Sie all dies in Action!

Christian Weyer

March 21, 2018
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. 2 § Co-founder, co-owner and CTO at Thinktecture AG §

    Focus on § Mobile & web-based application architectures § Interoperability, cross-device § Pragmatic end-to-end solutions § Cloud-native architectures § Microsoft MVP for ASP.NET (Architecture) ASPInsider, AzureInsider § Google GDE for Web Technologies § [email protected] § ! @christianweyer Christian Weyer mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  2. 3 § Modern business applications § The Web: HTML5, CSS,

    {*}Script as a base § Angular: Smart client framework for the browser § Cordova: building mobile apps § Electron: creating desktop applications Topics mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  3. 8 § 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” mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  4. 9 It’s a feature But that doesn’t look like a

    native application! Exactly. mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  5. 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  6. 12 The web as a platform mit Angular, Cordova &

    Electron Echte Cross-Plattform Anwendungen
  7. 13 § Web browser & HTML5 as a powerful platform

    § JavaScript & TypeScript as application programming languages § Angular as smart client application framework – or React, or… § Flexible layouts with CSS3 & flexbox Real applications Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron
  8. 14 § 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  9. 16 § Toolkit and framework for building native application shells

    for our web apps § Make ‘app apps’ from ‘web apps’ J § 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  10. 17 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  11. 18 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 a Embedded WebView a x a x x Plugin Interface a a a a a mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  12. 19 § 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  13. 20 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  14. 21 § 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 Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron 21 https://en.wikipedia.org/wiki/Chromium_Embedded_Framework
  15. 23 § Native App-like user experience – but in the

    web browser § Initiative led by Google § Mozilla & Microsoft are in the boat, Apple is starting to act… § Typical PWA ‘features’, provided by browser engines § Not a product or framework – JS/SPA framework-independent mit Angular, Cordova & Electron The Future: Progressive Web Apps (PWA) App Shell / Fast Rendering App Manifest Home Screen HTTPS / HTTP/2 Service Worker Offline Cache & Data Background Sync Push Notifications Echte Cross-Plattform Anwendungen
  16. 24 § 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
  17. 25 Angular • https://angular.io Angular CLI • https://cli.angular.io/ Cordova •

    http://cordova.apache.org/ Electron • http://electron.atom.io/ • https://github.com/electron/electron-api-demos CEF • https://bitbucket.org/chromiumembedded/cef CEFSharp • https://github.com/cefsharp/CefSharp JCEF • https://github.com/cefsharp/CefSharp Progressive Web Apps (PWA) • https://developers.google.com/web/progressive-web-apps/ Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron Resources 25
  18. Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron Christian Weyer

    @christianweyer [email protected] Workshop Demo § https://github.com/thinktecture/angulardays-2018-spring-crossplatform