Usare Knockout JS

  • View
    706

  • Download
    1

Embed Size (px)

DESCRIPTION

Con l'avvento su scala globale di HTML5 le tecnologie web si sono evolute cercando di offrire all'utente una migliore esperienza applicativa sempre più simile a quella desktop. Sul piano tecnico questo viene realizzato spostando la logica di presentazione sul browser client facendo leva su Javascript e CSS3. In questa sessione vedremo come KnockoutJS, un presentation framework Javascript basato sul pattern Model-View-ViewModel, permette di sviluppare Rich Internet Application (RIA) analizzando le sue caratteristiche implementative e mostrando esempi di casi reali anche in ambito mobile.

Text of Usare Knockout JS

  • 1. Grazie a Sponsor

2. Agenda Knockout JS Cosa, Quando, Perch Alternative Knockout JS: Come Oggetti observable Attributi data-bind 3. Che cos Knockout JS Presentation Framework Javascript Implementazione di un particolare Design Patterndi Presentation (UI): il Model-View-ViewModel(MVVM) Implementato completamente in Javascript Multi-Browser (che supporti HTML5) Convive senza problemi con i maggioriFramework Javascript (jQuery, jQuery Mobile, ) Portale del progetto http://knockoutjs.com 4. Model-View-ViewModel Il MVVM fa parte della cosiddetta famigliadei presentation pattern MV* disaccoppiare i dati rappresentati nella UI(Model) dalla UI stessa (View) promuovendouna netta separazione fra questi medianteluso di un oggetto terzo: il ViewModel 5. Model-View-ViewModel Si definiscono e si idratano i dati (Model) davisualizzare Si veicolano i dati attraverso il ViewModel verso laView utilizzando un meccanismo di data-bindche permetta la gestione bidirezionele degliaggiornamenti dei dati stessi Si definiscono delle operazioni nel ViewModelper gestire gli eventi provenienti dalla View 6. MVVM e HTML5 View: il markup HTML Model: uno o pi oggetti e array Javascriptche contengono solo dati puri e che devonoessere rappresentati nella View ViewModel: un oggetto Javascript cheidentifica una rappresentazione sotto formadi codice dei dati (Model) e delle operazionidella View 7. Knockout JS e MVVM Knockout JS si caratterizza principalmente per treaspetti: Sintassi specifica per la definizione di un binding dichiarativo dei dati nel markup HTML5 API Javascript per la definizione delle propriet delloggetto ViewModel che fornisce un meccanismo automatico di notifica del loro aggiornamento Sintassi di templating di frammenti di markup HTML per il rendering di liste/array 8. Quando usare Knockout JS Knockout JS offre una API in grado disemplificare e strutturare lo sviluppo diuna logica di UI mediamente complessa Luso di Knockout JS indicato quando siaffronta lo sviluppo di una Rich InternetApplication (RIA) lato client 9. Perch usare Knockout JS Organizzazione della codebase in termini diresponsabilit degli oggetti coinvolti e delle lorointerazioni in modo da evitare il pi possibile laproduzione del cosiddetto codice spaghetti Gestione strutturata degli elementi e deglieventi del DOM Possibilit di sviluppare il codice utilizzandofacilmente tecniche di Unit Testing 10. Alternative a Knockout JS Esistono altri Presentation FrameworkJavascript che: Si prefiggono gli stessi obiettivi Fanno parte della famiglia MV* Per citare i pi conosciuti: BackBone JS Ember JS Angular JS 11. Knockout JS in 2 minuti Definizione di un oggetto ViewModelJavascript con propriet observable emetodi (command) Definizione del markup HTML5 conattributi data-bind Applicazione del ViewModel alla Viewmediante il metodo ko.applyBindings 12. Demo 01DEMO 13. ViewModel: propriet osservabili Knockout JS offre la possibilit di definire lepropriet del ViewModel come oggetti osservabilidi tre tipi: Observable Computed Observable Observable Array Hanno la capacit di notificare automaticamentelaggiornamento del proprio valore alla View eviceversa 14. Oggetti Observable Leggerne il valore: var fn = self.firstName( ); Scriverne il valore: self.firstName("Roberto"); Chain syntax: self.firstName("Roberto").lastName("Messora"); Sottoscrizione esplicita: self.firstName.subscribe(function(newValue) { }); 15. Oggetti Computed Observable Definirne la composizione: self.isMinor = ko.computed(function() { return self.age() < 18; }); Possono essere concatenati: self.canDrive = ko.computed(function() { return self.isMinor() == false; }); Possono essere anche in scrittura per scenari come: Decomposizione dellinput utente Convertitore di valore/formato Validatore di input utente Offrono tutta una serie di metodi e opzioni per un uso avanzato 16. Oggetti Observable Array Definirne la composizione:self.myArray =ko.observableArray(["a", "b", "c"]); Ridefiniscono tutti i classici metodi di unnormale array: indexOf, slice pop, push, shift, unshift, reverse, sort, splice remove, removeAll, destroy, destroyAll 17. Demo 02DEMO 18. Estendere un Observable Un oggetto Observable pu essere esteso perfornirne ulteriori funzionalit custom Uno degli utilizzi pi utili quello dellavalidazione delle propriet del ViewModel ko.extenders.positiveNumberValidation =function(target, option) { }; self.age = ko.observable(0).extend({positiveNumberValidation: "" }); 19. Demo 03DEMO 20. View: attributi di data-bind Knockout JS offre la possibilit di definire un attributodi data-bind nei tag del markup HTML5 Sono disponibili 4 tipi di famiglie di binding: Controllo del testo e del rendering: visible, text, html, css, style, attr Controllo del flusso: foreach, if, ifnot, with Specifici per i controlli delle form: click, event, submit, enable, disable, value, hasfocus, ch ecked, options, selectedOptions, uniqueName Custom 21. Sintassi del data-bind La sintassi di base : data-bind="value: someValue, enable: isEnabled, " Si possono usare vari tipi di valori: Propriet del ViewModel Espressione condizionale Chiamata a funzione del ViewModel Function expression (funzione inline) Object literal (solo con il bindings with) 22. Elementi Virtuali I binding di controllo del flusso possonoessere utilizzati anche senza la presenza diun elemento (tag) contenitore: 23. Binding Context Il Binding Context un oggetto che contiene i dati che sonoreferenziati nei bindings della View e a cui si pu accedereallinterno degli stessi Le propriet pi importanti sono: $parent: il ViewModel genitore (se esiste) $root: il ViewModel radice $data: il ViewModel corrente $index: lindice dellelemento corrente in un binding foreach $element: lelemento (tag) del markup HTML5 in cui definito lattributo data-bind corrente 24. Demo 04DEMO 25. Custom bindings Oltre ai binding built-in nel framework possibilecrearne di nuovi personalizzati ko.bindingHandlers.panelVisible = { init: function(element, valueAccessor, allBindingsAcces sor, viewModel) { }, update: function(element, valueAccessor, allBindingsAcces sor, viewModel) { } }; data-bind="panelVisible: isPanelVisible" 26. Demo 05DEMO 27. Scenari e tecniche avanzate In Knockout JS c molto di pi di quanto visto inquesta presentazione tra cui: Un motore di templating del markup HTML5 Tecniche specifiche di implementazione di librerie riutilizzabili di custom bindings Funzioni helper per la gestione degli eventi scatenati dagli elementi del markup HTML5 Luso del plugin di mapping Moltissime funzioni di utility (non documentate) 28. Q&ATutto il materiale di questa sessione suhttp://www.communitydays.it/#CDays13