Ten good practices for ASP.NET MVC applications

Transcription

1 Ten good practices for ASP.NET MVC applications Dino Esposito facebook.com/naa4e

2 Options for Web development Fully serverside Fully clientside Hybrid SPA

3 And the winner is ASP.NET MVC

4 10 Good Practices 1. Mix with Web Forms 2. Distinct models 3. Thin controllers 4. Project folders 5. Bundling 1. Localization 2. Responsiveness 3. Image handling 4. Smart Ajax 5. SignalR

5 1 Mixing Web Forms and ASP.NET MVC Keep on writing Web Forms apps in VS 2015 by targeting the.net 4.6 framework Current apps will run on ASP.NET5 unchanged Web Forms, MVC 5, Web API 2, SignalR 2, Entity Framework 6 ASP.NET next Full.NET CLR Core CLR X-platform Use the full.net CLR to run legacy apps because only this CLR provides full backward compatibility.

6 1 Mixing Web Forms and ASP.NET MVC MVC and Web API unified One controller class Forget about Web API ASP.NET MVC 6

7 2 The M in Model-View-Controller Input model public ActionResult Add(int courtid, int length, int hour, string name) public ActionResult Add(BookingInputModel input) View model public ActionResult Index() { var model = _homeservice.getindexviewmodel(); return View(model); }

8 2 The M in Model-View-Controller Input DOMAIN LAYER Domain model USER INTERFACE APPLICATION LAYER View Persistence model

9 3 Very Thin Controllers Controllers belong to the presentation layer Bound to HTTP context No need of unit tests (most of the time)

10 3 Very Thin Controllers Controllers belong to the presentation layer public class HomeController { public HomeController(IHomeService service) { _service = service; } } public ActionResult Index() { var model = _service.getindexviewmodel(); return View(model); }

11 4 Project Folders Application layer Presentation layer

12 4 Project Folders Backend (CQRS) ASP.NET

13 5 Resource Bundling On production sites there are no reasons not to bundle and minify all CSS and JavaScript files. Bundling is grouping multiple files in a single download. Minifying is reducing the size of CSS/Script files

14 5 Resource Bundling var bundle = new Bundle("~/mycss"); bundle.include("~/content/styles/*.css"); bundles.add(bundle);

15 6 Localization 1. Let users choose but remember choice 2. Look at browser settings 3. Look at geolocation There s more than just text to localize CSS and scripts Views Outputcache

16 7 Responsiveness <div class="container"> <div class="row"> <div class="col-xs-6 col-md-4"> Column #1 </div> <div class="col-xs-6 col-md-4"> Column #2 </div> <div class="col-xs-6 col-md-4"> Column #3 </div> </div> </div> <div class="hidden-xs col-md-4"> Column #3 </div> Bootstrap

17 7 Responsiveness <script type="text/javascript"> if (screen.width <= 640) { window.location = " } </script> <script src=" <script type="text/javascript"> if (WURFL.form_factor == "smartphone") { window.location = " } </script>

18 8 Image Handling Responsive images is using different images for different situations Browsers to select the most appropriate image from a range of choices Via a new HTML element Pixel density for high resolution displays <picture alt=""> <source media="(min-width: 992px)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 640px)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg"> </picture>

19 8 Image Handling WURFL Image Taylor Detect device and resize image appropriately Can crop and resize to given dimensions WIT is available today: /m_cropbox/w_100/h_100/ <img src="//wit.wurfl.io/

20 9 Smart Partial Rendering MVC native partial rendering Ajax.BeginForm Handmade Ajax via jquery/json endpoints AngularJS KnockoutJS template binding

21 9 Smart Partial Rendering MultipleActionResult DEMO

22 10 SignalR HTML Dynamically refreshed JSON

23 10 SignalR Pages receive notification when a relevant state change occurred on the server. Plain notification Plain JSON data

24 Thank You! facebook.com/naa4e software2cents.wordpress.com Project MERP