Downloaded 74 times
Uploaded byTroy Miles
jQuery Mobile, Backbone, and ASP.NET MVC
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.
jQuery Mobile, Backbone, and ASP.NET MVC
- 1. jQuery Mobile, Backbone, and ASP.NET MVC A Framework for Making Mobile Web Applications SpeakerRate - http://spkr8.com/t/11621
- 2. Who am I? Iam a Microsoft Certified Solution Developer and I’ve been developing software since 1979. Since 2009, I have been focused on developing mobile applications, for iPhone, Android, the mobile web, and Windows Phone 7.
- 3. What we aren’tgoing to cover • HTML 5 • Client Side Validation • SQL Server or other databases • Security • Offline
- 4. What We WillCover • Web Apps. vs Device Apps. • Components • Framework • Why Do It This Way? • Tools of the Trade • Tips from the Trenches • Summary
- 5. 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 Faster
- 6. Components • ASP.NET MVC •jQuery • jQuery Mobile • Underscore.js • Backbone.js
- 7. ASP.NET MVC ASP.NET MVCgives 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.
- 8. jQuery is afast 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.
- 9. A unified, HTML5-baseduser 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.
- 10. Underscore is autility-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.
- 11. Backbone supplies structureto 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.
- 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. Why Do ItThis Way? • Best User Experience (think speed) • Lower Server Utilization • Easier Maintenance
- 14. Tools of theTrade • Chrome Browser (other webkit browser) • Fiddler2 • Opera Mobile Emulator • Adobe Shadow (WEINRE)
- 15. 7 Tips fromthe 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. Next Steps • Downloadthe source code and play with it • Minify the code • Use CDNs for open source code
- 17. Summary jQuery Mobile isan easy to use framework which enables you to create mobile apps quickly.
- 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. 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, 2011
- 20. Please Rate MyTalk: SpeakerRate - http://spkr8.com/t/11621 The Source Code is on GitHub at: https://github.com/Rockncoder/JQMContacts
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 This field is changing fast. New tools are constantly introduced and old ones updated. \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 Best possible User Experience (speed is the best feature)\n Quick and responsive\n “How many people here have ever clicked on a button and waited seconds for something to happen?”\n No need to wait for a server response\n Minimal data transfer - Chunky vs. Chatty\n multiple pages - in one HTML page\n no need for extra header info\n 3G data transfers\n Lower Server utilization\n Keep Your Server Dumb\n Filter data early, preferably in DB call\n Don’t render on the server, render on the client\n Easier Maintenance\n Using a framework gives engineers a clue as to where to find things and how to add new things.\n\n
- #15 Chrome Browser (other webkit browser, or Firebug)\n console.log\n setting breakpoints\n debugger\n see network performance, including total amount of data transfer\n JS console allows drilling into JS objects\n see CSS hierarchy of HTML objects\n Fiddler2\n captures and replays web session\n allows simulation of modem speed\n can make direct calls to web services\n Opera Mobile Emulator\n for all webkit based browser\n allows markup visualization and manipulation\n allows you to see the console output\n\n
- #16 Browser MadnessMobile browsers just like their desktop cousins have differences in their implementations. Even versions on the same OS can have differences. This is especially true on Android platforms.\n Use an AnalogChrome for Android, Safari for iOS, and IE for Windows Phone 7\n Use Unique Ids on MarkupUse unique id on all HTML tags through out your application since JQuery loads HTML dynamically. Failure to do this can lead to subtle errors which are extremely difficult to find. This is especially true when dynamically loading pages.\n Reference the active pageBecause JQM manipulates the DOM dynamically, depending on what your code is doing, it is possible for multiple copies of the markup to be in the DOM at the same time. Therefore, use the global, $.mobile.activePage, in your selector queries when referencing a page.\n Use the pageinit event not $(document).ready()\n Avoid Sloppy JavaScriptJavaScript is a harsh mistress. Often when you do something wrong, it will say nothing. Be sure to write JS as cleanly as possible and use tools like JSLint to check for errors.\n Always Test on a Device‘Nuff said\n\n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n