Hybrid

Transcript

1. Hybrid Mobile App Development Shawn Jonnet
2. Agenda • Mobile apps & HTML5 • Cordova 3.x • Starter Example • Features Plugins • Building 'real' apps
3. 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 • JavaScript engines V8 / Nitro • Rendering engines Webkit / Blink • Hybrid • HTML5 & JavaScript - put into a native app shell • Leverage native features through plugins • Hybrid deux • Hybrid + explicitly mix native and web elements
4. HTML5 platform • HTML5 ~= Semantic markup + CSS3 + JavaScript • An application development platform
5. Cordova 3.x • A framework & tools to create native apps from HTML5/JavaScript codebase • Start wrapping your HTML5 code into native app shell • Hook into platform features & events • Extend app functionality through plugins • Re-factor • New base architecture • New tools, new APIs
6. Cordova, PhoneGap • 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…
7. Architecture overview • Everything beyond the app shell is based on plugins • Lightweight core • Plugins install via NPM • 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
8. Platform support • Android • Blackberry 10 • iOS • WP 7/8 • Tizen
9. Architecture • 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 • 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 • 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 • 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
10. Debugging • Native IDEs to debug plugin code • Safari Web Inspector to debug HTML5/JS code • On simulator/emulator or device • KitKat Chrome WebView allows Chrome inspector to debug HTML5/JS
11. Tools • Cordova • Grunt • Compass/SASS • AngularJS • Karma
12. Shim + Plugins • View hierarchy • Incremental updates • Integrity check • Crypto storage • MSMaps • Viewdocument • RSA • MiSnap • MSPlaces • MSKeypad / MSKeyboard
13. AngularJS - MVC • Controllers • Directives • Services
14. Tips & Gotchas • Fast click • Request animation frame • Translate3D and TranslateZ • Webkit overflow scrolling • Safar iOS 7 regressions • DB • RAF • Timing