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, 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. Agenda • ‚Modern‘ applications, HTML5 & JavaScript • (iOS, Android, Windows Phone, …) Mobile apps with PhoneGap • (Windows, MacOSX, …) Desktop apps with node-webkit 2
3. 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 3
4. Development 4
5. HTML5 platform • HTML5 ~= Semantic markup + CSS3 + JavaScript • An application development platform • Which browser? 5
7. 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 • *Application*: Leverage power of the browser (including offline storage) • Issues with mobile – Code bloating (better with Angular 1.2) – Navigation, Touch • First mobile frameworks appear which are built on AngularJS – AngularJS team itself works on mobile improvements 7
8. 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 8
9. Mobile 9
11. Native web-based mobile apps 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 11
12. 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 12
13. Platform support 13
15. 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 15
16. “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 16
17. 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 17
18. 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 18
19. 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 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
23. 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 23
24. 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 24
25. Runs on major desktop OSes • Including support for native features via JS API 25
26. Packaging & distribution 26
27. “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 27
28. 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) 28
29. Extensibility • To use native platform features – node.js modules – NPAPI plugins 29
30. Debugging • Chrome debugging tools can be accessed from within application – Via a menu item – Via API 30
31. Native web-based desktop apps CefSharp • Sometimes we need more fine grained control for integrating native and HTML5/JavaScript applications • CEF: Chromium Embedded Framework – simple framework for embedding Chromium-based browsers in other applications – https://code.google.com/p/chromiumembedded/ • CefSharp – .NET CLR bindings for CEF – written in C++/CLI, can be used from any CLR language – provides both WinForms and WPF web browser control implementations – https://github.com/cefsharp/CefSharp 31
32. Summary • Leverage HTML5 & JavaScript skills for mobile or desktop apps – AngularJS is powerful client-side programming framework • Building mobile hybrid apps gets easier with 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 32
33. 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 33
34. Resources • node-webkit – https://github.com/rogerwang/node-webkit • nodebob – https://github.com/geo8bit/nodebob • nw-tools – https://github.com/owenc4a4/nw-tools 34