Template designed byRich client application:MVC4 + MVVM = Knockout.jsGiorgio Di Nardogiorgio.dinardo@domusdotnet.orghttp:/...
brought to you by
GIORGIO DI NARDO Lavoro presso Proge-software come Senior Consultant Sono tra i fondatori di DomusDotNet Sono Microsoft...
 MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:est...
 MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:est...
 Pattern architetturale Model = dati View = interfaccia Controller = interazione Separation-of-Concerns Dependency I...
 Pattern di presentationdella famiglia MV* Separation-of-Concerns Rompere il legame fortetra i dati (Model) e la lorora...
 Model: i dati gestiti dall’applicazione rappresentati sottoforma di oggetto o array Javascript View: la pagina HTML con...
 Libreria in Javascript puro per semplificare la creazione inHTML di applicazioni basate su MVVM Caratteristiche princip...
 MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:est...
 In tutti i casi in cui l’interazione del sistema con l’utentenon sia banale e richieda la definizione di una logica di U...
 Aiuta ad aumentare la SoC del progetto anche nella partestoricamente più propensa allo «spaghetti code» Consente di ges...
 Si creano gli oggetti ViewModel e si definiscono al lorointerno le proprietà observable contenenti i dati damostrare e l...
demoHello World
 MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:est...
 Knockout garantisce out-of-the-box le funzioni per leggeree scrivere e per notificare le variazioni aisubscriber, però…...
demoHello World
 MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:est...
 Parte dello sviluppo software che si occupa della verificadelle corrispondenza tra il funzionamento del codice e irequis...
 Testare piccoli frammenti di codice («unit»), tipicamentemetodi Testare i soli endpoint pubblici Testare in maniera is...
 Utilizzare lo Unit testing per guidare lo sviluppo dellapropria applicazione Scrivere il codice strettamente necessario...
 Arrange: predisporre l’ambiente per il test Act: effettuare la chiamata al codice oggetto del test Assert: verificare ...
 Framework di test della famiglia jQuery Sintassi di Asserting semplice ed immediata Interfaccia chiara Possibilità di...
demoHello World
 MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:est...
 Fornito di un motore di templating del markup HTML Corredato da Plugin (mapping, …) ed Extender(validation, ...) Diseg...
brought to you by
Grazie a tutti per la partecipazioneRiceverete il link per il download a slide e demo via email neiprossimi giorniPer cont...
Upcoming SlideShare
Loading in...5
×

Rich client application: MVC4 + MVVM = Knockout.js

386

Published on

La sempre maggiore diffusione di device diversificati (PC, Notebook, Tablet, Smartphone, ecc.) su piattaforme diverse, rilancia l'utilizzo delle Web Application come strumento per raggiungere il maggior numero di potenziali clienti con il minimo sforzo. Le capacità avanzate dei nuovi device e le ultime tecnologie ci consentono però di evolvere il concetto classico di applicazione Web in una declinazione più veloce, più responsiva, più accattivante: vediamo come.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
386
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rich client application: MVC4 + MVVM = Knockout.js

  1. 1. Template designed byRich client application:MVC4 + MVVM = Knockout.jsGiorgio Di Nardogiorgio.dinardo@domusdotnet.orghttp://blogs.ugidotnet.org/akelitz/@akelitz
  2. 2. brought to you by
  3. 3. GIORGIO DI NARDO Lavoro presso Proge-software come Senior Consultant Sono tra i fondatori di DomusDotNet Sono Microsoft Certified Trainerchi sono
  4. 4.  MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:estendere KO unit testing lato-client? si può! tutto qui!?agenda agile
  5. 5.  MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:estendere KO unit testing lato-client? si può! tutto qui!?agenda agile
  6. 6.  Pattern architetturale Model = dati View = interfaccia Controller = interazione Separation-of-Concerns Dependency Injection Convention-over-ConfigurationMVC4 = Model View Controller “in salsa” Model2ClientUtente(browser)ServerControllerViewModel
  7. 7.  Pattern di presentationdella famiglia MV* Separation-of-Concerns Rompere il legame fortetra i dati (Model) e la lororappresentazione (View)per mezzo di un terzosoggetto (ViewModel)MVVM = Model-View-ViewModel Si definiscono e si idratanoi dati (Model) davisualizzare Si veicolano i datiattraverso il ViewModelverso la View utilizzando unmeccanismo di data-bindche permetta la gestionebidirezionale degliaggiornamenti dei dati stessi Si definiscono delleoperazioni nel ViewModelper gestire gli eventi
  8. 8.  Model: i dati gestiti dall’applicazione rappresentati sottoforma di oggetto o array Javascript View: la pagina HTML contenente i vari elementi dimarkup ViewModel: un oggetto Javascript che espone i dati(Model) in un formato «comodo» per l’interfaccia (View) econtiene le operazioni per rispondere agli eventi da questageneratiMVVM in HTML
  9. 9.  Libreria in Javascript puro per semplificare la creazione inHTML di applicazioni basate su MVVM Caratteristiche principali: Binding dichiarativo dei dati nel markup HTML Gestione delle dipendenze con aggiornamento automatico nelle due direzioni Facilità di estensione delle funzionalità di base Compatibile con la maggior parte dei browser (IE 6+, Firefox2+, Chrome, …) Non sostituisce ma si integra con jQueryKnockout.js: cosa è?
  10. 10.  MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:estendere KO unit testing lato-client? si può! tutto qui!?agenda agile
  11. 11.  In tutti i casi in cui l’interazione del sistema con l’utentenon sia banale e richieda la definizione di una logica di UIstrutturata… … in particolare nelle Rich Internet Application (RIA)Knockout.js: quando usarlo?
  12. 12.  Aiuta ad aumentare la SoC del progetto anche nella partestoricamente più propensa allo «spaghetti code» Consente di gestire in maniera più strutturata emanutenibile gli elementi e gli eventi del DOM Semplifica enormemente i problemi di Unit testing dellaparte client della nostra applicazione….Knockout.js: perchè usarlo?
  13. 13.  Si creano gli oggetti ViewModel e si definiscono al lorointerno le proprietà observable contenenti i dati damostrare e le funzioni associate ai comandi scatenabilidalla View Si aggiungono gli attributi data-bind al markup dellapagina HTML Si attiva il binding con una chiamata al metodoko.applyBindingKnockout.js: come usarlo?
  14. 14. demoHello World
  15. 15.  MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:estendere KO unit testing lato-client? si può! tutto qui!?agenda agile
  16. 16.  Knockout garantisce out-of-the-box le funzioni per leggeree scrivere e per notificare le variazioni aisubscriber, però… … e possibile estendere il meccanismo degli observablein maniera semplice scrivendo poco righe di codice… … oppure sfruttare i plugin e gli extender disponibili adesempio su NuGetEstendere Knockout.js
  17. 17. demoHello World
  18. 18.  MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:estendere KO unit testing lato-client? si può! tutto qui!?agenda agile
  19. 19.  Parte dello sviluppo software che si occupa della verificadelle corrispondenza tra il funzionamento del codice e irequisiti Target (unit, integration, system) e Scope(functional, performance, scalability, acceptant, …) Consente di migliorare la qualità del propriocodice, ridurre il peso della manutenzione ma anche(TDD) migliorarne il designTesting, Unit testing e TDD
  20. 20.  Testare piccoli frammenti di codice («unit»), tipicamentemetodi Testare i soli endpoint pubblici Testare in maniera isolata rispetto al restodell’applicazione Ottenere il risultato positivo/negativo dei test in manieraautomatizzataPilastri dello Unit testing
  21. 21.  Utilizzare lo Unit testing per guidare lo sviluppo dellapropria applicazione Scrivere il codice strettamente necessario a passare i test Red/Green cycle Utilizzabile sia per i nuovi sviluppi che per il bug fixing Attenzione al refactoring!Test Driven Development
  22. 22.  Arrange: predisporre l’ambiente per il test Act: effettuare la chiamata al codice oggetto del test Assert: verificare che ciò che ci si aspettava si è verificato(e ciò che non ci si aspettava non si è verificato) Verificare un comportamento alla volta (single assertionrule)Arrange, Act, Assert
  23. 23.  Framework di test della famiglia jQuery Sintassi di Asserting semplice ed immediata Interfaccia chiara Possibilità di dividere i test in moduli Possibilità di preparare e ripulire l’ambiente di test inmaniera centralizzataqUnit
  24. 24. demoHello World
  25. 25.  MVC4 + MVVM = Knockout.js: cioè? Knockout.js: quando, perché e come datemi un punto dappoggio e solleverò il mondo:estendere KO unit testing lato-client? si può! tutto qui!?agenda agile
  26. 26.  Fornito di un motore di templating del markup HTML Corredato da Plugin (mapping, …) ed Extender(validation, ...) Disegnato per integrarsi al meglio con altri frameworkJavascript: Durandal.js, Require.js, ... Pilastro per costruzione delle Single Page ApplicationNo! Knockout.js è anche…
  27. 27. brought to you by
  28. 28. Grazie a tutti per la partecipazioneRiceverete il link per il download a slide e demo via email neiprossimi giorniPer contattarmigiorgio.dinardo@domusdotnet.orgGrazie
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×