Cross-Platform Phone Apps & Sites with jquery Mobile Nick Landry, MVP Senior Product Manager Infragistics Nokia Developer Champion activenick@infragistics.com @ActiveNick www.activenick.net
Who is ActiveNick? Senior Product Manager, Mobile & Data Visualization Developer Tools Infragistics Microsoft MVP: Windows Phone Development Mobile Publisher Big Bald Apps: http://bit.ly/bbawp Nokia Developer Champion Speaker. Blogger. Author. Tweeter. Gamer 20+ Years of Professional Experience Specialties: Mobile Development Location Intelligence & Geospatial Systems Data Visualization, HPC, Cloud Mobile Game Development Blog: www.activenick.net Twitter: @ActiveNick
Agenda Web Development Primer: HTML5, CSS & JavaScript Getting Started with jquery Mobile (JQM) Common IDEs for JQM Mobile Development Testing & Debugging via Mobile Emulators Mobile Hybrid Apps with PhoneGap Samples / Demos Learning References & Next Steps Q&A at the end please!
Mobile Platform Choices
Web Development Primer HTML5 & CSS3 HTML5 opens the door for new advanced (i.e. modern) web techniques HTML5 paves the way for JavaScript to go beyond standard HTML HTML5 is a LOT about JavaScript APIs Most mobile browsers support HTML5 HTML5 still allows some degree of backward compatibility with older browsers via progressive enhancement jquery Mobile creates web apps from standard and semantic HTML5 Advanced knowledge of HTML5 & CSS3 is NOT required for JQM development Modern Techniques Enabled Offline access and storage Web sockets Geolocation access Accelerometer and gyroscope support Animations, 2D and 3D transformations Gradients and visual effects Viewport management (for zooming support inside the browser) Webapp installation metadata Integration with native applications Multimedia support Graphic drawing (vector and bitmap) Custom font support
jquery UI vs. jquery Mobile jquery UI jquery Mobile jquery JavaScript Framework jquery Mobile gives you: Pages & Dialogs AJAX Navigation & Transitions Content & UI Widgets Responsive Design Theming Support for ios, Android, Windows Phone, BlackBerry, Symbian, Bada, Palm WebOS, MeeGo Start at http://jquerymobile.com
Sites Built With jquery Mobile
Demo Building our First JQM App
jquery Mobile IDEs Notepad / Notepad++ Microsoft Visual Studio 2012 Be sure to install Web Essentials 2012 Sublime jsfiddle.net JSBin.com Codiqa Adobe Dreamweaver JetBrains WebStorm Aptana Studio 3 Eclipse More at jquerymobile.com/resources/#apps
Emulators for JQM Debugging/Testing Chrome Desktop Browser with Dimensions Extension Android Emulator Install the Android SDK from http://developer.android.com/sdk ios Simulator (Mac) On Windows: Electric Mobile Studio (via Visual Studio Gallery) Windows Phone Emulator Requires VS2012 & Windows Phone 8.0 SDK: http://dev.windowsphone.com Opera Mobile Emulator for desktop http://www.opera.com/developer/mobile-emulator Always a good idea to test on physical devices Xamarin Test Cloud (upcoming) http://xamarin.com/test-cloud
Demo Digging Deeper into JQM
Mobile Hybrid Apps PhoneGap and its Derivatives
Cross-Platform Mobile Apps Design & build the mobile app using HTML5, CSS3, & JavaScript Wrap it with Adobe PhoneGap Free Cordova open source framework or PhoneGap build Get access to native APIs (camera, compass, file, accelerometer, contacts, geolocation, etc.) Deploy to multiple platforms ios, Android, Windows Phone, Blackberry, WebOS, Symbian, etc. Red Gate s Nomad brings PhoneGap to Visual Studio developers www.vsnomad.com
Cordova, PhoneGap, Nomad, etc. Pros Write once in HTML5 & JavaScript, deploy to multiple device platforms Code reuse Reuse existing Web expertise Lower development costs when targeting 2+ platforms Faster time to market on 2+ platforms Simplified deployment with cloud builds Modular architecture with plugins JQM adaptive rendering to emulate the device s native UI Red Gate s Nomad brings Cordova to Visual Studio + build in the cloud Cons Single UI = Generic design that doesn t feel at home on multiple device platforms Browser discrepancies Inferior tooling Learn new JavaScript frameworks: jquery UI, JQM, Knockout, Twitter Bootstrap, etc. Performance considerations Limited to device APIs exposed by PhoneGap vs. native platform APIs Reactionary to native platform changes High-end & 3D graphics limited / impossible Vendor lock-in
Cross-Platform Design?
Summary Mobile Web Sites provide a better smartphone experience than a desktop view on a 4 screen jquery Mobile gives you all the facilities to easily create mobile websites that adapt to all devices JQM mobile apps can be wrapped into mobile hybrid apps deployable on ios, Android, WP, etc. Get started at jquerymobile.com
Ignite UI HTML5 & jquery Web Dev Feature-rich HTML5 / jquery / MVC controls 20+ jquery UI controls 19 jquery Mobile controls 8 jquery frameworks Touch enabled UI features across all controls Fastest jquery Grid on the market Market leading Data Visualization controls High performance Data Chart: The most advanced HTML5 charting suite on the market: 40 built-in types! Also Geographic Map, Radial Gauges, Doughnut, Pie, Funnel, Sparkline Charts Full ASP.NET MVC support Full pure HTML5 client-side support 100% jquery UI & JQM Compliant No vendor lock-in!
Ignite UI for HTML5 & jquery Developers
Ignite UI Geographic Map
Ignite UI 13.1: Pivot Grid+View & More
Ignite UI HTML5+jQuery Controls Responsive Design Broad Data Source Support KnockoutJS Support Advanced Layouts
Other Technical Resources Official jquery Mobile Resources http://jquerymobile.com/resources Pluralsight Online Training www.pluralsight.com/training/courses/find?searchterm=jquery+mobile Mobile Web Development IDEs Sublime: www.sublimetext.com JSFIDDLE: http://jsfiddle.net JSBin: http://jsbin.com Codiqa: http://codiqa.com JetBrains WebStorm: www.jetbrains.com/webstorm Infragistics Ignite UI Controls for jquery UI and JQM www.infragistics.com/products/jquery ActiveNick s Big Bald Blog www.activenick.net
Recommended JQM Learning References jquery Mobile: Up and Running (Firtman, O Reilly) http://amzn.to/15olkce jquery Mobile (Reid, O Reilly) http://amzn.to/1aacd6k jquery, jquery UI, and jquery Mobile: Recipes and Examples (de Jonge, Addison-Wesley) http://amzn.to/1eb5khe 20 Recipes for Programming PhoneGap: Cross-Platform Mobile Development for Android and iphone (Munro, O Reilly) http://amzn.to/18sohjc
Thank You! Slides and demos will be posted on my blog at www.activenick.net. Let me know how you liked this session. Your feedback is important and appreciated. Blog: www.activenick.net Twitter: @ActiveNick Email: activenick@infragistics.com Mobile Apps: bit.ly/bbawp LinkedIn: www.linkedin.com/in/activenick Website: www.infragistics.com Facebook: www.facebook.com/infragistics Infragistics Twitter: @infragistics