Rich client application: MVC4 + MVVM = Knockout.js

Template designed by

Rich client application:MVC4 + MVVM = Knockout.js

Giorgio Di [email protected]://blogs.ugidotnet.org/akelitz/@akelitz

brought to you by

GIORGIO DI NARDO Lavoro presso Proge-software come Senior Consultant

Sono tra i fondatori di DomusDotNet

Sono Microsoft Certified Trainer

chi sono

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

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

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 provenienti dalla View

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

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 è?





tutto qui!?

agenda agile

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?

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?

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?

dem

o Hello World





tutto qui!?

agenda agile

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

dem

o Hello World





tutto qui!?

agenda agile

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

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

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

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

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

dem

o Hello World





tutto qui!?

agenda agile

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…

brought to you by

Grazie a tutti per la partecipazione

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

Per contattarmi

[email protected]

Grazie

Rich client application: MVC4 + MVVM = Knockout.js

Technology

Transcript of Rich client application: MVC4 + MVVM = Knockout.js