Desktop oder Mobile: Installierbare HTML5-Anwendungen

Ein Vorurteil hält sich hartnäckig, aber HTML- oder webbasiert bedeutet nicht nur "online im Browser". In diesem Vortrag zeigt Ihnen Christian Weyer, wie man sowohl Desktop- als auch mobile Anwendungen offline und installierbar mit HTML5 und JavaScript entwerfen und realisieren kann. Sie wollen Ihre neuen Businessanwendungen sicherlich über Windows-Mechanismen deployen? Sie wollen mit Webtechnologie mobile Apps bauen, diese jedoch über die App Stores vertreiben können? Und natürlich soll alles auch ohne Netzwerkverbindung funktionieren.

Transcript

1. Christian Weyer | thinktecture Desktop oder Mobile: Installierbare HTML5-Anwendungen think mobile!
2. Christian Weyer • Solution architect and principal consultant at thinktecture • Focus on – Distributed applications, service orientation – Cloud computing – Mobile applications architecture – Pragmatic end-to-end solutions – Windows Server, ASP.NET, Web API, SignalR, WCF, Windows Azure • Microsoft MVP for Windows Azure (Architecture) • http://blogs.thinktecture.com/cweyer • christian.weyer@thinktecture.com • @christianweyer think mobile! 2
3. Agenda • Modern applications, HTML5 & JavaScript • (iOS, Android, Windows Phone, …) Mobile apps with PhoneGap • (Windows, MacOSX, …) Desktop apps with node-webkit • Summary 3
4. The world of apps • Native – Full access to everything, best performance – Store deployment – Knowledge of each platform required • Web – One codebase (really?) – No deployment – Browsers are operating ‘systems’ these days • Hybrid – HTML5 & JavaScript – put into a native app shell – Leverage native features through plugins • Hybrid2 – Hybrid + explicitly mix native and web elements 4
5. HTML5 platform • HTML5 ~= Semantic markup + CSS3 + JavaScript • An application development platform • Which browser? 5
6. MOBILE 6
10. Native web-based mobile apps with PhoneGap • Basic idea is to provide a framework & tools to create native apps from an HTML5/JS codebase – Start with wrapping your HTML5 code into native app shell – Hook into platform features & events with APIs – Extend app functionality with plugins • Latest incarnation – New base architecture – New tools, new APIs, new platforms – Cloud-based companion 10
11. Architecture overview • Everything beyond the app shell is based on plugins – Lightweight core • Application implemented as a web page – References whatever CSS, JavaScript, images, media files, or other resources are necessary for it to run – Executes as a web view control within the native application wrapper – Interact with various device features by referencing cordova.js file which provides API bindings 11
12. Platform support 12
14. Tools • CLI tools chain to get started without any IDE – node.js-based – Multiple platform support – Distributed via npm • Cordova CLI – Unifies all platforms into a single project structure – Making it easy to maintain single codebase for multiple platforms • Phonegap CLI – Similar to Cordova CLI, different commands & syntax – Integrates with PhoneGap Build • Plugman – Automated discovery, installation, and removal of both core and custom plugins 14
15. “Hello” – yes… • Create PG app project • Build app • Test app $ phonegap create hello com.example.hello HelloWorld $ cd hello $ phonegap build ios $ phonegap build android $ phonegap install android $ phonegap install ios needs ios-sim 15
16. Architecture details (1/2) • config.xml – Provides information about app (cross platform) – Specifies parameters affecting how it works (e.g. responding to orientation shifts) – Adheres to the W3C's Packaged Web App, or Widget, specification • Features – Out-of-the-box native features via JavaScript API – Need to be enabled, implemented as plugins • Plugins – Bridges bit of functionality between web view and native platform the application is running on $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git 16
17. Architecture details (2/2) • Application lifecycle – Events exposed via API • Customizations – Use merges directory to add or override files for specific platform • Whitelisting – Security model that controls access to outside domains – Default security policy allows access to any site – Before moving your application to production, review whitelist and declare access to specific network domains and subdomains 17
18. Extensibility with plugins • Plugins are composed of – Single JavaScript interface used across all platforms – Native implementations following platform-specific plugin interfaces that the JavaScript calls into – All of the core Cordova APIs are implemented using this architecture • Installation via CLIs • Mapping from native implementation class to JS-exposed name in config.xml • Use cordova.exec() to communicate between the JavaScript and native environments • Android Java base class CordovaPlugin from package org.apache.cordova.plugin • iOS ObjectiveC base class CDVPlugin 18
19. Special components • InAppBrowser – What happens with HTML links? – Web browser (as plugin) that displays in the app when calling window.open – E.g. for authentication/authorization with web-based providers (OAuth) • WebView (aka Cleaver) – Enabling hybrid2: Adding Cordova WebView to native apps – E.g. native navigation, transitions, look & feel - with HTML5 content 19
20. Debugging • Native IDEs to debug plugin code • Safari Web Inspector to debug HTML5/JS code – On simulator/emulator or device – Always use console.log() • Other remote debugging tools like Weinre (local/Cloud) – E.g. http://debug.phonegap.com/ 20
21. DESKTOP 21
25. Native web-based desktop apps with node-webkit • Basically same idea as PhoneGap – Provide a framework & tools to create native desktop apps from an HTML5/JS codebase – App shell, native APIs, plugins – Automatically “offline” • Created & developed at Intel • Based on Chromium and node.js – Embed node.js in a Chromium-based executable 25
26. Chromium content module • Core code needed to render a page using a multi-process sandboxed browser – Includes all the web platform features (i.e. HTML5) and GPU acceleration – Made for embedding 26
27. Runs on major desktop OSes 27 • Including support for native features via JS API
28. Packaging & distribution 28
29. “Hello” – yes… • Create a package.json file to describe the app • Take your html, js etc. files and ZIP them up, name it .nw • Execute your .nw file with nw.exe – OR • Merge .nw into a custom EXE: 29 { "name": "nw Demo App", "main": "index.html", "window": { "title": "Hello World Demo", "icon": "demo.ico", "width": 1024, "height": 768, "toolbar": false } } copy /b nw.exe+app.nw app.exe
30. Packaging tools • Easy packaging on Windows – nodebob: batch file to build Windows EXE and place necessary DLLs – Enigma VirtualBox: shrink all needed files into one EXE • Easy packaging on all platforms – nw-tools: one command creates executables for all platforms (Windows, Linux, MacOSX) 30
31. Extensibility • To use native platform features – node.js modules – NPAPI plugins 31
32. Debugging • Chrome debugging tools can be accessed from within application – Via a menu item – Via API 32
33. Building ‘real’ apps • JavaScript MVC client frameworks, e.g. – AngularJS very popular: “HTML5 done right” • CSS3 frameworks, e.g. – jQuery Mobile – Kendo UI Mobile – Ratchet – Lungo – Topcoat – Bootstrap et. al. • Optionally: UI components – Open source frameworks – Commercial offerings – Often does not really fit good into MVC framework of choice 33
34. Summary • Leverage HTML5 & JavaScript skills for mobile or desktop apps • Building mobile hybrid apps gets easier with PhoneGap 3.0 • node-webkit makes building desktop application a breeze • MVC-style JS frameworks like AngularJS make development & maintenance a breeze – Combined with optimized CSS frameworks 34
35. Resources • christian.weyer@thinktecture.com • http://www.thinktecture.com • Christian Weyer’s GitHub Repositories – https://github.com/ChristianWeyer?tab=repositories • PhoneGap Developer Platform Guides – http://docs.phonegap.com/en/edge/guide_platforms_index.md.html • Apps built with PhoneGap – http://phonegap.com/app/feature/ • Cordova Plugins Registry – http://plugins.cordova.io/#/_browse/all 35
36. Resources • node-webkit – https://github.com/rogerwang/node-webkit • nodebob – https://github.com/geo8bit/nodebob • nw-tools – https://github.com/owenc4a4/nw-tools 36