Tweet
Tweet

Slide 1

Slide 1 text

Web, Mobile und Desktop Building cross-platform apps with Apache Cordova and GitHub Electron Thorsten Hans @ThorstenHans Consultant

Slide 2

Slide 2 text

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 [email protected] @ThorstenHans Thorsten Hans

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron One code-base Browser, mobile apps and desktop applications

Slide 5

Slide 5 text

5 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Modern business applications

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron Single-platform vs. multi-platform vs- cross-platform

Slide 8

Slide 8 text

8 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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(); … } … …

Slide 17

Slide 17 text

17 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron DEMO boardZ – An Angular application for managing board-games !

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron DEMO Creating Desktop applications using GitHub Electron

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24 Web, Mobile and Desktop Building Cross-Platform Apps with Apache Cordova and GitHub Electron DEMO Creating mobile apps using Apache Cordova

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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 [email protected] Or send me a tweet @ThorstenHans

Slide 27

Slide 27 text

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