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.

Transcript

1. MVC MVVM MVP ¿números romanos ... ... o qué?
2. Guido Marucci Blas @guidomb #JSConfAR
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
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
137. Search ArticleCollection SearchView URLSearchView
138. ¡Muchas Gracias! @guidomb @mrtnslv