cross-platform phone apps & sites with jquery...

24
Cross-Platform Phone Apps & Sites with jQuery Mobile Nick Landry, MVP Senior Product Manager – Infragistics Nokia Developer Champion [email protected] @ActiveNick – www.ActiveNick.net

Upload: vuongnhu

Post on 17-Sep-2018

237 views

Category:

Documents


0 download

TRANSCRIPT

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!

Mobile Platform Choices

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

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 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 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, 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]