Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)

1,202 views

Published on

Responsive web design, HTML5, CSS3, IDE, API, React, Angular, веб-компоненты, БЭМ... Опытным фронтендерам эти слова давно знакомы. А как насчет таких классических архитектур как MVC, MVP или MVVM? Знаете ли вы, что такое MVP, и почему Angular.js построен на паттерне MVVM, а не MVC, хотя в этом фреймворке активно используется понятие "контроллер"? Чем эти три архитектуры отличаются друг от друга, и зачем, вообще, о них нужно знать фронтендеру?

В своем докладе я хочу рассмотреть эти три понятия как с теоретической (история, концепция, назначение), так и с практической точки зрения. На простых примерах я покажу, как можно организовать ту или иную архитектуру во фронтендовой части веб-приложения, а также рассмотрю некоторые архитектурные паттерны, которые позволяют увеличить читабельность и добавить модульность и переносимость кода.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)

  1. 1. Классические архитектуры во фронтенде Александра Шинкевич (@neesoglasnaja)
  2. 2. MV* MVC MVP MVVM 2
  3. 3. Flux 3
  4. 4. bit.ly/fc2016-mv 4
  5. 5. Пример 5
  6. 6. TodoList 6
  7. 7. Никакой архитектуры 1. HTML 7
  8. 8. Никакой архитектуры 1. HTML 2. JS 8
  9. 9. Никакой архитектуры 1. HTML 2. JS 3. AJAX 9
  10. 10. Проблемы — Данные хранятся в DOM — Вариативность синтаксиса 10
  11. 11. MV* MVC MVP MVVM 11
  12. 12. 12
  13. 13. Преимущества MV* — Определенная структура — Модульность — Переносимость — Масштабируемость — Тестируемость 13
  14. 14. MVC MV* MVP MVVM 14
  15. 15. MVC 15
  16. 16. MVC 16
  17. 17. MVC 17
  18. 18. MVC 18
  19. 19. MVC 19
  20. 20. MVC 20
  21. 21. MVC 21
  22. 22. MVC 22
  23. 23. MVC 23
  24. 24. MVC 24
  25. 25. MVC 25
  26. 26. MVC 26
  27. 27. Пример MVC 27
  28. 28. MVC: HTML <!-- ... --> <body> <script src=" js/utils.js "></script> <script src=" js/models.js "></script> <script src=" js/views.js "></script> <script src=" js/controllers.js "></script> <script src=" js/app.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 07. 08. 09. 28
  29. 29. MVC: HTML <!-- ... --> <body> <script src=" js/utils.js "></script> <script src=" js/models.js "></script> <script src=" js/views.js "></script> <script src=" js/controllers.js "></script> <script src=" js/app.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 07. 08. 09. 29
  30. 30. MVC: app.js var list = new ListController() ;01. 30
  31. 31. MVC: HTML <!-- ... --> <body> <script src=" js/utils.js "></script> <script src=" js/models.js "></script> <script src=" js/views.js "></script> <script src=" js/controllers.js "></script> <script src=" js/app.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 07. 08. 09. 31
  32. 32. MVC: controllers.js function ListController() { var model = new TasksModel() ; var view = new ListView( model ); } 01. 02. 03. view.addCreateTaskHandler(function(taskTitle) { ... });04. view.addCheckedHandler(function(id) { ... });05. 06. 32
  33. 33. MVC: controllers.js function ListController() { view. addCreateTaskHandler (function(taskTitle) { ... }); view. addCheckedHandler (function(id) { ... }); } 01. var model = new TasksModel();02. var view = new ListView(model);03. 04. 05. 06. 33
  34. 34. MVC: HTML <!-- ... --> <body> <script src=" js/utils.js "></script> <script src=" js/models.js "></script> <script src=" js/views.js "></script> <script src=" js/controllers.js "></script> <script src=" js/app.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 07. 08. 09. 34
  35. 35. MVC: views.js function ListView(model) { var html = $( ... ); } 01. 02. customEvents.registerEvent('UpdateList');03. customEvents.addEventListener('UpdateList', function() { ... });04. return {05. addCreateTaskHandler: function(handler) { ... },06. addCheckedHandler: function(handler) { ... }07. };08. 09. 35
  36. 36. MVC: views.js function ListView(model) { customEvents. registerEvent ('UpdateList'); customEvents. addEventListener ('UpdateList', function() { ... }); } 01. var html = $( ... );02. 03. 04. return {05. addCreateTaskHandler: function(handler) { ... },06. addCheckedHandler: function(handler) { ... }07. };08. 09. 36
  37. 37. MVC: views.js function ListView(model) { return { addCreateTaskHandler : function(handler) { ... }, addCheckedHandler : function(handler) { ... } }; } 01. var html = $( ... );02. customEvents.registerEvent('UpdateList');03. customEvents.addEventListener('UpdateList', function() { ... });04. 05. 06. 07. 08. 09. 37
  38. 38. MVC: HTML <!-- ... --> <body> <script src=" js/utils.js "></script> <script src=" js/models.js "></script> <script src=" js/views.js "></script> <script src=" js/controllers.js "></script> <script src=" js/app.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 07. 08. 09. 38
  39. 39. MVC: models.js function TasksModel() { return { data : {}, getAll : function() { ... }, addItem : function(name) { ... }, deleteItem : function(id) { ... }, }; }; 01. 02. 03. 04. 05. 06. 07. 08. 39
  40. 40. MVC: models.js addItem: function(name) { customEvents. dispatchEvent ('UpdateList'); } 01. this.data[(new Date()).getTime()] = name;02. 03. 04. 40
  41. 41. MVC: Приложение Awesome MVC task list Don't forget! Add a new task: What do you need to do? I need to do   Add 41
  42. 42. MVP MV* MVC MVVM 42
  43. 43. MVP 43
  44. 44. MVP 44
  45. 45. MVP 45
  46. 46. MVP 46
  47. 47. MVP 47
  48. 48. MVP 48
  49. 49. MVP 49
  50. 50. MVP 50
  51. 51. MVP 51
  52. 52. MVP 52
  53. 53. Пример MVP 53
  54. 54. MVP: HTML <!-- ... --> <body> <script src=" js/utils.js "></script> <script src=" js/models.js "></script> <script src=" js/views.js "></script> <script src=" js/presenters.js "></script> <script src=" js/app.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 07. 08. 09. 54
  55. 55. MVP: HTML <!-- ... --> <body> <script src=" js/utils.js "></script> <script src=" js/models.js "></script> <script src=" js/views.js "></script> <script src=" js/presenters.js "></script> <script src=" js/app.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 07. 08. 09. 55
  56. 56. MVP: app.js var list = new ListPresenter() ;01. 56
  57. 57. MVP: HTML <!-- ... --> <body> <script src=" js/utils.js "></script> <script src=" js/models.js "></script> <script src=" js/views.js "></script> <script src=" js/presenters.js "></script> <script src=" js/app.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 07. 08. 09. 57
  58. 58. MVP: presenters.js function ListPresenter() { var view = new ListView( model.getAll() ); customEvents. registerEvent ('UpdateList'); customEvents. addEventListener ('UpdateList', function() { ... }); } 01. var model = new TasksModel();02. 03. view.addCreateTaskHandler(function(taskTitle) { ... });04. view.addCheckedHandler(function(id) { ... });05. 06. 07. 08. 58
  59. 59. MVP: HTML <!-- ... --> <body> <script src=" js/utils.js "></script> <script src=" js/models.js "></script> <script src=" js/views.js "></script> <script src=" js/presenters.js "></script> <script src=" js/app.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 07. 08. 09. 59
  60. 60. MVP: views.js function ListView(data) { return { updateView : function(data) { ... } }; } 01. var html = $( ... );02. 03. addCreateTaskHandler: function(handler) { ... },04. addCheckedHandler: function(handler) { ... },05. 06. 07. 08. 60
  61. 61. MVP: Приложение Awesome MVP task list Don't forget! Add a new task: What do you need to do? I need to do   Add 61
  62. 62. MVVM MV* MVC MVP 62
  63. 63. MVVM 63
  64. 64. Связывание данных Это такой механизм, при котором изменение значения модели с любой стороны (View или Model) моментально вступает в силу на другой. 64
  65. 65. MVVM 65
  66. 66. Пример MVVM 66
  67. 67. Knockout.js Open-source фреймворк, реализующий Model-View-ViewModel на Javascript и data binding. 67
  68. 68. MVVM: HTML <body> <!-- Разметка html --> <script src=" js/knockout-3.4.0.min.js "></script> <script src=" js/viewmodel.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 68
  69. 69. MVVM: HTML <form data-bind=" submit: addItem " > <ul data-bind=" foreach: items " > <li> <label data-bind=" click: $parent.removeItem " > <input type="checkbox"> <span data-bind=" text: $data " ></span> </label> </li> <!-- ... --> 01. 02. 03. 04. 05. 06. 07. 08. 09. 69
  70. 70. MVVM: HTML <body> <!-- Разметка html --> <script src=" js/knockout-3.4.0.min.js "></script> <script src=" js/viewmodel.js "></script> </body> </html> 01. 02. 03. 04. 05. 06. 70
  71. 71. MVVM: viewmodel.js var ListViewModel = function(items) { return { items : ko.observableArray(items), itemToAdd : ko.observable(""), }; }; 01. 02. 03. 04. addItem: function() { ... },05. removeItem: function() { ... },06. 07. 08. ko.applyBindings(new ListViewModel([]));09. 71
  72. 72. MVVM: viewmodel.js var ListViewModel = function(items) { return { addItem : function() { ... }, removeItem : function() { ... }, }; }; 01. 02. items: ko.observableArray(items),03. itemToAdd: ko.observable(""),04. 05. 06. 07. 08. ko.applyBindings(new ListViewModel([]));09. 72
  73. 73. MVVM: viewmodel.js ko.applyBindings(new ListViewModel([])); var ListViewModel = function(items) {01. return {02. items: ko.observableArray(items),03. itemToAdd: ko.observable(""),04. addItem: function() { ... },05. removeItem: function() { ... },06. };07. };08. 09. 73
  74. 74. MVVM: Приложение Awesome MVVM task list Don't forget! Add a new task: What do you need to do? I need to do   Add 74
  75. 75. Что выбрать — Есть/можно использовать связывание данных: MVVM — Нет/нельзя использовать связывание данных: MVP — Нужна связь представления и данных: MVС 75
  76. 76. Хочу больше — Wiki: архитектура ПО, MVC, MVP, MVVM, шаблоны проектирования — [Хабр] Паттерны для новичков: MVC vs MVP vs MVVM — [Хабр] И опять про MVC — Addy Osmani: Understanding MVC And MVP [en] — Learning JavaScript Design Patterns by Addy Osmani (ebook) [en] — MVC в JavaScript — Knockout. — TodoMVC 76
  77. 77. Вместо вывода 77
  78. 78. Вопросы? bit.ly/fc2016-mv 78

×