XeDotNet meeting del 5 Marzo 2013 In questa sessione vedremo come Knockout.js permetta di scrivere codice JavaScript in modo pulito e organizzato, semplificando la scrittura del codice e la sua manutenzione. Come lo si utilizza KO? Quali vantaggi ci offre? Quali librerie ci vengono in aiuto? Quali sarebbe meglio evitare?

1. Andrea Dottor – Microsoft MVP ASP.NET/IIS
Migliora il tuo codice con Knockout.js

2.  ...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...

3.  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

4.  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?

5.  Knockou JS
 http://knockoutjs.com/
 BackBone JS
 http://backbonejs.org/
 Ember JS
 http://emberjs.com/
 Angular JS
 http://angularjs.org/
 ...
Quali strumenti possiamo utilizzare?

6.  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."
Che cos’è Knockout JS

7.  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

8.  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

9.  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

10.  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);
}

11.  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()

12.  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()

13.  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);

14.  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>

15.  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"));

16. demo

17.  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

18. Pager.js

19.  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

20.  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?

21. demo

22. Durandal

23.  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

24.  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?

25. demo

26. 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

28. feedback
10
o feedback su:
• http://xedotnet.org/feedback
• Codice: APR02
Email: andrea@dottor.net
Blog: http://blog.dottor.net
Twitter: http://twitter.com/dottor
feedback