Cross-Platform Phone Apps & Sites with jQuery Mobile
Nick Landry, MVPSenior Product Manager – InfragisticsNokia Developer [email protected]@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!
Web Development PrimerHTML5 & 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 JavaScript Framework
jQuery UIjQuery Mobile
• 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
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
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
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 advancedHTML5 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 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, 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
jQuery Mobile: Up and Running
(Firtman, O’Reilly)
http://amzn.to/15Olkce
jQuery Mobile
(Reid, O’Reilly)
http://amzn.to/1aAcd6K
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.
Facebook: www.facebook.com/infragistics
Blog: www.ActiveNick.net
Twitter: @ActiveNick
Mobile Apps: bit.ly/bbawp
LinkedIn: www.linkedin.com/in/activenick
Website: www.infragistics.com
Infragistics Twitter: @infragistics
Email: [email protected]
Top Related