Post on 23-Dec-2014
description
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