Desktop oder Mobile: Installierbare HTML5-Anwendungen

Ein Vorurteil hält sich hartnäckig, aber HTML oder webbasiert bedeutet nicht nur "online im Browser" oder “direkt vom Web Server”. 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, sie jedoch über die App Stores vertreiben können? Und natürlich soll alles auch ohne Netzwerkverbindung funktionieren. In dieser Session sollten Sie Antworten auf Ihre Fragen und Bedenken finden.

Transcript

1. Christian Weyer | Thinktecture AG Desktop oder Mobile: Installierbare HTML5-Anwendungen think mobile!
2. Christian Weyer • Solution architect and principal consultant at Thinktecture AG • Focus on – Mobile & web-based application architectures – Interoperability, cross-device – Pragmatic end-to-end solutions – Windows Server, ASP.NET, Web API, SignalR, JavaScript, AngularJS, Microsoft Azure • Microsoft MVP for ASP.NET (Architecture) • ASP.NET Web API Advisory Board Member • ASPInsider • AzureInsider • 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 Cordova/PhoneGap • (Windows, MacOSX, …) Desktop apps with node-webkit 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 4
5. Development 5
6. HTML5 platform • HTML5 ~= Semantic markup + CSS3 + JavaScript • An application development platform • Which browser? 6
8. Client-side programming: AngularJS • MVC (actually MVVM) framework for client-side JavaScript programming – Separation of concerns – Data/model binding – Declarative markup via directives – Dependency injection • Building applications: Leverage power of the browser (including offline storage) • Mobile frameworks which are built on AngularJS – AngularJS team itself works on mobile improvements 8
9. Look & feel: CSS UI frameworks • General purpose CSS3 frameworks – E.g. Bootstrap – One codebase for all devices & form factors – Use responsive design • Optimized mobile CSS3 frameworks, e.g. – jQuery Mobile – Kendo UI Mobile – PhoneJS – ChocolateChip-UI – Ratchet – Topcoat – Lungo – Ionic 9
10. Mobile 10
12. Native web-based mobile apps: Cordova/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 12
13. 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 13
14. Platform support 14
16. 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 16
17. “Hello” – yes… • Create PG app project • Build app • Test app 17 $ phonegap create hello com.example.hello HelloWorld $ cd hello $ phonegap build ios $ phonegap build android $ phonegap install android $ phonegap install ios
18. 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 18 $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
19. 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 19
20. 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 20
21. Performance • iOS8 has new web view component (WKWebView) – Enables JavaScript JIT-ing – Integration into Cordova pending • Use Chromium-based engine in Android – Always, indpendent rom OS version – CrossWalk project – Cordova integration for CrossWalk 21
22. Debugging • Native IDEs to debug plugin code • Safari Web Inspector or Google Chrome 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/ 22
23. Desktop 23
25. Native web-based desktop apps 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 • Including support for native features via JS API 27
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: { "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 29
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. Summary • Leverage HTML5 & JavaScript skills for mobile or desktop apps – AngularJS is powerful client-side programming framework • Building mobile hybrid apps easy with Cordova/PhoneGap 3 • node-webkit makes building desktop application a breeze • MVC-style JS frameworks like AngularJS make development & maintenance a breeze – Combined with optimized CSS frameworks 33
34. Resources • christian.weyer@thinktecture.com • http://www.thinktecture.com • Demo-Anwendung – https://github.com/ChristianWeyer/myProducts-End-to-End • 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 34
35. Resources • Ionic Framework – http://ionicframework.com/ • node-webkit – https://github.com/rogerwang/node-webkit • nodebob – https://github.com/geo8bit/nodebob • nw-tools – https://github.com/owenc4a4/nw-tools 35