mobile asp.net web forms - making the impossible possible | falafelcon 2014
DESCRIPTION
In this session, I will show you how to take your bland ASP.Net web application and make it available in a form factor for mobile browsers without re-writing your entire application. I will also show you how to scale your application for tablets, and handle all of the functionality in a DRY manner. Key take-aways from this session will include: -Ability to adapt your existing application to handle phone and tablet screen sizes -Ability to re-use logic in your current application in new form factors -Knowledge and comfort around testing your web application for various device screen sizesTRANSCRIPT
Mobile ASP.NET Web Forms Making the Impossible Possible
Now Presen7ng… § Jeffrey T. Fritz § ASP.Net Developer Evangelist for Telerik AJAX controls § MVP, ASPInsider § Tech Ed 2012 Speaker Idol Finalist, 2013 Runner-‐up § 15 years of web development experience § CodeProject.tv + Pluralsight author
§ May 2013 MSDN Magazine: One ASP.Net § DotNetRocks #855, Tablet Show #44, #113 § Yet Another Podcast #98, #106
Introduc7on • Why Mobile Web?
• What makes web forms on mobile bad
• How to add a mobile ‘switch’
• Refactoring for mobile
• Mobile Only with jQueryMobile
• Responsive and Mobile with Bootstrap
Why Mobile Web?
NaFve
Hybrid
Web
NaFve
Hybrid
Web Penetra7on Cost
Desktop Web in a Mobile Browser Looks like…
Why has Web Forms “not worked” for mobile? • ViewState
• Postback
• Clunky Controls • Ugly markup
• <input type="submit" name="ctl00$SideBar$ctl02$ctl00$SearchButton" value="Go" id="ctl00_SideBar_ctl02_ctl00_SearchButton" class="SearchButton" />
• Fat markup
• No Control over Control Rendering!
Why is Web Forms mobile possible NOW? • Device DetecFon
• Model Binding / Value Providers
• Clear control markup
• Less need for full page life-‐cycle
• Adap\ve Rendering • Content is automaFcally sized and shaped appropriately
based on the size and shape of the browser presenFng this content. The most basic example is defining a block at 100% width. More complex examples use CSS frameworks like Bootstrap or FoundaFon
• Alterna\ve Rendering • Content is rendered in a completely different and unique
format, specific for the size and shape of browser requesFng the content. Examples include jQueryMobile and KendoUI Mobile
Mobile Strategies
Mobile Detec7on in Web Forms
• FriendlyUrls to the rescue!
• Default .mobile.aspx rendering
• AddiFonal se_ngs available by extending WebFormsFriendlyUrlResolver
Refactoring for Re-‐Use • Use Task-‐View-‐Presenter approach
• Extract logic from page and move to a Task object
• Your page is now a View
• Create a Presenter object
• Expose page events and properFes for controls to the Presenter
Refactoring for Mobile • Reduce the number of round-‐trips to your web server
• Bundle and Minify your CSS and JavaScript
• Configure JavaScript in BundleConfig.cs
• Configure CSS in bundles.config
• Add references in markup to these bundles
Demo
Sample Website configuraFon and walkthrough Adding Mobile CapabiliFes to your applicaFon
Review • You can mobile-‐enable your applicaFon easily!
• Configure FriendlyUrls
• Bundle your staFc content
• Add bootstrap, jQueryMobile, or KendoUI mobile to your project
• Begin wriFng .mobile.aspx pages today
References • www.jquerymobile.org • www.kendoui.com
• www.getbootstrap.com • www.bootswatch.com
• hbp://blogs.telerik.com/jefffritz/posts/13-‐04-‐15/alternate-‐rendering-‐tricks
• hbp://bit.ly/webformsmobile
