Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Download as pptx, pdf1 like17,163 views
The document discusses building mobile web apps using ASP.NET MVC, HTML5, and jQuery Mobile. It introduces ASP.NET MVC and its design goals of embracing the web and being extensible. jQuery Mobile is presented as a touch-optimized web framework for developing mobile web apps that work across devices. The document demonstrates building a sample mobile web app with ASP.NET MVC and jQuery Mobile that reviews restaurants. It concludes that this is a flexible full-featured framework for mobile web development.
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
- 1. Jon Cortez Regional Practice Director Custom App Dev & Mobility Neudesic building mobile web apps using ASP.NET MVC, HTML5 & jQuery Mobile
- 2. Agenda Introduction ASP.NET MVC Mobile Development jQuery Mobile Conclusion Q&A
- 3. Introduction Who am I? DLSU Alumni (Catch 92) Currently lives in Seattle, WA RPD for PacWest Region at Neudesic (www.neudesic.com) Area of focus is Custom Application Development and Mobility Contact Info Email: jcortez@gmail.com LinkedIn: http://www.linkedin.com/in/jcortez
- 4. Introduction Why mobile development? Over a billion mobile devices with rich web capabilities Study conducted on May 2011 shows that 90 of Top 200 sites have no mobile version Mobile devices are becoming the primary way that most people access the web
- 5. Introduction Goals for this session Introduce Mobile Web Development Writing your first mobile web app using ASP.NET MVC, HTML5 and jQuery Mobile that targets multiple platforms and form factors (phones, tablets, desktop) Spark interest in Mobile Web
- 6. Introduction Pre-requisites for this session Familiarity with HTML and web development Experience with ASP.NET development is important Understanding of jQuery will be useful
- 7. ASP.NET MVC Microsoft ASP.NET Frameworks ASP.NET Web Forms ASP.NET MVC Web Forms Original design from late 90s Strongly typed compiled code replaced script Abstract away the web Click events replaced POST operations Competes against other MVC frameworks Struts Ruby on Rails Django
- 8. ASP.NET MVC ASP.NET MVC Design Goals Does not replace Web Forms but provides an alternative framework Still runs on ASP.NET Caching, modules, master pages, providers, handlers, session state Embrace the web No illusions of state no page lifecycle Clean URLs and clean HTML Extensible and pluggable framework Pluggable view engines Support for Dependency Injection Testable Maintains a strict separation of concern
- 9. ASP.NET MVC MVC Design Pattern Controller Model View
- 10. ASP.NET MVC Development Tools Visual Studio 2010 Premium Edition IIS 7.5 SQL Server 2008 R2 Alternatively, free version via Web Platform Installer at http://www.microsoft.com/web/downloads/platform.aspx Visual Web Developer 2010 Express IIS 7.5 Express SQL Server 2008 R2 Express ASP.NET MVC 3
- 11. ASP.NET MVC Demo: Your first ASP.NET MVC app
- 12. ASP.NET MVC Demo Business Requirements Ability to post restaurant information Ability to rate a restaurant Ability to post a review of a restaurant Technical Requirements Must run on IIS Must use SQL Server Must support major web browsers Must be mobile-enabled
- 13. Mobile Development Mobile 2.0 Similar to the web boom in the 90s Most companies need/want a mobile app Opportunity to still get in early Evident on mobile platform: Windows 8 and Mac OS X Lion
- 14. Mobile Development US Smartphone Market Share (Jun, 11) RIM iOS Android WM6/WP7 Palm Other
- 15. Mobile Development Native Client Mobile Web Monetization Skills Transfer Offline Multiple Platforms Performance No Deploy/Update Device Features Run on Desktop
- 16. Mobile Development Functionality Native Application Mobile Web (HTML5) Geo Location Yes Yes Local Storage Yes Yes Offline Yes Yes Phone Dialer Yes Yes (through URL) Maps Yes Web control only Contacts Yes Camera Yes Accelerometer Yes File System Yes Push Notifications Yes
- 17. Mobile Development Native Develop using original platform tools For iOS Objective-C Mac OS X Cocoa Touch SDK For Android Java Android Application Framework Learning curve No code reuse Great user experience
- 18. Mobile Development Mobile Web Use subset of HTML / JavaScript / CSS Native mobile browser or hosted shell Use of mobile JavaScript framework: jQuery Mobile, Sencha Touch, jQTouch, iUI, etc. Write once, works anywhere Downside Common denominator Hardware interaction Can be slow Doesnt feel like a native app
- 19. Mobile Development Other approaches Mono Touch / Mono for Android PhoneGap Appcelerator
- 20. jQuery Mobile What is jQuery Mobile? A touch-optimized web framework Developed by the jQuery project team Focused on compatibility with a wide variety of smartphones and tablets Current version is jQuery Mobile 1.0
- 21. jQuery Mobile Top 10 Features 1. Built on jQuery core for familiarity 2. Lightweight (~ 20K download size) 3. HTML Markup Configuraton do a lot before writing any JavaScript 4. Progressive Enhancement core functionality works on all base platform 5. Automatic Initialization based on data-* attributes in HTML5 6. Accessibility based on WAI-ARIA 7. Touch and mouse event support 8. UI Widgets great selection of native looking controls 9. Themed Framework support for alternative CSS 3.0 based themes 10. Broad Platform Support works on a variety of smartphone and tablet devices
- 22. jQuery Mobile What you need to develop in jQuery Mobile Your favorite IDE for HTML Visual Studio, Eclipse, TextMate A web browser capable of inspecting HTML elements / JavaScript debugging Google Chrome, Safari, IE9 Device or emulator for testing your application Mac (iOS Simulator), iPhone, iTouch, iPad if targeting iOS devices Android device or Android Emulator
- 23. jQuery Mobile Getting Started Create a regular web application Include references to jQM CSS and JS files <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" /> <script src=/jcortez2012/building-mobilewebapp/"http:/code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script> Include viewport reference <meta name="viewport" content="width=device-width, initial-scale=1" /> Create markup using HTML5 data-* attributes to define page, header, content, and footer
- 24. jQuery Mobile Demo: Mobify Chibog Reviews
- 25. Conclusion ASP.NET MVC + jQuery Mobile is a flexible, full-featured framework for building mobile web apps that target multiple platforms and form factors Investment and brand behind jQuery Mobile puts it in a good position to be the de facto standard framework Web developers can easily transition to mobile development
- 26. Resources ASP.NET MVC - http://www.asp.net/mvc jQuery Mobile http://jquerymobile.com My blog http://joncortez.azurewebsites.net
- 27. Q&A Questions?