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

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