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?
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"));
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
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?
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?
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
27.
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