Template designed by

cert-path70-486: Developing ASP.NET MVC 4 Web Applications

Template designed by

Michele ApontePresidente DotNetCampania - MVP ASP.NET/IISCEO & Co-Founder Blexin Srlsmichele.aponte@dotnetcampania.orghttp://dotnetcampania.org/blogs/michele

Template designed by

brought to you by

Template designed by

• Esame 480: Programming in HTML5 with JavaScript and CSS3

• Esame 486: Developing ASP.NET MVC 4 Web Applications

• Esame 487: Developing Windows Azure and Web Services • (ve ne parlerà Roberto Freato nella sessione delle 13.20)

MCSD: Web Applications

Template designed by

• Design the application architecture (15-20%)

• Design the user experience (20-25%)

• Develop the user experience (15-20%)

• Troubleshoot and debug web applications (20-25%)

• Design and implement security (20-25%)

http://www.microsoft.com/learning/en-us/exam-70-486.aspx

agenda

Let’

s g

o

Design the application

architecture

Template designed by

Asp.Net MVC vi fornisce una naturale propensione alla separazione delle responsabilità:

• La user interface viene definita nelle VIEW

• Le richieste dell’utente vengono gestite dalle ACTION dei CONTROLLER

• La logica business viene gestista dal MODEL dell’applicazione

A seconda dei requisiti che avete decidete se gestire il risultato di una richiesta client-side o server-side

Plan the application layers

Template designed by

Se avete requisiti di scalabilità scegliete tra una soluzione on-premise, on-cloud o ibrida

• Per gestire efficacemente un alto numero di richieste potreste avere più macchine in load balancing a rispondere agli utenti• La gestione della sessione, nativamente in-process, in questi casi va configurata per

essere indipendente dalla macchina che sta servendo la richiesta:

• Database

• State Server

• Cache Distribuita

• Lo stesso vale per le risorse (immagini, file, ecc.): lo storage non deve essere locale alla singola macchina

Design a distributed application

Template designed by

Se decidiamo di ospitare la nostra applicazione web in un cloud service, possiamo intervenire in alcuni punti del ciclo di vita di tale elemento

• OnStart()

• Run()

• StartupTask

Design and implement the Azure role life cycle

Template designed by

Http è un protocollo stateless, sta a noi utilizzare meccanismi di gestione dello stato:

• Cookie

• Local storage

• Query string

• ViewState

• Session

Potete configurare da web.config la vostra strategia e usare provider custom per favorire la scalabilità.

Configure state management

Template designed by

Per migliorare le performance dell’applicazione è possibile implementare varie strategie di caching

• Output caching

• Data caching

• Http caching

• Azure caching

Design a caching strategy

Template designed by

In alcune circostanza può essere utile stabilire una connessione bidirezionale tra client e server, in questo caso possiamo usare le Web Socket

• Upload di grandi quantità di dati in maniera asincrona (long-running data transfer)

• Web games

• Qualsiasi esigenza di comunicazione bidirezionale in real-time

Ovviamente Web Socket deve essere supportato sia dal browser che dal server, in alternativa si possono utilizzare anche tecniche come il long polling. Se si vuole utilizzare una API che astrae al programmatore la tecnica di comunicazione utilizzata è possibile utilizzare SignalR.

Design and implement a Web Socket strategy

Template designed by

Quando una richiesta arriva al nostro server questa viene processata da più moduli HTTP dopodichè affidata a un singolo HTTP Handler

• Creando un modulo HTTP possiamo inserirci nella pipeline di IIS e fornire comportamenti personalizzati nella gestione delle richieste• Implementiamo gli eventi Init(HttpApplication) e Dispose() di IHttpModule

• Eventualmente gestiamo gli altri eventi del ciclo di vita del modulo

• Aggiungiamo l’handler alla pipeline da web.config (sezione <HttpModules>)

• Creando un event handler possiamo fornire il codice da eseguire in risposta ad una particolare richiesta:• Implementiamo l’evento ProcessRequest(HttpContext) e la proprietà IsReusable di IHttpHAndler

• Aggiungiamo l’handler al web.config (sezione <HttpHandlers>)

Design HTTP modules and handlers

Let’

s g

o

Design the user

experience

Template designed by

La definizione della user interface di un’applicazione web è costituita da markup HTML, stili CSS e codice Javascript

• E’ possibile utilizzare media query (sia da CSS che da Javascript) per adattare la UI allo spazio a disposizione

• L’eleborazione dinamica del DOM mediante javascript (e/o jQuery) permette di aggiornare parti della pagina e aggiungere/rimuovere classi CSS

• Framework come bootstrap semplificano la definizione della UI delle applicazione web

Apply the user interface design for a web application

Template designed by

Per ottimizzare il traffico tra client e server ed evitare richieste inutili al server è possibile utilizzare framework javascript e plugin

• Validazione client side con jQuery unubontrusive validation

• Rendering parziale con Ajax

• Elaborazione del DOM con jQuery

Design and implement UI behavior

Template designed by

In MVC è possibile diminuire la complessità e favorire il riutilizzo di parti di view:

• Partial View

• Layout e MasterPage

• Aspx e Razor View Engine

Compose the UI layout of an application

Template designed by

Garantire la compatibilità cross-browser è spesso un requisito implicito delle applicazioni web:

• Verificare a run-time le feature disponibili del browser

• Usare proprietà CSS specifiche del vendor

• Broswer desktop e browser mobile

Enhance application behavior and style based on browser feature detection

Template designed by

Per migliorare l’esperienza utente, molto diversa tra desktop e mobile, possiamo adottare diverse strategie:

• Responsive design (Html5, CSS3, Javascript)

• Pagine diverse per dispositivi diversi (Display Modes)

• Framework per il mobile (jQuery Mobile)

Plan an adaptive UI layout

Let’

s g

o

Develop the user

experience

Template designed by

Il successo di un’applicazione web può dipendere fortemente da come è indicizzata dai motori di ricerca:

• Usare tag semantici (HTML5) per dare significato ai contenuti

• Attributi ARIA per l’accessibilità

• Utilizzare gli strumenti di Visul Studio per verificare la correttezza dell’HTML generato

Plan for search engine optimization and accessibility

Template designed by

Applicazioni che hanno un mercato internazionale (sul web è molto frequente ) hanno necessità di essere internazionalizzate:

• File di risorse

• Impostazione della culture corrente server side

• Impostazione della culture corrente client side

Plan and implement globalization and localization

Template designed by

In rispetto del principio di singola responsabilità in MVC potete utilizzare «attributi» speciali per sollevare le action da alcune funzionalità necessarie:

• Action Filters (Authorize, HandleError, ValidateAntiForgeryToken, ecc.)• Applicabili sulla singola action, sul controller o globalmente (Global Filters)

• Action Results (ViewResult, JsonResult, ecc.)

• Model Bindings

Design and implement MVC controllers and actions

Template designed by

Asp.Net MVC basa la sua configurazione su convenzioni. L’individuazione del controller, la action e la view con cui rispondere ad una richiesta ad esempio è basata sulla regola di routing di default. Il routing è un componente importantissimo del framework e altamente personalizzabile:

• Regole di routing per specifici URL

• Route Constraints

• Custom route parameters

E’ possibile inoltre definire Aree specifiche dell’applicazione, per suddividere una singola applicazione in più sezioni funzionali che rispondono a particolare URL, come http://www.dominio.com/Admin/News/Details/1

Design and implement routes

Template designed by

Asp.Net MVC è un framework fortemente estendibile:

• Action Filters Custom

• Action Results Custom

• Controller Factory

• Model Binders Custom

• View Engines

Control application behavior by using MVC extensibility points

Template designed by

Lo scambio dati tra server è client è uno degli aspetti più importanti da curare per migliorare le performance e la responsività delle applicazioni web

• Bundles

• Minification

• Uso di CDN

Reduce network bandwidth

Let’

s g

o

Troubleshoot and

debug web

applications

Template designed by

Avete vari strumenti a disposizione per individure problemi di funzionamento e performance della vostra applicazione:

• Tracing

• Logging

• Debugging

• Intellitrace

• Code Contracts

• Performance Monitor

Prevent and troubleshoot runtime issues

Template designed by

Una applicazione ben sviluppata deve avere una buona strategia di gestione delle eccezioni

• Gestione delle eccezioni tra layer applicativi diversi

• Pagine di errore custom• Global.asax

• Http Handler Custom

• Web.config

Design an exception handling strategy

Template designed by

Asp.Net MVC favorisce la creazione di test automatici:

• Creare un progetto di unit test

• Mockare le dipendenze

• Istanziare un controller

• Invocare una action

• Fare una asserzione

• Eseguire i test

E’ inoltre possibile utilizzare i web tests e browser link

Test a web application

Template designed by

Quando hostiamo la nostra applicazione su Azure possiamo debuggarla utilizzando:

• Azure Diagnostic API

• Event log, performance counter, crush dumps

• Intellitrace e RDP

• Remote debugging

• Server Explorer

Debug an Azure application

Let’

s g

o

Design and implement

security

Template designed by

Asp.Net supporta diversi tipi di autenticazione

• Form

• Windows

• Custom

Il framework fornisce una API, chiamata Membership API, che è possibile personalizzare per utilizzare meccanismi di autenticazione custom.

In alternativa è possibile utilizzare Asp.Net Identity, la cui implementazione di default utilizza Entity Framework Code First

Configure authentication

Template designed by

Una volta autenticato l’utente è possibile utilizzare i ruoli per gestirne le autorizzazioni:

• Creare e associare ruoli agli utenti

• Impostare la configurazione dei permessi attraverso il web.config o da codice

• Creare role provider custom

Configure and apply authorization

Template designed by

In scenari distribuiti è possibile utilizzare l’autenticazione federata:

• Azure Access Control Service

• Custom security token con Windows Identity Foundation

• oAuth, OpenID, LiveID

Design and implement claims-based authentication across federated identity stores

Template designed by

E’ possibile sfruttare le funzionalità crittografiche per:

• Crittografare i dati applicativi

• Crittografare le sezioni di configurazione

• Firmare le informazioni per impedirne il tampering

Manage data integrity

Template designed by

Mettere in sicurezza un’applicazione web, può significare:

• Utilizzare certificati per stabilire connessioni sicure (SSL)

• Hashing delle password

• Encoding dell’HTML

• Parametrizzare le query per impedire Sql Injection

• Cross-site request forgeries (XSRF)

Implement a secure site with ASP.NET

Template designed by

Grazie a tutti per la partecipazione

Riceverete il link per il download a slide e demo via email nei prossimi giorni

Per contattarmi

michele.aponte@dotnetcampania.org

Grazie