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

Download Cross-Platform Phone Apps & Sites with jQuery Mobile Cross-Platform Phone Apps & Sites with jQuery Mobile

Post on 28-May-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • 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 JavaScript Framework

    jQuery UI jQuery 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

    http://developer.android.com/sdk http://dev.windowsphone.com/ http://www.opera.com/developer/mobile-emulator 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, 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: activenick@infragistics.com