Andrea Dottor – Microsoft MVP ASP.NET/IIS

Migliora il tuo codice con Knockout.js

...permette di scrivere codice Disordinato Difficile da leggere Difficile da mantenere

...non tutti ci sanno metter mano Capita spesso che lo sviluppatore che ha

scritto "quel" codice sia l'unico a conoscere come realmente funziona

JavaScript è un linguaggio potente ma...

Semplificare il codice il più possibile Più il codice è semplice e più sviluppatori

ci sanno metter mano

Scrivere meno codice Meno codice si scrive e meno probabilità di

errori (ci dovrebbe essere)

Utilizzare una metodologia Esistono molti pattern/librerie che

semplificano la scrittura di codice JavaScript

Soluzioni al disordine

Esistono molti Design Pattern possibili MVC MVP MVVM ...

Dobbiamo/possiamo scegliere tra quelli che conosciamo Se sviluppiamo in WPF o per Windows

Phone o per Windows 8...conosciamo già MVVM

Quali metodologie possiamo adottare?

Knockou JS http://knockoutjs.com/

BackBone JS http://backbonejs.org/

Ember JS http://emberjs.com/

Angular JS http://angularjs.org/

...

Quali strumenti possiamo utilizzare?

Libreria che porta MVVM nel client http://knockoutjs.com/

"Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably." http://knockoutjs.com/documentation/introduction.html

Che cos’è Knockout JS

Free, open source MIT license

Pure JavaScript works with any web framework

Small & lightweight 40kb minified... reduces to 14kb when using HTTP

compression

No dependencies Supports all mainstream browsers

IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)

Fully documentedAPI docs, live examples, and interactive tutorials

included

Alcune info su knockout

Model I dati forniti dall'applicazione. Una visualizzazione

dei dati indipendente dalla UI. Dati esposti tramite servizi, Web API, ...

View-Model Una rappresentazione dei dati strutturata

appositamente per l'UI. Esposizione delle proprietà e metodi che possono essere utilizzati nella View

Scritto in JavaScript

View Si occupa di visualizzare le informazioni che il

ViewModel espone, e permette di chiamarne i metodi

Uso di HTML5

MVVM: Model-View-ViewModel

Qualsiasi servizio esposto utilizzando REST è un ottimo model da utilizzare per knockout WCF con WebHttpBinding Web API JsonResult ...

Qualsiasi informazioni che siano in grado di arrivare al client JSON contenuto in input[type=hidden] ...

Model

E' un oggetto JavaScript che espone metodi e proprietà Deve essere la corretta rappresentazione

dei dati per la View che si intende realizzare

Non ha nessun legame con le View Non viene eseguito nessun $('#id') oppure

document.getElementById('id')

ViewModel

function AppViewModel() {    this.firstName = ko.observable("Bert");    this.lastName = ko.observable("Bertington");

    this.fullName = ko.computed(function() {        return this.firstName() + " " + this.lastName();        }, this);}

Definisce una proprietà "Observable" Ad ogni cambiamento di valore della

proprietà, la View viene subito notificata ed aggiornata Genera un proxy sulla proprietà che fa si che

Knockout possa aggiornare l'interfaccia, oppure tutte le proprietà che dipendono da essa

Si può agganciare una funzione che venga invocata al cambio di valore viewModel.firstName.subscribe(function(newValue) { ...});

Simile al INotifyPropertyChanged

ko.observable()

Definisce un array di tipo "Observable" Un oggetto observableArray dispone di tutti i

metodi degli array javascript pop, push, shift, unshift, reverse, sort, splice, …

Può essere inizializzato e popolato direttamente nel costruttore

Ad ogni aggiunta, rimozione o cancellazione di un elemento, la View viene subito notificata del cambiamento

Paragonabile ad una ObservableCollection

ko.observableArray()

Permette di definire proprietà di tipo calcolato

Sono anche queste "Observable" Al cambiamento di una proprietà da cui

questa dipende, viene ricalcolato il nuovo valore ed aggiornata la View

ko.computed()

this.fullName = ko.computed(function() {        return this.firstName() + " " + this.lastName();    }, this);

Si deve fare uso di HTML5 KO fa uso dell'attributo data-bind per agganciare

proprietà e metodi esposti dal ViewModel

Uso di template, foreach, with Permette di ripetere facilmente porzioni di

codice, usando un binding "innestato"

L'unico legame con il ViewModel è nel corretto utilizzo dei nomi di proprietà e metodi

View

<p>First name: <strong data-bind="text: firstName"></strong></p><p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p><p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

La magia che unisce View e ViewModel è racchiusa in una semplice riga Unisce un ViewModel utilizzando l'intera

pagina come View

E' possibile associare il ViewModel ad una porzione di pagina Permette di indentificare più View

all'interno della stessa pagina HTML

Collegare View e ViewModel

ko.applyBindings(new AppViewModel());

ko.applyBindings(viewModelA, document.getElementById("one"));ko.applyBindings(viewModelB, document.getElementById("two"));

demo

Il template di progetto di ASP.NET MVC 4 Single Page Application fa uso di knockout Un valido esempio di SPA

E' possibile utilizzare JQuery Mobile in combinazione con KO Attenzione, che JQM e KO lavorano entrambi dopo

il caricamento del DOM e lo modificano Da knockout spesso di deve richiamare il 'refresh' dei

controlli

Esistono framework di SPA costruiti su Knockout Pager.js Durandal ...

KO e Single Page Application

Pager.js

Libreria JavaScript basata su KO e JQuery che permette la realizzazione di applicazioni SPA http://pagerjs.com/

Semplice da utilizzare Non ha dipendende con

framework CSS A differenza di JQuery Mobile, pager.js si

occupa solamente della navigazione tra pagine e non degli stili di visualizzazione

Pager.js

Si occupa solo della parte di Single Page Application Spesso si ha bisogno di un "qualcosa" che

ci permetta di visualizzare/nascondere pagine

Non tutte le app hanno bisogno di framework complessi come JQuery Mobile JQM forza l'uso ai suoi CSS KO e JQM non lavorano sempre in

coordianzione. Spesso si deve fare refresh manuali di

componenti della UI

Perchè Pager.js?

demo

Durandal

Framework per la realizzazione di applicazioni SPA, che migliora/estende l'idea di MVVM di knockout http://durandaljs.com/

Non solo Single Page Application Clean MV* Architecture JS & HTML Modularity Simple App Lifecycle Eventing, Modals, Message Boxes, etc. Navigation & Screen State Management Built on top of jQuery, Knockout & RequireJS

Durandal

Organizzazione del codice View e ViewModel splittati in file separati, e

collegati solamente dal nome

Facilità nella manutenzione del codice Ogni View e ViewModel è realizzato con uno

specifico ruolo La complessità è splittata/ridotta

Meno possibilità di conflitti al commit nel controllo sorgente

Implementazione di MVVM migliorata rispetto al solo Knockout Netta separazione tra View e ViewModel

Perchè Durandal?

demo

Migliora il tuo codice

Librerie JavaScript come Knockout, Durandal possono essere di aiuto per organizzare al meglio codice client Librerie esterne non fanno miracoli Richiedono disciplina e metodo nel loro utilizzo

L'ordine e la complessità di ciò che si scrive è nelle mani dello sviluppatore L'impegno di scrivere codice migliore deve

arrivare direttamente dallo sviluppatore

Pensa al principio KISS Keep it simple, stupid Più mantieni il codice semplice e più facile sarà

leggerlo e manutenerlo

feedback

10

o feedback su:• http://xedotnet.org/feedback

• Codice: APR02

Email: andrea@dottor.netBlog: http://blog.dottor.netTwitter: http://twitter.com/dottor

feedback