Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery Mobile, Backbone, and ASP.NET MVC

0 views

Published on

jQuery Mobile makes it easy to create sites for mobile devices, but it is mostly about UI. In this session I will show how to combine jQuery Mobile with Backbone.js and a ASP.NET MVC back-end. The result is a website which is fast, efficient, and easier to maintain.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

jQuery Mobile, Backbone, and ASP.NET MVC

  1. 1. jQuery Mobile, Backbone, and ASP.NET MVCA Framework for Making Mobile Web Applications SpeakerRate - http://spkr8.com/t/11621
  2. 2. Who am I?I am a Microsoft Certified Solution Developer and I’vebeen developing software since 1979. Since 2009, I havebeen focused on developing mobile applications, for iPhone, Android, the mobile web, and Windows Phone 7.
  3. 3. What we aren’t going to cover• HTML 5• Client Side Validation• SQL Server or other databases• Security• Offline
  4. 4. What We Will Cover   • Web Apps. vs Device Apps.• Components• Framework• Why Do It This Way?• Tools of the Trade• Tips from the Trenches• Summary
  5. 5. Web Apps Device Apps Can migrate web skills Longer learning curve One source base Many source bases Deploy when you want Deployment needs approvalYou 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 Faster
  6. 6. Components• ASP.NET MVC• jQuery• jQuery Mobile• Underscore.js• Backbone.js
  7. 7. ASP.NET MVCASP.NET MVC gives you a powerful, patterns-based wayto build dynamic websites that enables a clean separationof concerns and that gives you full control over markupfor enjoyable, agile development. ASP.NET MVC includesmany features that enable fast, TDD-friendlydevelopment for creating sophisticated applications thatuse the latest web standards.
  8. 8. jQuery is a fast and concise JavaScript Library thatsimplifies HTML document traversing, event handling,animating, and Ajax interactions for rapid webdevelopment. jQuery is designed to change the way thatyou write JavaScript.
  9. 9. A unified, HTML5-based user interface system for allpopular mobile device platforms, built on the rock-solidjQuery and jQuery UI foundation. Its lightweight code isbuilt with progressive enhancement, and has a flexible,easily theme-able design. Requires jQuery.
  10. 10. Underscore is a utility-belt library for JavaScript thatprovides a lot of the functional programming supportthat you would expect in Prototype.js (or Ruby), butwithout extending any of the built-in JavaScript objects. 
  11. 11. Backbone supplies structure to JavaScript-heavyapplications by providing models with key-value bindingand custom events, collections with a rich API ofenumerable functions, views with declarative eventhandling, and connects it all to your existing applicationover a RESTful JSON interface.Requires Underscore and jQuery.
  12. 12. The Framework• ASP.NET MVC  • Serves the initial page • Serves data in a RESTful fashion• jQuery/jQuery Mobile  • Handles the UI• Backbone  • Handles the data on client• The Kernel • Ties the pages and the JavaScript together
  13. 13. Why Do It This Way?• Best User Experience (think speed)• Lower Server Utilization• Easier Maintenance
  14. 14. Tools of the Trade• Chrome Browser (other webkit browser)• Fiddler2• Opera Mobile Emulator• Adobe Shadow (WEINRE)
  15. 15. 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 Device
  16. 16. Next Steps• Download the source code and play with it• Minify the code• Use CDNs for open source code
  17. 17. SummaryjQuery Mobile is an easy to use framework which enables you to create mobile apps quickly. 
  18. 18. 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/• Opera - http://www.opera.com/developer/tools/mobile/• Adobe Shadow - http://labs.adobe.com/technologies/shadow/
  19. 19. Books jQuery Mobile Jon ReidSebastopol, CA: O’Reilly Media Inc., 2011 Master Mobile Web Apps with jQuery Mobile 2nd ed. Matt Doyle Brighton, UK: Elated Communications Ltd, 2011
  20. 20. Please Rate My Talk: SpeakerRate - http://spkr8.com/t/11621 The Source Code is on GitHub at:https://github.com/Rockncoder/JQMContacts

×