At Code Mastery Boston Mike Suarez, Senior Consultant at Magenic talked about Patterns & Technologies including: MVC Pattern, ASP.Net, MVC 3, HTML5, Modernizr, and jQuery

1. Creating Tomorrow’s Web
Applications Using Today’s
Technologies
Mike Suarez
Senior Consultant
email: MikeSu@magenic.com

2. Goals of Presentation
» Discuss these Patterns & Technologies:
» MVC Pattern
» ASP.Net MVC 3
» HTML5
» Modernizr
» jQuery
» Create an application from scratch that:
» Consumes the services created in this morning’s session
» Demonstrates the power & ease of use of above technologies

3. MVC & ASP.Net MVC
» MVC
» The Design Pattern known as Model-View-Controller
» ASP .Net MVC 3
» A Framework developed by Microsoft to help facilitate
implementation of the MVC Pattern.

4. Model-View-Controller
» Been around a long time.
» Derived other patterns (i.e. MVP, MVVM)
» Has many implementations
» Major components:
» Model: The Domain (Business Logic)
» View: The UI (UI Logic)
» Controller: Mediates between the Model & View (Input Logic)
» Major benefits:
» Better organized code (Separation of concerns)
» Unit Testability

5. ASP.Net MVC Framework
» Major Components:
» Controller - class of Actions, invoked by HTTP requests.
» View - HTML mixed with C# (or VB) that gets invoked by an Action, rendered
by the View Engine, and displayed by the browser.
» Model - an object that encapsulates business logic, data retrieval & data
persistence.
» Key Features/Benefits:
» Routing - Straightforward handling of HTTP requests.
» Base Classes – Keep your Controller clean, straightforward.
» Convention over Configuration – Simple to implement.
» Scaffolding - Reduces time to get development underway.
» View Engine – Clean blend of HTML and C#.
» Helper Methods – Reduce HTML & saves time.

6. Other concepts you’ll see in the Demo
» ViewModels
» A class to leverage ASP.Net MVC 3 Model Binding.
» Not quite the same as ViewModel in MVVM implementations seen in
WPF & SL.
» Dependency Injection
» Allows Dependencies to be injected into an object at run time.
» Will be demonstrated in the controller’s constructor.
» Gives us the ability to mock up dependencies for automated unit tests.
» Although our implementation doesn’t fully adhere to the Dependency
Inversion Principle, ASP.NET MVC 3 contains an IDependencyResolver
interface for that.
6

7. What is HTML5?
» Goals:
» A more stringent set of guidelines for how layout engines implement
existing tags/attributes.
» An updated set of tags and attributes to allow you to do more with
HTML.
» Benefits:
» Better compatibility among browsers.
» Richer web experience.
» Onus on browser (layout engine) to implement.
» Less coding/dependence on plug-ins
7

8. Modernizr
» Reality about HTML5... Great concept, but...
» Specification is a “living document”.
» No completion date in sight.
» Browsers are adopting the specs at different rates.
» Therefore
» Feel free to use new HTML5 features.
» But be prepared that the intended cross browser compatibility is still a
ways away.
» Modernizr
» A lightweight JS library to assist in:
» Detecting if certain new features are implemented in the browser your app is
running in.
» Handling cases where features haven’t been implemented by the browser.
8

9. jQuery
» What is jQuery?
» THE JavaScript library of JavaScript libraries.
» Used by over 55% of the 10,000 most visited websites.
» Reasons for Popularity
» Provides extensive functionality.
» Takes cross browser issues into account.
» Allows DOM elements to be “queried” with same ease of CSS
selectors.
» Drastically reduces the amount of JS code.
9

10. Without further ado…
»Lets Start
Coding!!!
10