Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MVC, MVVM & MVP ... números romanos o que?

MVC, MVVM & MVP ... números romanos o que?

Cada vez es más común el desarrollo de aplicaciones complejas donde la base de código, en gran parte o totalmente, está desarrollada en Javascript. Es aquí donde la mantenibilidad y testeabilidad de la apliación empieza a ser un gran problema.Es por esto que patrones que han probado ser útiles en el desarrollo de aplicaciones de escritorio empiezan a ser aplicados en el desarrollo de aplicaciones web, existiendo actualmente varios frameworks en JS que dicen implementarlos. La idea de la charla es revisar estos patrones y algunos de los frameworks más populares.

17411ddb51e17861ef4f8e2d866f7ab6?s=128

Guido Marucci Blas

May 20, 2012
Tweet

More Decks by Guido Marucci Blas

Other Decks in Programming

Transcript

  1. MVC MVVM MVP ¿números romanos ... ... o qué?

  2. Guido Marucci Blas @guidomb #JSConfAR

  3. None
  4. 20% JavaScript Javascript Ruby Python .1 .2 .3

  5. jQuery Node Bootstrap Backbone d3 three.js raphael socket.io express Ember

    Kendo Sencha JavaScript Momentum PhantomJS Jasmime underscore
  6. 100% JavaScript Code base

  7. Rich Internet Applications

  8. Rich Internet Applications Client

  9. Rich Internet Applications Client Responsive Design

  10. Rich Internet Applications Client Responsive Design UX

  11. Rich Internet Applications Client Responsive Design UX UI

  12. Rich Internet Applications Client Responsive Design UX UI Performance

  13. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

  14. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS
  15. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android
  16. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android Webkit
  17. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android Webkit ie
  18. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android Webkit ie 7
  19. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android Webkit ie 7 8
  20. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android Webkit ie 7 8 9
  21. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android Webkit ie 7 8 9 10
  22. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android Webkit ie 7 8 9 10 DOM
  23. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android Webkit ie 7 8 9 10 DOM Canvas
  24. Rich Internet Applications Client Responsive Design UX UI Performance Mobile

    iOS Android Webkit ie 7 8 9 10 DOM Canvas WebGL
  25. Problemas Empiezan a aparecer de ingeniería

  26. Problemas Empiezan a aparecer de ingeniería ¿ Por qué?

  27. a b a r c a r t o d

    a s l a s plataformas
  28. responder rápido al cambio

  29. desarrollar rápido al cambio desarrollar

  30. reutilizar código reutilizar código reutilizar código reutilizar código reutilizar código

    reutilizar código reutilizar código reutilizar código reutilizar código reutilizar código
  31. ¡divertirnos!

  32. “Scripteamos” la web jQuery al DOM

  33. “... seguro hay un plugin de jQuery que lo hace

    ...”
  34. $(function() { $(“input[type=search]”).chozen(); $(“select”).change(function(e) { $(“.loading”).fadeIn(); var category = $(this).val();

    var query = $(“input[type=search]”).val(); $.ajax({ url: “http://api.sky.net/terminators”, dataType: “jsonp” data: { category: category, query: query }, success: function(data) { $(“.loading”).fadeOut(); VIEWS.renderTerminator(data); window.history.pushState(“/search?query=” + query + “&category=” + category); } error: function() { $(“.loading”).fadeOut(); spaghetti code Lógica de presentación mezclada con lógica de negocios ¿testeabilidad & mantenibilidad? ... pero ...
  35. ¿Qué hacemos? Entonces . .

  36. TDD

  37. DD B

  38. DD B Continuos Deployment

  39. DD B Continuos Deployment Tests de aceptación

  40. MVC MVVM MVP ¿números romanos ... ... o qué?

  41. M V C

  42. Model

  43. Model Objeto de dominio

  44. Model Encapsula la lógica de negocio

  45. Model Agnóstico de la vista

  46. Model Maneja o dialoga con los servicios de persistencia

  47. View

  48. View Representación visual de los modelos

  49. View Layout

  50. View HTML DOM CSS

  51. View Mapeo de gestos swipe touchup mousedown hover click focus

    blur zoom keypress
  52. View Observa al modelo

  53. View Reacciona ante cambios del modelo y renderiza la vista

  54. Controller

  55. Controller Observa a la vista

  56. Controller Reacciona ante eventos de la vista y modifica el

    modelo
  57. Model Controller View Actualiza el estado del modelo Actualiza elementos

    de la vista Notifica cambios a la vista para ser renderizados Notifica gestos Llamada a un método Notificación de evento
  58. Application Model

  59. Controller App Model View Llamada a un método Notificación de

    evento Model
  60. M V P

  61. View

  62. View Las vistas son “tontas”

  63. View Expone una interfaz

  64. View Delega todo al presenter

  65. View Depende del presenter para actualizarse

  66. View No observa al modelo

  67. Presenter

  68. Presenter Encapsula lógica de presentación

  69. Presenter Observa al modelo

  70. Presenter Modifica la vista mediante su interfaz

  71. Presenter Desconoce la implementación concreta de la vista

  72. Presenter Mantiene estado de la vista

  73. View Llamada a un método Notificación de evento Model Actualiza

    el estado del modelo Notifica cambios de propiedades Actualiza la vista Presenter Notifica interacción
  74. M V V M

  75. View Model

  76. View Model Recibe comandos de la vista

  77. View Model Observa al modelo

  78. View Model Expone propiedades a la vista

  79. View Model Depende fuertemente del data binding

  80. View Model View Llamada a un método Notificación de evento

    Model Envío de comandos Actualiza el estado del modelo Notifica cambios de propiedades Notifica cambios para renderiar
  81. MVC MVP ¿Cuál usamos? MVVM O O O

  82. MVC MVP JavaScript MVVM X X X

  83. Spine Backbone Ember Knockout

  84. Spine Backbone Ember Knockout

  85. Knockout Implementa MVVM

  86. Knockout La vista es el HTML

  87. Knockout Los bindings se hacen en el HTML <div  class="user-view">

       Nombre:      <strong  data-­‐bind="text:firstName">    </strong> </div>
  88. Knockout Cambios en el view model actualizan automáticamente la vista

  89. Knockout var UserViewModel = function(firstName, lastName) { this.firstName = ko.observable(firstName);

    this.lastName = ko.observable(lastName); } var vm = new UserViewModel("juan", "pérez"); ko.applyBindings(vm, "div.user-view"); ... vm.firstName("pablo"); ...
  90. Knockout Incluye su propio template engine Pero se puede usar

    otro
  91. Knockout Es una librería simple y fácil de usar

  92. Knockout ... pero ...

  93. Knockout No tiene manejo de rutas ... ... se puede

    usar sammy.js
  94. Knockout No hay herencia de vistas

  95. Knockout El estado de los modelos debe ser persistido de

    forma “manual”
  96. Knockout Totalmente acoplado al DOM

  97. Spine Backbone Ember Knockout

  98. Backbone Implementa ... MV# ...

  99. Backbone Tiene 4 clases Model View Router Collection

  100. Backbone Router Se encarga de asociar una ruta a una

    función var Workspace = Backbone.Router.extend({ routes: { "help": "help", "search/:query": "search", "search/:query/p:page": "search" }, help: function() { ... }, search: function(query, page) { ... } });
  101. Backbone Model Notifica eventos cuando cambia el estado var User

    = Backbone.Model.extend({ defaults: { firstName: "juan", lastName: "pérez" } fullName: function() { return this.get("firstName") + " " + this.get("lastName"); } }); new User().on("change:firstName", function(){alert("Hello!")});
  102. Backbone Model Cada modificación es enviada al servidor user.set("firstName", "Guido");

    ... genera automáticamente ... POST /users/1 HTTP/1.1 Content-Type: "application/json" {"id":"1", firstName": "Guido"}
  103. Backbone Collection Es un set ordenado de objetos de modelo

    var Users = Backbone.Collection.extend({ model: User });
  104. Backbone Collection Se sicroniza con el servidor mediante operaciones REST

    Create - POST /collection Read - GET /collection Update - PUT /collection/id Delete - DELETE /collection/id
  105. Backbone Collection Notifica eventos add remove reset destroy sync error

  106. Backbone View Representa un componente de UI reusable UserView =

    Backbone.View.extend({ events: { ".update-btn click": "updateUser" }, initialize: function() { this.model.on("change", this.render, this); }, render: function() { // Update DOM } });
  107. Backbone Depende de Underscore y jQuery o Zepto

  108. Backbone Se puede usar cualquier template engine

  109. Backbone Extender backbone es fácil

  110. Backbone Buena documentación

  111. Backbone Chaplin Thorax Marionette

  112. Spine Backbone Ember Knockout

  113. Spine Dice implementar MVC

  114. Spine Es el primo lejano de backbone

  115. Spine Implementado en Coffeescript

  116. Spine UserView = Spine.Controller.sub({ events: { ".update-btn click": "updateUser" },

    init: function() { var render = this.proxy(this.render, this); this.item.bind("change", render); }, render: function() { // Update DOM } }); Spine Controller = Backbone View
  117. Spine No hay colecciones como en backbone var users =

    User.all(); var user = User.find(1); var user = User.findByAttribute("name", "juan"); var allowedUsers = User.select(function(user) { return user.age >= 18 };
  118. Spine Soporta persistencia usando Ajax o LocalStorage

  119. Spine No hay router Las rutas se declaran en el

    controller var MyController = Spine.Controller.sub({ init: function() { this.routes({ "/user/:email" : function(params) { console.log(params.email) } }); } });
  120. Spine Los controllers se pueden agrupar en stacks var PostsShow

    = Spine.Controller.sub(); var PostsEdit = Spine.Controller.sub(); var Posts = Spine.Stack.sub({ controllers: { show: PostsShow, edit: PostsEdit }, default: "show" });
  121. Spine Backbone Ember Knockout

  122. Ember Se puede usar cualquier patrón MVC MVVM MVP

  123. Ember Ember.View Ember.Object Handlebars Data Binding

  124. Ember Incluye un poderoso sistema de data binding app.user =

    Ember.Object.create({ firstName: "Juan", lastName: "Pérez", age: 19 }); app.userView = Ember.View.create({ firstNameBinding: "app.user.firstName", lastNameBinding: "app.user.lastName", textColor: function() { return (app.user.get("age")) >= 18 ? "green" : "red"; }.property(); });
  125. Ember Las vistas escuchan propiedades y se actualizan solas <script

    type="text/x-handlebars"> <div {{bindAttr class="textColor"}}> Nombre: {{app.userView.firstName}} </div> </script>
  126. Ember El template engine es handlebars

  127. Ember Es posible armar una jeraquía de vistas

  128. Ember No tiene manejo de persistencia Ember Data Module

  129. Ember No tiene manejo de rutas Sprout Core Routing Module

  130. Spine Backbone Ember Knockout

  131. Backbone Como se implementó la barra de búsqueda

  132. None
  133. Categoría Búsqueda Orden Filtro SearchView

  134. ¿Qué? ¿Cúales? ¿Dónde?

  135. Búsqueda Orden Condición Provincia Categoría HTML5 History API

  136. None
  137. Search ArticleCollection SearchView URLSearchView

  138. ¡Muchas Gracias! @guidomb @mrtnslv