Model View Controller

Semplificare il codice e minimizzare i tempi!

Manuel Scapolan info@manuelscapolan.it

Marco Parenzan marco.parenzan@libero.it

10 dicembre 2009

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Agenda

• Il “passato”: Web Forms

• Il “presente”(?): Model

• il “futuro”: MVC

– Alcuni accenni tecnologici

• Demo: MonoRail

• Demo: ASP.NET MVC

• Conclusioni

– Q&A

2

Model View Controller

Semplificare il codice e minimizzare i tempi!

Web Forms

DEMO

Model View Controller

Semplificare il codice e minimizzare i tempi!

Una pagina ASP.NET Web Forms

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Vantaggi di WebForm

• Web Form ASP.NET è stabile e maturo ed è

supportato da molti strumenti e controlli di

terze parti

• Metafora di click tipica dello sviluppo desktop di

Windows

• Astrazione dalle conoscenze di HTML e

JavaScript recuperando invece le conoscenze dei

programmatori Windows

– Necessario introdurre PostBack e ViewState

– Necessario solo .NET

• Forte componentizzazione

• Autocaricamento dei controlli

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Svantaggi di WebForm

• Mancanza della Separation of Concerns

• Non è possibile testare una pagina aspx

• Statefulness difficile da controllare (a scapito

delle prestazioni)

• Difficoltà di accesso ai recenti framework

JavaScript (come jQuery, Dojo e PrototypeJS)

• Il postback rende poco SEO

– Alcuni motori di ricerca addirittura declassano la

pagina

Model View Controller

Semplificare il codice e minimizzare i tempi!

Introduzione al MVC

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Ritorno alle origini

Il web è semplicemente:

• GET

Riceve dati dal server. I parametri sono passati

attraverso l'indirizzo.

• POST

Invia i dati al server per salvarli o perchè siano

elaborati. I parametri vengono passati nel corpo

della richiesta con la forma:

nome1=valore1&nome2=valore2

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!Cos‟è MVC?

• MODEL

– La rappresentazione (specifica per il dominio) dei dati

su cui l‟applicazione opera

• VIEW

– Renderizza il modello in una forma utile

all‟interazione, tipicamente un elemento di interfaccia

utente

– Ci possono essere più viste (rappresentazioni) per un

singolo modello e per finalità diverse

• CONTROLLER

– Riceve l‟input, coordina l‟elaborazione sul model e

dispaccia tutto alla view

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!Cos‟è MVC?

• Model–View–Controller (MVC) è un pattern

architetturale usato in ingegneria del software

• Il pattern isola la business logic dalla

presentation, permettendo:

– Testing

– Indipendenza nello sviluppo

• Non è un concetto nuovo

• Separation of Concerns

– “Separate content from presentation and data-

processing (model) from content.” --Wikipedia

– Originario di SmallTalk nel 1979

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Separation of Concerns

• Questa strutturazione, basata sulla separazione

dei concetti, ha una validità comprovata da

tantissime applicazioni web già realizzate (non

solo MVC)

– Separare la vista dalla logica applicativa permette di

ridisegnare l‟estetica del sito senza toccare la logica.

Questo permette di far interagire in maniera più

produttiva un web designer con il web programmer

– È possibile cambiare la tecnologia di implementazione

delle viste

– Spesso è necessario modificare la logica

dell‟applicazione senza che per questo debba essere

modificata l‟estetica

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

MVC vs WebForms

MVC WebForms

FilterLogica comune (log,

security, ...)

ControllerPrende le decisioni

ed usufruisce dei

servizi

ViewPresenta i dati

FilterLogica comune

(trace, log, error

handling, ...)

PageCode-behind

PageCodice di markup

ControlsCodice di markup

Controlscode-behind

Fonte: Monorail presentation at WebDevelopersCommunity,

Febbraio 2009 (Ken Egozi)

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Per chi sono i framework MVC?

• A chi interessa REST

– Gli Url sono puliti

• A chi interessa SEO

– L‟HTML “pulito” è importante

• Chi preferisce “convention over configuration”

– Oltre all‟MVC, CoC è l‟approccio tipico di Ruby on Rails

• Per chi il testing è importante

• Per chi preferisce lavorare con gli elementi base

del Web

– HTML, Javascript, CSS

• Per chi preferisce i patterns, le astrazioni

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

REST è importante

• Representational state transfer (REST) è un tipo

di architettura software per i sistemi di ipertesto

distribuiti come il World Wide Web

• REST prevede che la scalabilità del Web e la

crescita siano diretti risultati di pochi principi

chiave di progettazione

• Lo stato dell'applicazione e le funzionalità sono

divisi in Risorse WEB

• Ogni risorsa è unica e indirizzabile

usando sintassi universale per uso nei link

ipertestuali

• Tutte le risorse sono condivise come interfaccia

uniforme per il trasferimento di stato tra client

e risorse

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Url

• Gli Url non puntano più ad una pagina fisica

• Un Url è mappato su un controller

– C‟è maggiore flessibilità

– C‟è un routing engine basato sugli Url, con una route

table

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

SEO è importante

• Url più comprensibili e “significativi”

– http://www.host.com/Products/CatalogItem.aspx?id=6

– http://www.host.com/Products/Televisions/Catalog/6

• I motodi di ricerca penalizzano url non statici

che non possono riprodurre

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

HTML pulito è importante

• Non c‟è più necessità di un ViewState o di un

ControlState

• Risposta HTTP più compatta

– Migliore scalabilità

– Migliori performances

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Convention over Configuration

• Configuration

– Informazioni memorizzate in web.config

• Convention

– Seguire le “regole”

• Nomi delle classi

• Nomi delle cartelle

– Alcune possono essere sovrascritte, altre no

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Struttura delle cartelle

• I framework MVC enfatizzano il principio “convenzione su configurazione”– Ci sono delle locazioni standard per ogni tipo di file

• Content– Contiene tutti i contenuti statici (immagini, file css)

• Controllers– Classi controller

• Models– Classi del modello

• Scripts– Contiene i files Javascript, compresi Ajaxe jQuery

• Views– Contiene le viste

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Test-Driven Development

• Il TDD è una metodologia che mette lo sviluppo dei test prima di tutto

– Spesso si scrive il codice di test prima del codice stesso!

• Ci sono tre momenti (Red/Green/Refactor) nello sviluppo TDD:

– Scrivere uno unit test che fallisce (Red)

– Scrivere un test che passa (Green)

– Rifattorizzare il codice (Refactor)

• Vantaggi

– Si scrive prima di tutto il codice strettamente necessario a passare il test

– Ci si concentra su “come” il codice verrà usato (il codice è spesso migliore, più

chiaro)

– I test diventano “parte integrante” dello sviluppo stesso. Servono soprattutto

nel momento in cui si arriva vicino alla deadline!

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Per chi preferisce lavorare con gli elementi base del Web

• ID dei tag “deterministici”

– <div id=“ctl_000_ctl001_textbox”>…</div>

• Javascript is a first-class citizen

– built-in support for „unobtrusive javascript‟

– built-in support per JSON

– built-in support per partial page rendering

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Per chi importa i pattern

• Basta con “double-click here” e codice

organizzato in Event Hadlers

• Approccio invece più object oriented

– Si deriva da classi base

– Override di metodi astratti o virtuali

– Implementare le interfacce

Model View Controller

Semplificare il codice e minimizzare i tempi!

Alcuni concetti

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Controller

• È il centro del modello MVC

• Ogni richiesta (HTTP) è gestita da un controller e

renderizzata da una View

• Senza un controller presentazione e business logic

sarebbero contenute direttamente nella view

– No testability

– No Separation of Conterns

– No Single Responsability

• Il controller è una classe

• La action di un controller è una “Single Responsibility”

• L‟algoritmo di default implementato in MVC per invocare

una action è una “Convention over Configuration”

– Es. In /Product/Details viene invocato il metodo Details()

della classe ProductController

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Consigli per una ControllerAction

• Sono funzioni di coordinamento per la

presentazione

– Tutte le logiche dovrebbero stare in un‟altra classe

• Sono una interfaccia

– Vale anche per i servizi Web

• Non dovrebbero contenere funzioni di accesso ai

dati

– Es. Usare il Repository Pattern

– “Se una ControllerAction non sta in uno schermo, forse

porta dietro più di una responsabilità”

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

“No more file mapping”

• In precedenza non aveva il controllo degli Url

– Filosofia della pubblicazione dei files (aspx, ashx, php,

jsp …)

– <path fisico>=Server.MapPath(<path logico>)

– = Path.Combine(<physical root>, <virtual path>)

• Non molto RESTful

• Per avere il controllo degli UrlUrl Rewriting

– Mappatura di un Url web “qualsiasi” su un path (cioè su

file)

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Controller Actions vs. Urls

• Quale è la relazione tra Controller Actions e Url

– /Product/Index

• Invoca l‟azione Index sul controller ProductController

– /Product

• Invoca l‟azione Index sul controller ProductController

– /Product/Help

• Invoca l‟azione Help sul controller ProductController

– /Product/Details/34

• Invoca l‟azione Details sul controller ProductController, passando come

argomento 34 come Id

• Da dove salta fuori l‟Id?

• Il template di riferimento per gli Url è

– {controller}[/{action}[/{id}]]

– Si può customizzare intervenendo nel file Global.asax (si vedrà dopo)

• Da notare come il Controller si chiami “ProductController”, cioè

con “Controller” finale

– Si usa chiamare un controller con il nome+”Controller” finale, per

essere “rimosso” in fase di Url

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Usare uno o più ViewEngine(s)

• ASP.NET Web Forms— ASP.NET MVC viene fornito con il motore di

visualizzazione di ASP.NET. Ma molti altri sono disponibili– NHaml (pronounced enamel)— NHaml is an implementation of the popular RAILS Haml view

engine for the ASP.NET MVC framework. Distributed under the open source MIT license.

• http://code.google.com/p/nhaml

– Spark— The idea behind the Spark view engine is to allow "the HTML to dominate the flow

and the code to fit seamlessly."

• http://dev.dejardin.org

– Brail— A port of the Brail view engine from MonoRail to the ASP.NET MVC framework. The

Brail view engine is part of the MVCContrib project.

• www.codeplex.com/MVCContrib

– nVelocity— The nVelocity view engine is a port of the Java Apache Software Foundation

Velocity project to the .NET framework. The nVelocity view engine is part of the

MVCContrib project.

• http://www.codeplex.com/MVCContrib

Model View Controller

Semplificare il codice e minimizzare i tempi!

MonoRail

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

MonoRail

• MVC Framework:

– Open source, Apache licence

– Costruito sulla pipeline di ASP.NET:

• Session

• Http Modules

• Authentication/Authorization

• Caching

• etc.

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Come funziona

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Convention over Configuration

URL <-> Action Model View Controller

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Convention over Configuration

./Views/product/view.vm

ControllerView

View Engine

Model View Controller

Per default viene caricata la vista che ha lo

stesso nome della action, ma posso

specificare da codice quale vista caricare:

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

MonoRail in action (1)

• Mappare l'estensione .rails sul filtro aspnet_isapi

34

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

MonoRail in action (2)

• Aggiungere sezione di configurazione nel Web.config

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

MonoRail in action (3)

• Aggiungere i riferimenti alle librerie:

• Castle.Core

• Castle.MonoRail.Framework

• Castle.MonoRail.Framework.Views.NVelocity

• NVelocity

Dipendono dal view engine utilizzato

DEMO

Model View Controller

Semplificare il codice e minimizzare i tempi!

MonoRail

Model View Controller

Semplificare il codice e minimizzare i tempi!

ASP.NET MVC

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

ASP.NET MVC

• È l‟implementazione di Microsoft del pattern

Model-View-Controller in un framework per il

Web in .NET

– Shared source

– Costruito sulla pipeline di ASP.NET:

• Session

• Http Modules

• Authentication/Authorization

• Caching

• etc.

• È una alternativa alle WebForm applications

• È un framework altamente modulare ed

estensibile

• È un framework REST-friendly

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Come funziona

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Convention over Configuration

URL <-> Action Model View Controller

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Routing Engine

URL <-> Action Model View Controller

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Convention over Configuration

./Views/products/view.aspx

ControllerView

View Engine

Model View Controller

Per default viene caricata la vista che ha lo

stesso nome della action, ma posso

specificare da codice quale vista caricare:

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

ASP.NET MVC in action (1)

• Mappare l'estensione .mvc sul filtro aspnet_isapi

– Solo se siamo in IIS 5.x/6.x

44

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

ASP.NET MVC in action (2)

• Web.config IIS 5.x/6.x

• Web.config IIS 7.x

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

ASP.NET MVC in action (3)

• Aggiungere i riferimenti alle

librerie:

• System.Web.Mvc

• System.Web.Routing

• …eventuali ViewEngine

• Non fa parte del .NET

Framework 3.5sp1

– Farà parte del .NET Framework

4.0 (ASP.NET MVC 2.0)

Lo stack ASP.NET aggiornato

.NET Framework 3.5sp1 •Common-Language Runtime 2.0•Base Class Library 3.5

ASP.NET Runtime

•HttpApplication•HttpContext•HttpRequest•HttpResponse

•HttpRuntime•HttpUtility•IHttpHandler•IHttpModule•Authorization

•Authentication•Membership•Caching

ASPX Pages •MasterPages•Themes, Skins•General Templating

ASP.NET WebForms

•Lifecycle•Postback•ViewState•ControlState

ASP.NET MVC •Routes•Controllers•ViewData•ActionFilters

DEMO

Model View Controller

Semplificare il codice e minimizzare i tempi!

ASP.NET MVC

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Alcune imprecisioni su ASP.NET MVC(non del sottoscritto)

• È per tutti

– No, al momento può essere presto ed è meno

“intuitivo” (rispetto alle WebForm)

• È un sostituto per le WebForms

• È il miglior modo per sviluppare applicazioni

Web su .NET

• Bisogna riscrivere tutte le applicazioni WebForm

in MVC

Model View Controller

Semplificare il codice e minimizzare i tempi!

Conclusioni

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!Conclusioni

• Non c‟è un vincitore

– Né lo cercavamo

• C‟è sicuramente qualcosa di nuovo

51

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

• Pro WebForms:

– Adatte allo sviluppo

RAD

– Designer integrato in

Visual Studio

– Molte librerie di

controlli di terze parti

– Ottime per prototipi o

applicazioni

dimostrative

• Contro WebForms:

– Logica di

presentazione

mescolata alla logica

di business

– Difficile da testare

– Pagine pesanti per la

gestione del Viewstate

MVC vs WebForms

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

• Pro MVC:

– Separation of Concerns

(SoC)

– Controllo completo del

codice HTML generato

– Facile da testare

– No Viewstate (alle

volte può essere uno

svantaggio)

– Favorisce

l'estendibilità e la

mantenibilità delle

applicazioni

• Contro MVC:

– No designer (è uno

svantaggio?)

– No controlli di terze

parti o visuali (ancora)

– Iniziale curva di

apprendimento per chi

è abituato alle

applicazioni event-

driven

– Scarsa

documentazione

(MonoRail)

– Scarsa integrazione

con Visual Studio

(MonoRail)

MVC vs WebForms

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

WebForm 4.0 (in ASP.NET 4.0)

• È possibile disattivare o controllare la

dimensione del viewstate

• È possibile utilizzare un modulo HTTP ad hoc per

eseguire la riscrittura URL

– è possibile utilizzare il Web più recente routing API

ASP.NET 3.5 SP1.

• È possibile controllare dettaglio l'ID di elementi,

inclusi gli elementi con ambiti

• L'integrazione di Framework di JavaScript

esterno è più semplice ed efficiente.

• API di gestione della cronologia in ASP.NET 3.5

SP1 più semplice

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Testability

• Unit testing di un controller:

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Link utili (MonoRail)

• Castle Project:

– http://www.castleproject.org

• Blog:

– http://hammett.castleproject.org

– http://ayende.com/Blog

– http://www.kenegozi.com/blog

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Link utili (ASP.NET MVC)

• ASP.NET MVC:

– http://www.asp.net/mvc

• Blog:

– Phil Haack (http://haacked.com/)

– Scott Hanselman (http://www.hanselman.com/)

– Scott Guthrie (http://weblogs.asp.net/scottgu/)

– Simone Chiaretta (http://codeclimber.net.nz/)

– Keyvan Nayyeri (http://nayyeri.net/)

– Ugo Lattanzi (http://www.imperugo.tostring.it/)

– Jeffrey Palermo (http://jeffreypalermo.com/)

– …e tanti altri…

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Libri (ASP.NET MVC)

• MVC in Action

– http://www.manning.com/palermo/

• Beginning ASP.NET MVC

– http://www.google.it/search?hl=it&source=hp&q=Begi

nning+ASP.NET+MVC&meta=&aq=f&oq=

• Professional ASP.NET MVC

– http://www.wrox.com/WileyCDA/WroxTitle/Professio

nal-ASP-NET-MVC-1-0.productCd-0470384611.html

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Manuel Scapolan

blog: http://www.manuelscapolan.it/

email: info@manuelscapolan.it

web: http://www.manuelscapolan.it/

Skype: manuel.scapolan

Messenger manuel@live.it

Twitter: -

community: www.1nn0va.net

Model V

iew

Contr

oller

Sem

plifi

care

il codic

e e

min

imiz

zare

i t

em

pi!

Marco Parenzan

blog: http://blog.codeisvalue.com/

email: marco.parenzan@libero.it

web: http://www.codeisvalue.com/

Skype: marco.parenzan

Messenger marco.parenzan@live.it

Twitter: marco_parenzan

community: www.1nn0va.net

60

Model View Controller

Semplificare il codice e minimizzare i tempi!

Grazie

Q & A