Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)
•
1 gostou•1,489 visualizações
Responsive web design, HTML5, CSS3, IDE, API, React, Angular, веб-компоненты, БЭМ... Опытным фронтендерам эти слова давно знакомы. А как насчет таких классических архитектур как MVC, MVP или MVVM? Знаете ли вы, что такое MVP, и почему Angular.js построен на паттерне MVVM, а не MVC, хотя в этом фреймворке активно используется понятие "контроллер"? Чем эти три архитектуры отличаются друг от друга, и зачем, вообще, о них нужно знать фронтендеру? В своем докладе я хочу рассмотреть эти три понятия как с теоретической (история, концепция, назначение), так и с практической точки зрения. На простых примерах я покажу, как можно организовать ту или иную архитектуру во фронтендовой части веб-приложения, а также рассмотрю некоторые архитектурные паттерны, которые позволяют увеличить читабельность и добавить модульность и переносимость кода.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (9)
Destaque
Destaque (20)
Mais de Ontico
Mais de Ontico (20)
Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)
- 1. Классические архитектуры во фронтенде Александра Шинкевич (@neesoglasnaja)
- 3. Flux 3
- 5. Пример 5
- 6. TodoList 6
- 8. Никакой архитектуры 1. HTML 2. JS 8
- 9. Никакой архитектуры 1. HTML 2. JS 3. AJAX 9
- 10. Проблемы — Данные хранятся в DOM — Вариативность синтаксиса 10
- 12. 12
- 13. Преимущества MV* — Определенная структура — Модульность — Переносимость — Масштабируемость — Тестируемость 13
- 15. MVC 15
- 16. MVC 16
- 17. MVC 17
- 18. MVC 18
- 19. MVC 19
- 20. MVC 20
- 21. MVC 21
- 22. MVC 22
- 23. MVC 23
- 24. MVC 24
- 25. MVC 25
- 26. MVC 26
- 27. Пример MVC 27
- 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. 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. MVC: app.js var list = new ListController() ;01. 30
- 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. 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. 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. 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. 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. 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. 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. 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. 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. MVC: models.js addItem: function(name) { customEvents. dispatchEvent ('UpdateList'); } 01. this.data[(new Date()).getTime()] = name;02. 03. 04. 40
- 43. MVP 43
- 44. MVP 44
- 45. MVP 45
- 46. MVP 46
- 47. MVP 47
- 48. MVP 48
- 49. MVP 49
- 50. MVP 50
- 51. MVP 51
- 52. MVP 52
- 53. Пример MVP 53
- 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. 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. MVP: app.js var list = new ListPresenter() ;01. 56
- 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. 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. 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. 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
- 63. MVVM 63
- 64. Связывание данных Это такой механизм, при котором изменение значения модели с любой стороны (View или Model) моментально вступает в силу на другой. 64
- 65. MVVM 65
- 66. Пример MVVM 66
- 67. Knockout.js Open-source фреймворк, реализующий Model-View-ViewModel на Javascript и data binding. 67
- 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. 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. 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. 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. 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. 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
- 75. Что выбрать — Есть/можно использовать связывание данных: MVVM — Нет/нельзя использовать связывание данных: MVP — Нужна связь представления и данных: MVС 75
- 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