Hybrid and powerful apps with HTML5 & PhoneGap 3.0

Transcript

1. Christian Weyer | thinktecture Hybride und mächtige Apps mit HTML5 & PhoneGap 3.0 think mobile!
2. 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!
3. 3 Agenda •  Mobile apps & HTML5 •  PhoneGap 3.0 overview •  Starter example •  Features & plugins •  Building ‚real‘ apps
4. 4 The world of mobile 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
5. 5 HTML5 platform •  HTML5 ~= Semantic markup + CSS3 + JavaScript •  An application development platform •  Which browser?
6. 6 PhoneGap 3.0 •  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
7. 7 PhoneGap, Cordova – erm, what…? •  In 2011 Adobe/Nitobi donated the PhoneGap codebase to the Apache Software Foundation (ASF) for incubation –  Requirement to ensure intellectual property was unfettered by trademark ambiguity –  Hard requirement to rename PhoneGap in its open source form as a project incubating at Apache •  PhoneGap is a distribution of Apache Cordova –  Think of Apache Cordova as the engine that powers PhoneGap –  Similar to how WebKit is the engine that powers Chrome or Safari, well…
8. 8 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
9. 9 Platform support
11. 11 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
12. 12 “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
13. 13 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  
14. 14 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
15. 15 Plugins (1/3) •  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 –  Based on plugin specification •  Mapping from native implementation class to JS-exposed name in config.xml   •  Online plugin registry –  http://plugins.cordova.io/
16. 16 Plugins (2/3) •  Use cordova.exec()  to communicate between the JavaScript and native environments •  Simple sample cordova.exec(function(winParam)  {},  function(error)  {},    "service",  "action",    ["firstArgument",  "secondArgument",  42,  false]);   window.echo  =  function(str,  callback)  {                  cordova.exec(callback,  function(err)  {                          callback('Nothing  to  echo.');                  },  "Echo",  "echo",  [str]);          };    window.echo("echome",  function(echoValue)  {                  alert(echoValue  ==  "echome");  //  should  alert  true.          });  
17. 17 Plugins (3/3) •  Native programming –  Android Java base class CordovaPlugin from package org.apache.cordova.plugin   –  iOS ObjectiveC base class CDVPlugin   •  Threading – watch out –  iOS: executed in the same thread as the UI. If your plugin requires a great deal of processing or requires a blocking call, you should use a background thread –  Android: JavaScript in the WebView does not run on the UI thread. It runs on the WebCore thread. The execute method also runs on the WebCore thread
18. 18 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. 19 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. 20 Building ‘real’ apps •  JavaScript MVC client frameworks, e.g. –  Kendo UI Mobile commercial offering –  AngularJS very popular: “HTML5 done right” •  CSS3 frameworks, e.g. –  Kendo UI Mobile –  Ratchet –  Lungo (integration with AngularJS: https://github.com/centralway/lungo-angular-bridge) –  Topcoat
21. 21 Some misc. tips •  Test on real devices, really •  That mobile browser 300ms delay thingie –  Don’t forget FastClick •  Beware of CSS ‘acceleration’
22. 22 PhoneGap Build
23. 23 Summary •  Leverage existing HTML5 & JavaScript skills for mobile (or: ‚smart‘) apps •  Building hybrid apps gets easier with PhoneGap 3.0 –  Still a lot of work for tools and IDE builders •  Typical 80/20 scenarios can be easily realized with PG –  For the rest build plugins or embed PG into native apps •  MVC-style JS frameworks like AngularJS make development & maintenance a breeze –  Combined with mobile-optimized CSS frameworks
24. 24 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