La sempre maggiore diffusione di device diversificati (PC, Notebook, Tablet, Smartphone, ecc.) su piattaforme diverse, rilancia l'utilizzo delle Web Application come strumento per raggiungere il maggior numero di potenziali clienti con il minimo sforzo. Le capacità avanzate dei nuovi device e le ultime tecnologie ci consentono però di evolvere il concetto classico di applicazione Web in una declinazione più veloce, più responsiva, più accattivante: vediamo come.
1. Template designed by
Rich client application:
MVC4 + MVVM = Knockout.js
Giorgio Di Nardo
giorgio.dinardo@domusdotnet.org
http://blogs.ugidotnet.org/akelitz/
@akelitz
3. GIORGIO DI NARDO
Lavoro presso Proge-software come Senior Consultant
Sono tra i fondatori di DomusDotNet
Sono Microsoft Certified Trainer
chi sono
4. MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo:
estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
5. MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo:
estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
6. Pattern architetturale
Model = dati
View = interfaccia
Controller = interazione
Separation-of-Concerns
Dependency Injection
Convention-over-
Configuration
MVC4 = Model View Controller “in salsa” Model2
Client
Utente
(browser)
Server
Controller
View
Model
7. Pattern di presentation
della famiglia MV*
Separation-of-Concerns
Rompere il legame forte
tra i dati (Model) e la loro
rappresentazione (View)
per mezzo di un terzo
soggetto (ViewModel)
MVVM = Model-View-ViewModel
Si definiscono e si idratano
i dati (Model) da
visualizzare
Si veicolano i dati
attraverso il ViewModel
verso la View utilizzando un
meccanismo di data-bind
che permetta la gestione
bidirezionale degli
aggiornamenti dei dati stessi
Si definiscono delle
operazioni nel ViewModel
per gestire gli eventi
8. Model: i dati gestiti dall’applicazione rappresentati sotto
forma di oggetto o array Javascript
View: la pagina HTML contenente i vari elementi di
markup
ViewModel: un oggetto Javascript che espone i dati
(Model) in un formato «comodo» per l’interfaccia (View) e
contiene le operazioni per rispondere agli eventi da questa
generati
MVVM in HTML
9. Libreria in Javascript puro per semplificare la creazione in
HTML di applicazioni basate su MVVM
Caratteristiche principali:
Binding dichiarativo dei dati nel markup HTML
Gestione delle dipendenze con aggiornamento automatico nelle due direzioni
Facilità di estensione delle funzionalità di base
Compatibile con la maggior parte dei browser (IE 6+, Firefox
2+, Chrome, …)
Non sostituisce ma si integra con jQuery
Knockout.js: cosa è?
10. MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo:
estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
11. In tutti i casi in cui l’interazione del sistema con l’utente
non sia banale e richieda la definizione di una logica di UI
strutturata…
… in particolare nelle Rich Internet Application (RIA)
Knockout.js: quando usarlo?
12. Aiuta ad aumentare la SoC del progetto anche nella parte
storicamente più propensa allo «spaghetti code»
Consente di gestire in maniera più strutturata e
manutenibile gli elementi e gli eventi del DOM
Semplifica enormemente i problemi di Unit testing della
parte client della nostra applicazione
….
Knockout.js: perchè usarlo?
13. Si creano gli oggetti ViewModel e si definiscono al loro
interno le proprietà observable contenenti i dati da
mostrare e le funzioni associate ai comandi scatenabili
dalla View
Si aggiungono gli attributi data-bind al markup della
pagina HTML
Si attiva il binding con una chiamata al metodo
ko.applyBinding
Knockout.js: come usarlo?
15. MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo:
estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
16. Knockout garantisce out-of-the-box le funzioni per leggere
e scrivere e per notificare le variazioni ai
subscriber, però…
… e possibile estendere il meccanismo degli observable
in maniera semplice scrivendo poco righe di codice…
… oppure sfruttare i plugin e gli extender disponibili ad
esempio su NuGet
Estendere Knockout.js
18. MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo:
estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
19. Parte dello sviluppo software che si occupa della verifica
delle corrispondenza tra il funzionamento del codice e i
requisiti
Target (unit, integration, system) e Scope
(functional, performance, scalability, acceptant, …)
Consente di migliorare la qualità del proprio
codice, ridurre il peso della manutenzione ma anche
(TDD) migliorarne il design
Testing, Unit testing e TDD
20. Testare piccoli frammenti di codice («unit»), tipicamente
metodi
Testare i soli endpoint pubblici
Testare in maniera isolata rispetto al resto
dell’applicazione
Ottenere il risultato positivo/negativo dei test in maniera
automatizzata
Pilastri dello Unit testing
21. Utilizzare lo Unit testing per guidare lo sviluppo della
propria applicazione
Scrivere il codice strettamente necessario a passare i test
Red/Green cycle
Utilizzabile sia per i nuovi sviluppi che per il bug fixing
Attenzione al refactoring!
Test Driven Development
22. Arrange: predisporre l’ambiente per il test
Act: effettuare la chiamata al codice oggetto del test
Assert: verificare che ciò che ci si aspettava si è verificato
(e ciò che non ci si aspettava non si è verificato)
Verificare un comportamento alla volta (single assertion
rule)
Arrange, Act, Assert
23. Framework di test della famiglia jQuery
Sintassi di Asserting semplice ed immediata
Interfaccia chiara
Possibilità di dividere i test in moduli
Possibilità di preparare e ripulire l’ambiente di test in
maniera centralizzata
qUnit
25. MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo:
estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
26. Fornito di un motore di templating del markup HTML
Corredato da Plugin (mapping, …) ed Extender
(validation, ...)
Disegnato per integrarsi al meglio con altri framework
Javascript: Durandal.js, Require.js, ...
Pilastro per costruzione delle Single Page Application
No! Knockout.js è anche…
28. Grazie a tutti per la partecipazione
Riceverete il link per il download a slide e demo via email nei
prossimi giorni
Per contattarmi
giorgio.dinardo@domusdotnet.org
Grazie