Mobile und Desktop - Echte HTML5-Anwendungen mit Cordova und Electron

HTML5 kombiniert mit dem Wort „Anwendung“, geht denn das? Na klar! Und der Vorteil dabei: Einmal erstellt, läuft es auf drei Desktopplattformen, mehreren mobilen Plattformen und im Browser sowieso. Wie das geht? Mit nativen Host-Anwendungen und Frameworks wie Cordova, Electron und den Standardbrowsern. In dieser Session zeigt Ihnen Thorsten Hans, wie einfach es ist, aus einer HTML5 SPA eine native Anwendung für eine Vielzahl dieser Plattformen zu erstellen. Und das alles mit nur einer Codebasis.

Transcript

1. Was Sie erwartet • Cross Plattform Entwicklung • Apache Cordova • GitHub’s Electron 1 Was Sie nicht erwartet • Angular 2 Intro • TypeScript Intro Mobile und Desktop Echte HTML5-Anwendungen mit Cordova und Electron
2. Special Day „Modern Business Applications“ Thema Sprecher Datum, Uhrzeit Raum Zehn Dinge, die man über JavaScript wissen muss Christian Wenz DI, 1. März 2016, 9.45 bis 11.00 Köln Leichtgewichtige Architekturen mit ASP.NET Web API und SignalR Christian Weyer DI, 1. März 2016, 11.45 bis 13.00 Köln Angular 2: Komponentenorientierte HTML5-Anwendungen Christian Weyer DI, 1. März 2016, 14.30 bis 15.45 Köln Mobile und Desktop: Echte HTML5-Anwendungen mit Cordova und Electron Thorsten Hans DI, 1. März 2016, 16.30 bis 17.45 Köln 2-D- und 3-D- Datenvisualisierung für alle Plattformen mit HTML5 Christian Liebel & Manuel Rauber DI, 1. März 2016, 18.30 bis 19.45 Köln
3. Echte HTML5- Anwendungen mit Cordova und Electron Mobile und Desktop 3
4. Thorsten Hans • Developer / Consultant • Thinktecture AG • thorsten.hans@thinktecture.com • @ThorstenHans • www.xplatform.rocks 4
5. Talking Points • Cross Plattform Entwicklung • leichtgewichtige Architekturen (Wdh) • Single Page Applications mit Angular2 • Cordova für mobile Plattformen • Electron für Desktop Plattformen 5
6. Cross Plattform Entwicklung Mit was wir uns beschäftigen… 6
7. 7 C# Objective C C++ / QT Swift Cocoa VB.NET Windows Forms / WPF / WinJS Java Java Swing iOS SDK Android SDK UWP SDK
8. ODER EHER NICHT ! Lasst uns doch lieber eine Sprache nutzen 8
9. 9 Nur native Web Technologien
10. 10 Nutzt das Framework eurer Wahl
11. 11 Apache Cordova GitHub’s Electron
12. Mobile First?! Was genau ist damit gemeint? 12
13. Mobile Use-Cases! Bitten nur sinvolle mobile Apps! 13
14. Cross Plattform Was genau bedeutet es? 14
15. Cross Plattform • Single Code Base • Ausführung auf allen! Plattformen – Web – Mobile – Desktop 15
16. Vorteile • Wartung “einer” App • Support der Apps wird einfacher • Geringe Einstiegshürde – Web Technologies anstatt • Objective C, C# und Java 16
17. Alle Plattformen 17
18. Leichtgewichtige Architekturen 18
19. Unsere Beispielanwendung • Eine! Code Basis • SPA Framework deiner Wahl – hier Angular2 • Responsive UI dank CSS Frameworks • Native Features? – Ebenfalls JavaScript (zumindest die berühmten 90%) 19
20. BoardZ! https://github.com/thinktecture/boardz- cross-platform-sample oder https://goo.gl/lJ99tN 20
21. Apache Cordova • Nativer Rahmen um unsere SPA • Viele Plattformen – iOS, Android, FireFox OS, Universal Windows Platform (UWP) • Native APIs – gekapselt in Cordova Plugins • Ein Cordova Projekte hat – viele Plattformen – viele Plugins 21
22. DEMO Apache Cordova 101 22
23. Cordova Tooling / Supersets • Ionic • Onsen UI (ONS) • Adobe PhoneGap • Microsoft TACO 23
24. Native APIs in Cordova 24
25. DEMO Erstellen einer Cordova App und Verwendung nativer Plattform APIs (Beispiel Camera) 25
26. GitHub’s Electron • Verpackt SPA in ausführbare Programme für Desktop Betriebssysteme – Windows, OS-X und Linux • Besteht aus 2 Prozessen – Main und Renderer Prozess • Liefert Node.js und Chromium mit aus • Stellt native APIs bereit – Weitere APIs können mit Node Modulen angesprochen werden 26
27. Electron Architektur 27
28. DEMO Erstellen einer Electron App und Verwendung nativer Plattform APIs 28
29. Q & A 29