hands on mvc - mastering the web
DESCRIPTION
Web programming workshop for the web programming class at University of Brescia, Italy.TRANSCRIPT
Hands on MVC
Mastering the Web
Chi siamo?Michele Caprasviluppatore freelance.Netmail: [email protected]
twitter: @piccoloaiutante
Claudio Gandellisviluppatore freelancePHPmail: [email protected]
twitter: @cgandelli
www.flickr.com/photos/justinbaeder/5317820857
WEB
Web
www.flickr.com/photos/loungerie/1471835306
Web1990 - Tim Berners-Lee
Pool of Human Knowledge
Web Browser WorldWideWeb
Web Server
Web Page
WebInternet
URL Uniform resource locator
HTTP Hypertext Tranfer Protocol
HTML Hypertext Markup Language
CSS Cascading Stylesheet
HTTP
www.flickr.com/photos/kryptyk/125244997
HTTP
REQUEST | RESPONSE
HTTP
HTTP
HTML
www.flickr.com/photos/tz1_1zt/3202641220
HTMLLinguaggio di markup
Annotation & Presentation Semantic<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Html</title></head><body>
<h1 id=“header”>HTML</h1><div class=“slide”>
<h2>Linguaggio di markup</h2><p>Annotation & presentation semantic</p>
</div></body>
</html>
HTMLDocument Type Declaration
Attributi
Entità
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Html</title></head><body>
<h1 id=“header”>HTML</h1><div class=“slide”>
<h2>Linguaggio di markup</h2><p>Annotation & presentation semantic</p>
</div></body>
</html>
CSS
www.flickr.com/photos/r80o/43381087
CSS
Regole per la formattazione
Selettori
Override a cascata
Priorità dei selettori
www.flickr.com/photos/90921086@N00/56844581
WEB 2.0
WEB 2.0
WEB 2.0
http://www.flickr.com/photos/respres/3231178720
?
ProgettazioneIntegrare servizi disponibili
Progettazione
Scelta degli strumenti adattiValutare alternative
Linguaggi di Programmazione
www.flickr.com/photos/tuinkabouter/497701866
Definire l’architettura del sistema
Realizzare codice modulare e
riusabileRiutilizzare codice già scritto
Non “reinventare la ruota”
Architettura Software
www.flickr.com/photos/thomashawk/43213643
Identificare i dati in giocoPersistere i dati in maniera intelligente
Utilizzo di storage online
Alternative ai DB relazionali: NoSQL
Storage
www.flickr.com/photos/thomashawk/24089964
Cloud Computing or not Cloud Computing?
Cloud
www.flickr.com/photos/8525214@N06/3884240503
Lavoro di squadraRispettare la pianificazione
Gestire le risorse
Team
www.flickr.com/photos/atomicshed/161716498
Produrre software di qualitàRobustezza Affidabilità Correttezza
Test
www.flickr.com/photos/jeffkrause/5636722378
Benchmarking
Ottimizzazione
Performance
www.flickr.com/photos/luciano_meirelles/3461860276
Cavalcare il cambiamentoAdattare alle innovazioni
Mobile
www.flickr.com/photos/jdhancock/3420540107
Caso di studioRealizzare un guestbook
2 Gli utenti devono poter inserire i propri messaggi
1 La pagina deve mostrare i messaggi dei visitatori
Mock upIl prototipo HTML
Mock upIl foglio di stile
Mock upIl foglio di stile
Mock upIl foglio di stile
Caso di studio
La programmazione
www.flickr.com/photos/36182550@N08/3347465868
Spaghetti CodeDevo realizzare il blog
Preparo l’html necessario
Introduco le interrogazioni al database
Realizzo la gestione degli inserimenti
==
Una pagina di codice per realizzare il blog
Spaghetti Code
DEMO
Spaghetti CodePro
Veloce da scrivereVeloce da eseguire
Contro Scarsa manutenibilitàScarsa espressività
Difficile riuso del codiceImpossibile il Testing
Separiamo
www.flickr.com/photos/bitzcelt/3892962709
SepariamoBusiness Logic
Presentazione
Separiamo il layer logico (ASP .net)
da quello di presentazione (HTML)
SepariamoLogica e presentazione in file distinti
Separiamo
DEMO
SepariamoAbbiamo ottenuto:
Controller contiene la logica
dell'applicazione
Vista presenta i risultati forniti dal controller
Separiamo
Percorso Request – Response
Con architettura View - Controller
Refactoring MVC
www.flickr.com/photos/19724636@N00/3297328910
Refactoring MVCModello gestisce il comportamento e i dati del
dominio applicativo, risponde a richieste di informazioni di stato e a istruzioni di cambio di stato.
Vista traduce le informazioni ottenute dal modello in un formato adatto all'interazione.
Controller serve a coordinare il processo di interazione: riceve gli input dell'utente e scatena le chiamate verso gli oggetti del modello, per poi passare alla vista il necessario a fornire l'output corretto.
Refactoring MVC
MVC
DEMO
Refactoring MVCPro
Riusabilità del codice
Astrazione dei dati
Ordine
ControNumero di file
Codice da scrivere
Pattern architetturale da implementare
ASP .Net MVC
ASP .Net MVC
Primo esperimento open source di Microsoft
Nasce da Asp.net
Implementazione nel .Net Framework
del pattern MVC.
ASP .Net MVCSistema di routing
Scaffolding
Template
ActionFilter
Validazione automatica lato client
Caching delle pagine
ASP .Net MVC
DEMO
ASP .Net MVC
Url RoutingModule
Controller
ControllerFactory
Mvc RouteHandler
ViewEngine
Mvc Handler
View
Richiesta
Risposta
ASP .Net MVC
Ottima testabilità del codice
Separazione delle responsabilità di ogni layer
Completo controllo dell’html
PHP Way
www.flickr.com/photos/dragonbe/3411273755
Devo realizzare il blog
Preparo l’html necessario
Introduco le interrogazioni al database
Realizzo la gestione degli inserimenti
==
Una pagina di codice per realizzare il blog
Approccio Naive
www.flickr.com/photos/lrargerich/3187525211
Refactoring MVC
www.flickr.com/photos/nrivera/3988954350
Refactoring MVCSeparazione View - Controller
Refactoring MVCAggiunta del Model
Refactoring MVCUn semplice Framework MVC
Symfony Framework
SymfonyWeb Application Framework per progetti PHPSetup semplice
Design “pulito”
Tools di Testing, Debugging, Documentazione
Generatori automatici di codice
Gratuito e licenziato MIT
Symfony 1 (1.4)
Symfony 2
Symfony
SetupSi scarica il Framework o si clona dall’SVNSi genera un nuovo progetto con gli strumenti CLI messi a disposizione
$ php lib/vendor/symfony/data/bin/symfonygenerate:project webprog-symfony
$ php symfony generate:app frontend
Si configura il webserver per puntare alla catella pubblica “web”
Struttura del Progetto
Cartella Web
Contiente i FrontController per
ciascuna applicazione
Contiene le risorse pubbliche
del sito
Cartella AppsContiente le applicazioni web che insistono
sul modello di riferimento
Ogni applicazione contiene le configurazioni(e.g. routing) e tutti i Controller
Cartella ConfigConfigurazione del progetto
Configurazione di accesso al database
Schema dei dati per l’ORM
Creazione del modelloGrazie all’ORM a partire dalla descrizione dello schema il modello e la persistenza verranno generati automaticamente
$ php symfony doctrine:build –model$ php symfony doctrine:build --sql
Creazione di un moduloUn modulo suddivide l’applicazione per
“funzionalità”Per introdurre la funzionalità di gestione dei
nostri messaggi creiamo il modulo “message”
$ php symfony doctrine:generate-module frontend message Message
Elenco dei messaggi
ControllerView
Model
RoutingIl documento di Routing permette al Front Controller di indirizzare al Controller corretto le richieste
Generazione di CodiceL’Admin-Generator è lo strumentofondamentale per il RAD
Permette la creazione di un pannellodi amministrazione dal Modello deidati
$ php symfony generate:app admin
$ php symfony doctrine:generate-admin admin Message --module=message
Admin Generator
DEMO
http://webprog.symfony.local/admin.php/message
Grazie
Michele [email protected]
twitter: @piccoloaiutante
Claudio [email protected]
twitter: @cgandelli
www.flickr.com/photos/donbuciak/3151055123
Hands on MVC
Mastering the Web
