Cross-Platform Phone Apps & Sites with jquery Mobile

Transcription

1 Cross-Platform Phone Apps & Sites with jquery Mobile Nick Landry, MVP Senior Product Manager Infragistics Nokia Developer

2 Who is ActiveNick? Senior Product Manager, Mobile & Data Visualization Developer Tools Infragistics Microsoft MVP: Windows Phone Development Mobile Publisher Big Bald Apps: 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:

3 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!

4 Mobile Platform Choices

5 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

6 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

7 Sites Built With jquery Mobile

8 Demo Building our First JQM App

9 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

10 Emulators for JQM Debugging/Testing Chrome Desktop Browser with Dimensions Extension Android Emulator Install the Android SDK from ios Simulator (Mac) On Windows: Electric Mobile Studio (via Visual Studio Gallery) Windows Phone Emulator Requires VS2012 & Windows Phone 8.0 SDK: Opera Mobile Emulator for desktop Always a good idea to test on physical devices Xamarin Test Cloud (upcoming)

11 Demo Digging Deeper into JQM

12 Mobile Hybrid Apps PhoneGap and its Derivatives

13 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

14 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

15 Cross-Platform Design?

16 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

17 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!

18 Ignite UI for HTML5 & jquery Developers

19 Ignite UI Geographic Map

20 Ignite UI 13.1: Pivot Grid+View & More

21 Ignite UI HTML5+jQuery Controls Responsive Design Broad Data Source Support KnockoutJS Support Advanced Layouts

22 Other Technical Resources Official jquery Mobile Resources Pluralsight Online Training Mobile Web Development IDEs Sublime: JSFIDDLE: JSBin: Codiqa: JetBrains WebStorm: Infragistics Ignite UI Controls for jquery UI and JQM ActiveNick s Big Bald Blog

23 Recommended JQM Learning References jquery Mobile: Up and Running (Firtman, O Reilly) jquery Mobile (Reid, O Reilly) jquery, jquery UI, and jquery Mobile: Recipes and Examples (de Jonge, Addison-Wesley) 20 Recipes for Programming PhoneGap: Cross-Platform Mobile Development for Android and iphone (Munro, O Reilly)

24 Thank You! Slides and demos will be posted on my blog at Let me know how you liked this session. Your feedback is important and appreciated. Blog: Mobile Apps: bit.ly/bbawp LinkedIn: Website: Facebook: Infragistics