Your SlideShare is downloading. ×
0
jQuery Mobile, Backbone,                     and ASP.NET MVC                       A Framework for Making Mobile Web Appli...
IntroductionTuesday, March 5, 13
Who Am I?                       • Troy Miles                       • Senior Software Engineer w/ 30+ years of             ...
Tuesday, March 5, 13
Intermediate PhoneGap                       • Learn by doing                       • JS best practices, iScroll, Maps, Aja...
You May Get Mad At                                Me                       • Sorry, in advance if I insult your favorite: ...
What we aren’t going                            to cover                       • HTML 5                       • Client Sid...
What We Will Cover                          • Web Apps. vs Device Apps.                       • Components                ...
85% of all US adults                       now own a mobile                             phoneTuesday, March 5, 13
56% of all mobile                    phone owners in the                   US access the internet.Tuesday, March 5, 13
Did you know 80% of customers                 abandon a mobile site if they                  have a bad user experience?Tu...
Web Apps                Device Apps                Can migrate web skills       Longer learning curve                     ...
Components                       • ASP.NET MVC                       • jQuery                       • jQuery Mobile       ...
ASP.NET MVC  ASP.NET MVC gives you a powerful, patterns-based way  to build dynamic websites that enables a clean separati...
jQuery is a fast and concise JavaScript Library that   simplifies HTML document traversing, event handling,   animating, an...
A unified, HTML5-based user interface system for all    popular mobile device platforms, built on the rock-solid    jQuery ...
Underscore is a utility-belt library for JavaScript that      provides a lot of the functional programming support      th...
Backbone supplies structure to JavaScript-heavy     applications by providing models with key-value binding     and custom...
The Framework       •       ASP.NET MVC       •       jQuery/jQuery Mobile       •       The Kernel       •       Backbone...
ASP.NET MVC                        • Serves the initial page                       • Serves data in a RESTful fashionTuesd...
jQuery Mobile                       •   Handles the UI                       •Tuesday, March 5, 13
Backbone.js                       •   Handles the data on client                       •   Models                       • ...
ModelsTuesday, March 5, 13
ViewsTuesday, March 5, 13
CollectionsTuesday, March 5, 13
Why Do It This Way?                       • Best User Experience (think speed)                       • Lower Server Utiliz...
Tools of the Trade       • Chrome Browser (other webkit browser)       • Fiddler2Tuesday, March 5, 13
7 Tips from the Trenches          • Beware of Browser Madness          • Use an Analog          • Use Unique Ids on Markup...
Next Steps                       • Download the source code and play with it                       • Minify the code      ...
Summary             jQuery Mobile is an easy to use framework which                enables you to create mobile apps quick...
Links       •      ASP.NET MVC - http://www.asp.net/       •      jQuery - http://jquery.com/       •      jQuery Mobile -...
Books                              jQuery Mobile                                  Jon Reid                       Sebastopo...
The Source Code is on GitHub at:                          https://github.com/Rockncoder/                                 J...
Upcoming SlideShare
Loading in...5
×

jQuery Mobile, Backbone.js, and ASP.NET MVC

2,725

Published on

Websites designed for smart phones are one of the fastest growing segments of the internet. jQuery Mobile makes it easy to create sites for mobile devices, but it is mostly about UI. It doesn’t address the needs of an enterprise application. Things like how to load data from and persist data to the server, how to tie the JavaScript and HTML together, and minimize the amount of data transmitted. In this session I will show how to combine jQuery Mobile with Backbone.js and a ASP.NET Web API back-end. The end result is a website which is fast, efficient, and easy to enhance and maintain.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,725
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Mobile, Backbone.js, and ASP.NET MVC"

  1. 1. jQuery Mobile, Backbone, and ASP.NET MVC A Framework for Making Mobile Web ApplicationsTuesday, March 5, 13
  2. 2. IntroductionTuesday, March 5, 13
  3. 3. Who Am I? • Troy Miles • Senior Software Engineer w/ 30+ years of experience • Mobile/Mobile Web • iOS, Android, & Windows Phone 7Tuesday, March 5, 13
  4. 4. Tuesday, March 5, 13
  5. 5. Intermediate PhoneGap • Learn by doing • JS best practices, iScroll, Maps, Ajax + more • Saturday, May 18th - 9 AM to 6 PM • $99 - lunch & materials included • http://bit.ly/XlxzYp • CraveLab - Los AngelesTuesday, March 5, 13
  6. 6. You May Get Mad At Me • Sorry, in advance if I insult your favorite: company, device, or personality • I have nothing against any of these companies • I will gladly do a project for any of them, for the right priceTuesday, March 5, 13
  7. 7. What we aren’t going to cover • HTML 5 • Client Side Validation • SQL Server or other databases • Security • OfflineTuesday, March 5, 13
  8. 8. What We Will Cover    • Web Apps. vs Device Apps. • Components • Framework • Why Do It This Way? • Tools of the Trade • Tips from the Trenches • SummaryTuesday, March 5, 13
  9. 9. 85% of all US adults now own a mobile phoneTuesday, March 5, 13
  10. 10. 56% of all mobile phone owners in the US access the internet.Tuesday, March 5, 13
  11. 11. Did you know 80% of customers abandon a mobile site if they have a bad user experience?Tuesday, March 5, 13
  12. 12. Web Apps Device Apps Can migrate web skills Longer learning curve One source base Many source bases Deploy when you want Deployment needs approval You choose when to update User chooses when to update No device memory used Uses device memory Difficult to monetize Monetization is built-in Restricted device access Full access to device hardware Slower FasterTuesday, March 5, 13
  13. 13. Components • ASP.NET MVC • jQuery • jQuery Mobile • Underscore.js • Backbone.jsTuesday, March 5, 13
  14. 14. ASP.NET MVC ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. ASP.NET MVC includes many features that enable fast, TDD-friendly development for creating sophisticated applications that use the latest web standards.Tuesday, March 5, 13
  15. 15. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.Tuesday, March 5, 13
  16. 16. A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design.  Requires jQuery.Tuesday, March 5, 13
  17. 17. Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. Tuesday, March 5, 13
  18. 18. Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface. Requires Underscore and jQuery.Tuesday, March 5, 13
  19. 19. The Framework • ASP.NET MVC • jQuery/jQuery Mobile • The Kernel • BackboneTuesday, March 5, 13
  20. 20. ASP.NET MVC  • Serves the initial page • Serves data in a RESTful fashionTuesday, March 5, 13
  21. 21. jQuery Mobile • Handles the UI •Tuesday, March 5, 13
  22. 22. Backbone.js • Handles the data on client • Models • Views • CollectionsTuesday, March 5, 13
  23. 23. ModelsTuesday, March 5, 13
  24. 24. ViewsTuesday, March 5, 13
  25. 25. CollectionsTuesday, March 5, 13
  26. 26. Why Do It This Way? • Best User Experience (think speed) • Lower Server Utilization • Easier MaintenanceTuesday, March 5, 13
  27. 27. Tools of the Trade • Chrome Browser (other webkit browser) • Fiddler2Tuesday, March 5, 13
  28. 28. 7 Tips from the Trenches • Beware of Browser Madness • Use an Analog • Use Unique Ids on Markup • Reference the active page • Use the pageinit event not $(document).ready() • Avoid Sloppy JavaScript • Always Test on a DeviceTuesday, March 5, 13
  29. 29. Next Steps • Download the source code and play with it • Minify the code • Use CDNs for open source codeTuesday, March 5, 13
  30. 30. Summary jQuery Mobile is an easy to use framework which enables you to create mobile apps quickly. Tuesday, March 5, 13
  31. 31. Links • ASP.NET MVC - http://www.asp.net/ • jQuery - http://jquery.com/ • jQuery Mobile - http://jquerymobile.com/ • Underscore - http://documentcloud.github.com/underscore Backbone - http://documentcloud.github.com/backbone • JSLint - http://jslint.com/Tuesday, March 5, 13
  32. 32. Books jQuery Mobile Jon Reid Sebastopol, CA: O’Reilly Media Inc., 2011 Master Mobile Web Apps with jQuery Mobile 2nd ed. Matt Doyle Brighton, UK: Elated Communications Ltd, 2011Tuesday, March 5, 13
  33. 33. The Source Code is on GitHub at: https://github.com/Rockncoder/ JQMContacts2013Tuesday, March 5, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×