Web, Mobile and Desktop: Building cross-platform apps using Angular, Cordova and Electron

Slides from my talk at International JavaScript Conference 2017 in Munich

Transcript

1. Web, Mobile und Desktop Building cross-platform apps with Apache Cordova and GitHub Electron Thorsten Hans @ThorstenHans Consultant
2. 2 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Consultant at Thinktecture http://thinktecture.com http://thorsten-hans.com thorsten.hans@thinktecture.com @ThorstenHans Thorsten Hans
3. 3 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron What you’ll see Modern business applications The Web: HTML5, CSS, TypeScript (or JavaScript) as a base Angular: Application framework for the browser Electron: creating desktop applications Cordova: building mobile apps Topics
4. 4 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron One code-base Browser, mobile apps and desktop applications
5. 5 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Modern business applications
6. 6 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Mobile! Mobile! Mobile! https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4
7. 7 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Single-platform vs. multi-platform vs- cross-platform
8. 8 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron
9. 9 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron § 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 Mobile-First
10. 10 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron § User experience 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
11. 11 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron It’s a feature But that doesn’t look like a native application! Exactly.
12. 12 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron § (Micro)Service-based architectures § Web / REST APIs § Use any platform server-side § Express / Restify / Ruby on Rails / ASP.NET Core Web API § Push Services § socket.io / SignalR § Consider Offline-first § Heavily influences your architecture and entire project Target architecture
13. 13 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron The web as a platform Shouldn’t be that new
14. 14 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron § Web browser & HTML5 as a powerful platform § JavaScript & TypeScript as application programming languages § Angular as smart client application framework § Flexible layouts with CSS3 & flexbox Real applications
15. 15 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron § Client-side single page applications (SPA) § Features § Consequently component-driven § Metadata-driven § Rich tooling ecosystem § Focus on proven pattern and separation of concerns § Components, views, view models § Services and dependency injection Component-based applications with Angular
16. 16 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron § Angular bets on TypeScript § Components are build as classes and described with metadata Angular & TypeScript @Component({ selector: 'game-details' templateUrl: 'game.html', }) export public class GameDetailsComponent { @Input() game: GameData; @Output() ended = new EventEmitter<GameData>(); … } … <game-details [game]="myCurrentGame" (ended)="onGameEnded($event)" > …
17. 17 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron DEMO boardZ – An Angular application for managing board-games !
18. 18 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Web & native platforms Let’s talk about the desktop 18
19. 19 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Desktops § Create real desktop applications from web apps § 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 GitHub Electron
20. 20 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron 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
21. 21 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron DEMO Creating Desktop applications using GitHub Electron
22. 22 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron mobile platfosm 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
23. 23 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron 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
24. 24 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron DEMO Creating mobile apps using Apache Cordova
25. 25 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron What you’ve seen Modern business applications Web Standards Angular for the frontend GitHub Electron for desktop applications Apache Cordova for mobile apps Recap
26. 26 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Questions If you’ve further questions, write me a mail thorsten.hans@thinktecture.com Or send me a tweet @ThorstenHans
27. 27 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Thank you! And have fun here at IJS in Munich Code & Slides https://github.com/ThorstenHans/boardz https://goo.gl/tgmLfp