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

2. brought to you by

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?

14. demo
Hello World

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

17. demo
Hello World

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

24. demo
Hello World

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…

27. brought to you by

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