Browser, Mobile und Desktop: Echte HTML5-Anwendungen mit Angular2, 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. Auch der Weg in sämtliche App Stores wie zum Beispiel den Windows Store ist daher kein Problem. Wie das geht? Mit nativen Host-Anwendungen und Frameworks wie Cordova, Electron und den Standard-Browsern. In dieser Session zeigt Ihnen Thorsten Hans von der Thinktecture AG wie einfach es ist, aus einer HTML5 Single Page Application mit Angular 2 eine "echte" Anwendung für eine Vielzahl von heute üblichen Plattformen zu erstellen. Und das alles mit nur einer Codebasis. Uuund Action!

Transcript

1. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN WAS SIE ERWARTET ▸ Cross Plattform Entwicklung ▸ Angular 2 mit TypeScript ▸ Apache Cordova ▸ GitHub’s Electron WAS SIE NICHT ERWARTET ▸ Einführung in die Programmiersprache TypeScript
2. ECHTE HTML5-ANWENDUNGEN MIT ANGULAR2, CORDOVA UND ELECTRON BROWSER, MOBILE UND DESKTOP
3. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN THORSTEN HANS ▸ Thinktecture AG ▸ thorsten.hans@thinktecture.com ▸ @ThorstenHans ▸ https://www.xplatform.rocks ▸ http://www.thinktecture.com DEVELOPER - CONSULTANT
4. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN TALKING POINTS ▸ Cross Plattform Entwicklung ▸ Anforderungen an das Backend ▸ Single Page Applications ▸ Apache Cordova für mobile Plattformen ▸ GitHub’s Electron für Desktop Plattformen
5. CROSS PLATTFORM ENTWICKLUNG
6. ERSTELLEN SIE DESKTOP ANWENDUNGEN? Frage BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN
7. ERSTELLEN SIE WEB ANWENDUNGEN? Frage BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN
8. ERSTELLEN SIE MOBILE ANWENDUNGEN? Frage BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN
9. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN ALLE PLATTFORMEN SIND DAS ZIEL 9
10. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN 10 C# VB.NET WPF / WinJS / Windows Forms Cocoa Objective C Swift Java Java Swing Android SDK iOS SDK MacOS SDK C++ Qt Universal Windows Platform SDK
11. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN ERNSTHAFT? ▸ Enorme Berge an Wissen müssen angeeignet werden ▸ Entwickler Teams müssen wachsen ▸ es gibt keinen Entwickler der in jeder Technologie gleich gut liefern kann ▸ Parallelisieren wird notwendig für ▸ Projektmanagement ▸ Releasemangement ▸ Use Case Evaluierung ▸ Deployment
12. THERE IS HOPE! BUT, Quelle http://www.thegeektwins.com/
13. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN NATIVE WEB TECHNOLOGIEN 13
14. WELCHES IST IHRER MEINUNG NACH DIE WICHTIGSTE PLATTFORM? Frage BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN
15. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN DER BROWSER! ▸ Auf jeder Plattform verfügbar ▸ Keine Installation der App notwendig ▸ Funktionsumfang der HTML5 API wird oft unterschätzt ▸ Vertraute Bedienungskonzepte für die große Mehrzahl der Anwender ▸ Keine “App jetzt laden” Hürde
16. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN WAS BEDEUTET CROSS PLATTFORM ENTWICKLUNG ▸ Single Code Base ▸ Code wird nur einmal geschrieben ▸ Ausführung auf allen Plattformen ▸ Mobile ▸ iOS, Android, BlackBerry, Windows Phone, Windows Mobile, Firefox OS,… ▸ Desktop ▸ Linux, Mac OS-X, Windows ▸ Web
17. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN MEHRWERTE DER CROSS PLATTFORM ENTWICKLUNG ▸ Wartung “einer” App ▸ Support der App (auf allen Plattformen) wird einfacher ▸ Geringere Einstiegshürden für Entwickler Teams ▸ Web Technologies müssen beherrscht werden ▸ Ihre Entwickler müssen nicht jede plattformspezifische Sprache lernen
18. OUR JOB IS TO ENSURE MICROSOFT WILL THRIVE IN A MOBILE AND CLOUD- FIRST WORLD. Satya Nadella - Microsoft BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN
19. WAS GENAU BEDEUTET DIESES 
 
 “MOBILE FIRST” Frage BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN
20. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN MOBILE FIRST ▸ Mobilität bedenken! ▸ mobile Use Cases für Ihre Anwendung identifizieren ▸ Probleme der Mobilität bedenken ▸ Datenzugriff wenn der Benutzer offline ist ▸ Daten für den mobilen Zugriff optimieren
21. ANFORDERUNGEN AN DAS BACKEND
22. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN ANFORDERUNGEN AN DAS BACKEND ▸ HTTP ist die Kommunikationsschicht ▸ REST ist schön, aber kein Requirement ▸ JSON als Datenaustausch-Format ▸ Token basierte Authentifizierung ▸ https://identityserver.github.io/
23. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN ANFORDERUNGEN AN DAS BACKEND ▸ Fachliche Services ▸ optimieren Sie nach Ihren Use-Cases und nicht strikt nach einem Schema ▸ KISS ▸ Eine Neuimplementierung des Backends ist in der Regel nicht notwendig ▸ Shim Layers FTW! ▸ Das Backend kann auch On Premise bleiben ▸ https://github.com/thinktecture/relayserver ▸ Bidirektionale, sicherer Datenzugriff ohne VPN oder sonstige Tools
24. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN LECIHTGEWICHTIGE ARCHITEKTUREN 24
25. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN VORTEILE VON WEB APIS ▸ Skalierbarkeit ▸ Einfache Implementierung ▸ Keine Plattform Limitierung ▸ Ebenfalls Cross Plattform fähig ▸ ASP.NET Core 1.0 ▸ Node.js
26. DEMO Leichtgewichtige Backends
27. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN EINE KLEINE BEISPIEL-ANWENDUNG ▸ Eine! Code Basis ▸ Single Page Application ▸ hier auf Basis von Angular2 ▸ Responsive UI dank CSS Frameworks ▸ hier auf Basis von Twitter Bootstrap ▸ Native Integration ▸ Gerätekamera und GeoLocation
28. HTTPS://GITHUB.COM/THINKTECTURE/BOARDZ-CROSS-PLATFORM-SAMPLE Sämtlicher Quellcode ist frei verfügbar BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN
29. DEMO Die Beispiel Anwendung
30. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN APACHE CORDOVA ▸ Nativer Wrapper um die SPA ▸ Viele Plattformen ▸ iOS, Android, FireFox OS, Universal Windows Plattform (UWP) ▸ Native APIs ▸ gekapselt als Cordova Plugins ▸ Ein Cordova Projekt besteht aus ▸ … vielen Plattformen ▸ … vielen Plugins
31. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN NATIVE APIS MIT APACHE CORDOVA 31
32. DEMO Cross Plattform mit Apache Cordova
33. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN GITHUB’S ELECTRON ▸ Nativer Wrapper um die SPA ▸ Haupt-Plattformen ▸ Windows, Mac OS-X und Linux ▸ Besteht technisch aus zwei getrennten Prozessen ▸ Liefer sowohl Node.js als auch Chromium mit aus ▸ Stellt native APIs in JavaScript bereit ▸ Nicht bereitgestellte APIs können durch Node.js Module verwendet werden
34. BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN ELECTRON APP ARCHITEKTUR 34
35. DEMO Cross Plattform mit GitHub’s Electron
36. Q&A Haben Sie Fragen? BROWSER, MOBILE UND DESKTOP: ECHTE HTML5-ANWENDUNGEN
37. Vielen Dank thorsten.hans@thinktecture.com https://speakerdeck.com/thorstenhans