Migliora il tuo codice con knockout.js

  • 1,391 views
Uploaded on

XeDotNet meeting del 5 Marzo 2013 …

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?

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,391
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
5
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Andrea Dottor – Microsoft MVP ASP.NET/IISMigliora 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 lunico a conoscere comerealmente funzionaJavaScript è un linguaggio potente ma...
  • 3.  Semplificare il codice il più possibile Più il codice è semplice e più sviluppatori cisanno 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 lascrittura di codice JavaScriptSoluzioni al disordine
  • 4.  Esistono molti Design Pattern possibili MVC MVP MVVM ... Dobbiamo/possiamo scegliere traquelli che conosciamo Se sviluppiamo in WPF o per Windows Phone oper Windows 8...conosciamo già MVVMQuali 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 thathelps you to create rich, responsivedisplay and editor user interfaces with aclean underlying data model. Any timeyou have sections of UI that updatedynamically (e.g., changing depending onthe user’s actions or when an external datasource changes), KO can help youimplement it more simply andmaintainably."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 HTTPcompression No dependencies Supports all mainstream browsers IE 6+, Firefox 2+, Chrome, Opera, Safari(desktop/mobile) Fully documentedAPI docs, live examples, and interactive tutorials includedAlcune info su knockout
  • 8.  Model I dati forniti dallapplicazione. Una visualizzazione deidati indipendente dalla UI. Dati esposti tramite servizi, Web API, ... View-Model Una rappresentazione dei dati strutturataappositamente per lUI. Esposizione delle proprietà emetodi che possono essere utilizzati nella View Scritto in JavaScript View Si occupa di visualizzare le informazioni che ilViewModel espone, e permette di chiamarne i metodi Uso di HTML5MVVM: Model-View-ViewModel
  • 9.  Qualsiasi servizio esposto utilizzandoREST è un ottimo model da utilizzareper knockout WCF con WebHttpBinding Web API JsonResult ... Qualsiasi informazioni che siano ingrado di arrivare al client JSON contenuto in input[type=hidden] ...Model
  • 10.  E un oggetto JavaScript che esponemetodi e proprietà Deve essere la corretta rappresentazione deidati per la View che si intende realizzare Non ha nessun legame con le View Non viene eseguito nessun $(#id) oppuredocument.getElementById(id)ViewModelfunction 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 dellaproprietà, la View viene subitonotificata ed aggiornata Genera un proxy sulla proprietà che fa si cheKnockout possa aggiornare linterfaccia, oppuretutte le proprietà che dipendono da essa Si può agganciare una funzione chevenga invocata al cambio di valore viewModel.firstName.subscribe(function(newValue) { ...}); Simile al INotifyPropertyChangedko.observable()
  • 12.  Definisce un array di tipo "Observable" Un oggetto observableArray dispone di tutti i metodidegli array javascript pop, push, shift, unshift, reverse, sort, splice, … Può essere inizializzato e popolato direttamente nelcostruttore Ad ogni aggiunta, rimozione ocancellazione di un elemento, la Viewviene subito notificata del cambiamento Paragonabile ad unaObservableCollectionko.observableArray()
  • 13.  Permette di definire proprietà di tipocalcolato Sono anche queste "Observable" Al cambiamento di una proprietà da cui questadipende, viene ricalcolato il nuovo valore edaggiornata la Viewko.computed()this.fullName = ko.computed(function() {return this.firstName() + " " + this.lastName();}, this);
  • 14.  Si deve fare uso di HTML5 KO fa uso dellattributo data-bind per agganciareproprietà e metodi esposti dal ViewModel Uso di template, foreach, with Permette di ripetere facilmente porzioni dicodice, usando un binding "innestato" Lunico legame con il ViewModel è nelcorretto utilizzo dei nomi di proprietà emetodiView<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 eViewModel è racchiusa in unasemplice riga Unisce un ViewModel utilizzando lintera paginacome View E possibile associare il ViewModel aduna porzione di pagina Permette di indentificare più View allinterno dellastessa pagina HTMLCollegare View e ViewModelko.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 MVC4 Single Page Application fa uso diknockout Un valido esempio di SPA E possibile utilizzare JQuery Mobile incombinazione con KO Attenzione, che JQM e KO lavorano entrambi dopo ilcaricamento del DOM e lo modificano Da knockout spesso di deve richiamare il refresh deicontrolli Esistono framework di SPA costruiti suKnockout Pager.js DurandalKO e Single Page Application
  • 18. Pager.js
  • 19.  Libreria JavaScript basata su KO eJQuery che permette la realizzazionedi applicazioni SPA http://pagerjs.com/ Semplice da utilizzare Non ha dipendende con frameworkCSS A differenza di JQuery Mobile, pager.js si occupasolamente della navigazione tra pagine e nondegli stili di visualizzazionePager.js
  • 20.  Si occupa solo della parte di SinglePage Application Spesso si ha bisogno di un "qualcosa" che cipermetta di visualizzare/nascondere pagine Non tutte le app hanno bisogno diframework complessi come JQueryMobile JQM forza luso ai suoi CSS KO e JQM non lavorano sempre incoordianzione. Spesso si deve fare refresh manuali di componenti dellaUIPerchè Pager.js?
  • 21. demo
  • 22. Durandal
  • 23.  Framework per la realizzazione diapplicazioni SPA, chemigliora/estende lidea di MVVM diknockout 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 & RequireJSDurandal
  • 24.  Organizzazione del codice View e ViewModel splittati in file separati, ecollegati solamente dal nome Facilità nella manutenzione del codice Ogni View e ViewModel è realizzato con unospecifico ruolo La complessità è splittata/ridotta Meno possibilità di conflitti al commit nelcontrollo sorgente Implementazione di MVVM miglioratarispetto al solo Knockout Netta separazione tra View e ViewModelPerchè Durandal?
  • 25. demo
  • 26. Migliora il tuo codice Librerie JavaScript come Knockout,Durandal possono essere di aiuto perorganizzare al meglio codice client Librerie esterne non fanno miracoli Richiedono disciplina e metodo nel loro utilizzo Lordine e la complessità di ciò che siscrive è nelle mani dello sviluppatore Limpegno di scrivere codice migliore deve arrivaredirettamente dallo sviluppatore Pensa al principio KISS Keep it simple, stupid Più mantieni il codice semplice e più facile saràleggerlo e manutenerlo
  • 27. feedback10o feedback su:• http://xedotnet.org/feedback• Codice: APR02Email: andrea@dottor.netBlog: http://blog.dottor.netTwitter: http://twitter.com/dottorfeedback