Hybrid & powerful mobile apps with PhoneGap & AngularJS Christian Weyer email@example.com think mobile!
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 6
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 8
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 9
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 10
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 14
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/ 17
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” 18