Hybrid & powerful mobile apps with PhoneGap & AngularJS

Transcript

1. Hybrid & powerful mobile apps with PhoneGap & AngularJS Christian Weyer christian.weyer@thinktecture.com think mobile!
2. 2 Christian Weyer • Solution architect and principal consultant at thinktecture • Focus on – Distributed applications, service orientation – Cloud computing – Interoperability, cross device – Pragmatic end-to-end solutions – Windows Server, ASP.NET, Web API, SignalR, WCF, Windows Azure – HTML5, JavaScript, AngularJS • Microsoft MVP for Windows Azure (Architecture) • ASP.NET Web API Advisory Board Member • http://blogs.thinktecture.com/cweyer • christian.weyer@thinktecture.com • @christianweyer think mobile!
3. 3 Topics • HTML5-based applications • AngularJS as smart client JS framework • Mobile UI frameworks • PhoneGap packaging & runtime
4. 4 The world of mobile apps • Native – Full access to everything, best performance – Store deployment – Knowledge of each platform required • Even with ‘C# everywhere’ • 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 What you have to decide • One look and feel for everything – Desktop, tablet, phone – Watch out for app store requirements • Your app looks like the native platform – iOS, Android, Windows Phone • Your app looks like your app – Corporate identity – Watch out for app store requirements
7. 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 • 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
8. 8 Look & feel: 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. 9 Ionic • Designed from the ground up for lightweight mobile apps – Not web pages • Provides one look & UX across devices – Flat design – Adjust styles to your liking • Built with LESS – Compiles to CSS • Built on AngularJS • Plethora of UI components – Available as AngularJS directives
10. 10 Packaging & runtime: PhoneGap 3.x • 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 – CLI tools, new APIs, new platforms – Cloud-based companion PhoneGap Build
11. 11 PhoneGap 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 a JS file which provides API bindings
12. 12 PhoneGap “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 PhoneGap 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 PhoneGap 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 PhoneGap 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 • 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
16. 16 AngularJS & PhoneGap • PhoneGap has its own lifecycle and events • Integrate AngularJS into this lifecycle – Ideally, bootstrap AngularJS upon onDeviceReady • Provide AngularJS services for PhoneGap features & plugins – E.g. accelerometer: https://github.com/btford/angular- phonegap-accelerometer/blob/master/accelerometer.js
17. 17 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/
18. 18 Making it mobile, making it touch • Mobile browsers have 300ms delay for click/touch – FastClick.js • Multi-touch gestures – Hammer.js – Integration with AngularJS • Test on real devices, really – And have them “all”
19. 19 Summary • Leverage existing HTML5 & JavaScript skills for mobile (or: ‚smart‘) apps • Decide about the look & feel of your app • AngularJS is a very powerful & productive client-side JS framework • Several lightweight CSS frameworks available to build lean HTML5 apps • Building hybrid apps gets easier with PhoneGap 3.x – 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
20. 20 Resources • http://blogs.thinktecture.com/cweyer • christian.weyer@thinktecture.com • AngularJS – http://angularjs.org/ • Ionic – http://ionicframework.com/ • PhoneGap Developer Platform Guides – http://docs.phonegap.com/en/edge/guide_platforms_index.md.html • Cordova Plugins Registry – http://plugins.cordova.io/#/_browse/all • My samples – https://github.com/ChristianWeyer • thinktecture Open Source projects – http://thinktecture.github.com/