29
© 2009 SPR Companies. All rights reserved. MPS Partners An SPR Company Brown Bag Series – 4/10/2012: Targeting Mobile Platform with MVC 4.0 by Mayank Srivastava http:// www.MayankSrivastava.com

Targeting Mobile Platform with MVC 4.0

Embed Size (px)

Citation preview

Page 1: Targeting Mobile Platform with MVC 4.0

© 2009 SPR Companies. All rights reserved.

MPS PartnersAn SPR Company

Brown Bag Series – 4/10/2012:

Targeting Mobile Platform with MVC 4.0

by Mayank Srivastava

http://www.MayankSrivastava.com

Page 2: Targeting Mobile Platform with MVC 4.0

ASP.NET MVC 4 Beta

• HTML 5, a required part of the deal

• Mobile Project Templates

• Display Modes

• jQuery Mobile, View Switcher, browser overriding

• Recipes

• Task<> to support Asynch Controllers

• Bundling support

• Web API Templates

• Single Page Applications

• ~/URL Resolution

Page 3: Targeting Mobile Platform with MVC 4.0

So what is MVC pattern?

Image from Wikipedia.org

Model-View-Controller is an architectural pattern that isolates "domain

logic" (the application logic for the user) from the user interface (input

and presentation), permitting independent development, testing and

maintenance of each (separation of concerns).

Page 4: Targeting Mobile Platform with MVC 4.0

Basics

ASP.NET Web Forms

+ MVC Pattern

= ASP.NET MVC

ASP.NET

+ MVC Pattern

= ASP.NET MVC

ASP.NET == ASP.NET Web Forms

Page 5: Targeting Mobile Platform with MVC 4.0

ASP.NET - The Song Remains The Same

Page 6: Targeting Mobile Platform with MVC 4.0

Web Forms

Request (*.aspx) PageHandlerFactory

Responsible for page processing engine

Create a server form

Execute Page life cycle

Load View state / Control state

Server Form / PageResponse

(Browser understandable content)

Inheriting

System.Web.UI.Page

does the trick.

Page 7: Targeting Mobile Platform with MVC 4.0

So what is MVC pattern?

Model

• Domain-specific representation of data

• Business logic

• Storage layer is an implementation detail

Page 8: Targeting Mobile Platform with MVC 4.0

So what is MVC pattern?

View

• Presents data to the user

• Read-only views as well as forms

• Minimal display-only logic

Page 9: Targeting Mobile Platform with MVC 4.0

So what is MVC pattern?

Controller

• Responds to requests

• Connects models to view

• Invokes model code as appropriate

Page 10: Targeting Mobile Platform with MVC 4.0

MVC based ASP.NET framework

Request (URL)Controller

Response

(Browser understandable

content)

Model

View

-> Get the model (if needed)

-> Bind the model to the view (if needed)

->Render the view

Vie

ws

kn

ow

ho

w t

o p

res

en

t m

od

els

Other related frameworks - http://en.wikipedia.org/wiki/Model%E2%80%93View%E2%80%93Controller

Page 11: Targeting Mobile Platform with MVC 4.0

So what changed…

No Page life cycle

• No Server page, no server controls, only Views!

• Web is state ‘LESS’ environment.

• An asynchronous call should be an asynchronous call.

No View state

• Again, web is state ‘LESS’ environment.

• In hindsight, for the stateless web - state should be Model’s

responsibility, not View’s overhead.

No Postback

• Only Http verbs – Get, Post, Put, Delete.

Page 12: Targeting Mobile Platform with MVC 4.0

Over to Visual Studio

Page 13: Targeting Mobile Platform with MVC 4.0

A Quick comparison

• http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx

• http://demos.telerik.com/aspnet-mvc/grid

Asynchronous when you need

Synchronous when you don’t

Web Forms

MVC

Try reload / paging on Telerik’s WebForm’s Grid and

compare the performance against Telerik’s MVC grid.

Page 14: Targeting Mobile Platform with MVC 4.0

Page 14

Some more Super Hero talk

Page 15: Targeting Mobile Platform with MVC 4.0

Page 15

Routing

It’s all about Routes, not file path.

Application/Controller/Action/Parameter

Or whatever you want

Search Engine Optimization

http://ProductsOnline.com/Products/Details/Batmobile

http://ProductsOnline.com/Products/Catalogs/List/SmartPhones

http://BlogSite.com/Blogs@1/30/2009

Imagine possibilities –

Windows Workflow Foundation

RSS feeds

Window communication foundation

The Browse / Ajaxify Pretty much anything!

Page 16: Targeting Mobile Platform with MVC 4.0

Over to Visual Studio

Page 17: Targeting Mobile Platform with MVC 4.0

Page 17

Deeper dive

Oh and by the way –

ASP.NET MVC, aka System.Web.Mvc, is Open Source

Check out the code on :- http://aspnet.codeplex.com/wikipage?title=MVC

Page 18: Targeting Mobile Platform with MVC 4.0

Page 18

Frequently bought together

Customers Who Bought This Item Also Bought

• n-Tier application architecture (Separation of concern).

• IoC – Inversion of control (Dependency injection).

• TDD – Test Driven Development.

18

Page 19: Targeting Mobile Platform with MVC 4.0

Page 19

Separation of Concern

What concern? Why are you concerned? My application works fine!

Remember Models?

Page 20: Targeting Mobile Platform with MVC 4.0

Page 20

Separation of concern

Model Nothing but POCO

Domain-specific representation of

data

Domain Models

Business logic Business Layer

Storage layer is an implementation

detail

Data Access Layer

Page 21: Targeting Mobile Platform with MVC 4.0

Page 21

Separation of concern

Most Common (rather default) Design Patterns

• Services Based for extendibility

• Repositories for Data Access Layer

Page 22: Targeting Mobile Platform with MVC 4.0

Page 22

DI & IoC

Dependency injection

(Image - http://www.microbotic.org)

• Static kernel based container

• Control over scope (singleton, Request)

• Popular frameworks – Unity (Enterprise Library), StructureMap,

Ninject, Castle Windsor, Spring.NET…

Page 23: Targeting Mobile Platform with MVC 4.0

Page 23

Inversion of Control

Database

Web Client

Services Repositories

ICacheService ICacheRepository

WP7 App

Facebook Canvas

Use HttpCacheService : ICacheService

& SQLCacheRepository : ICacheRepository

Use WPCacheService : ICacheService &

LocalFileCacheRepository : ICacheRepository

Use WPCacheService : ICacheService &

LocalFileCacheRepository : ICacheRepository

How should I handle your cache needs?

Page 24: Targeting Mobile Platform with MVC 4.0

Page 24

Test Driven Development

Why is it the big breakthrough?

http://ASP.NET.WebForms.com/ProductList.aspx

Is it testable? – No… (at least not easily)

http://ASP.NET.MVC.com/Product/List

Is it testable? – Yes!

var product = new ProductController();var result = product.List();

Page 25: Targeting Mobile Platform with MVC 4.0

Page 25

Why MVC

• App Driven Development

• Industry moving towards Usability

• It’s all about user experience

Usability = (Functionality ^ Look) * Feel;

Page 26: Targeting Mobile Platform with MVC 4.0

Page 26

Future?

Is this the end of Web Forms?

Now that MVC is here.

No! That’s ridicules!

(as on Channel9.MSDN.com)

Page 27: Targeting Mobile Platform with MVC 4.0

Page 27

Future?

Flashback

Is this the end of VB?

Now that C# is here.

No! That’s ridicules!However VB can’t be used on some cool stuff

like Window Phone, the .NET Micro Framework

err…I mean VB is equally good.

Page 28: Targeting Mobile Platform with MVC 4.0

Page 28

Resources

Learning Resources:

http://www.asp.net/mvc

http://nerddinner.codeplex.com/

http://blog.wekeroad.com/2010/05/24/mvc-starter-2

Prominent bloggers:

Scott Guthrie - http://weblogs.asp.net/scottgu/

Scott Hanselman - http://www.hanselman.com/blog/

Phil Haak - http://haacked.com/

Rob Conery - http://blog.wekeroad.com/

Jon Galloway - http://weblogs.asp.net/jgalloway/

Stevens Anderson - http://blog.stevensanderson.com/

Brad Wilson - http://bradwilson.typepad.com/

Also:

Me :) - http://AspNetLive.BlogSpot.com/

Page 29: Targeting Mobile Platform with MVC 4.0

Page 29

Questions