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
![Page 1: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/1.jpg)
Mobile ASP.NET Web Forms Making the Impossible Possible
![Page 2: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/2.jpg)
![Page 3: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/3.jpg)
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
![Page 4: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/4.jpg)
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
![Page 5: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/5.jpg)
Why Mobile Web?
NaFve
Hybrid
Web
NaFve
Hybrid
Web Penetra7on Cost
![Page 6: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/6.jpg)
Desktop Web in a Mobile Browser Looks like…
![Page 7: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/7.jpg)
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!
![Page 8: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/8.jpg)
Why is Web Forms mobile possible NOW? • Device DetecFon
• Model Binding / Value Providers
• Clear control markup
• Less need for full page life-‐cycle
![Page 9: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/9.jpg)
• 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
![Page 10: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/10.jpg)
Mobile Detec7on in Web Forms
• FriendlyUrls to the rescue!
• Default .mobile.aspx rendering
• AddiFonal se_ngs available by extending WebFormsFriendlyUrlResolver
![Page 11: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/11.jpg)
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
![Page 12: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/12.jpg)
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
![Page 13: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/13.jpg)
Demo
Sample Website configuraFon and walkthrough Adding Mobile CapabiliFes to your applicaFon
![Page 14: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/14.jpg)
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
![Page 15: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/15.jpg)
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
![Page 16: Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014](https://reader034.vdocument.in/reader034/viewer/2022051515/559454a81a28ab8b118b45c3/html5/thumbnails/16.jpg)