Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Классические архитектуры во фронтенде

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Aleksandra Shinkevich Aleksandra Shinkevich
June 01, 2016
Programming
170
0

Классические архитектуры во фронтенде

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

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

Avatar for Aleksandra Shinkevich

Aleksandra Shinkevich

June 01, 2016

Other Decks in Programming

See All in Programming
AIで開発が速くなった先で、開発チームは何を目指すか
Avatar for Yuki Shiho shihochan
1
1.6k
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
35
17k
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
150
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380
気持ちぃ〜角丸 Squircle
Avatar for ryu ryu1013
0
310
個人開発者よ、Honoを使え（おじさんver）
Avatar for tanahiro2010 tanahiro2010
2
260
AI主導のプログラミング学習アプリを作ってみた
Avatar for econanringo econanringo
0
180
外から家のPCの電源入れたい！をＰＨＰで解決する
Avatar for かわしも（Shimokawa Shion） kawashimo0
1
140
Web Framework Benchmark Battle 2026, Any%
Avatar for Akira Matsuda a_matsuda
2
2.3k
[JA] Domain Modeling with Vanilla Rails: 「操作」から再考するRailsの設計論
Avatar for Yuichi Goto yasaichi
3
410
R8 の設定見直しでアプリサイズ削減
Avatar for ANDPAD inc andpad
0
220
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
0
550

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
22k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
2
6.3k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
530
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
710
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
40k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
2.9k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k

Transcript

  1. Классические архитектуры во фронтенде Александра Шинкевич (@neesoglasnaja)

  2. MV* MVC MVP MVVM 2

  3. Flux 3

  4. bit.ly/fc2016-mv 4

  5. Пример 5

  6. TodoList 6

  7. Никакой архитектуры 1. HTML 7

  8. Никакой архитектуры 1. HTML 2. JS 8

  9. Никакой архитектуры 1. HTML 2. JS 3. AJAX 9

  10. Проблемы — Данные хранятся в DOM — Вариативность синтаксиса 10

  11. MV* MVC MVP MVVM 11

  12. 12

  13. Преимущества MV* — Определенная структура — Модульность — Переносимость —

    Масштабируемость — Тестируемость 13

  14. MVC MV* MVP MVVM 14

  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

  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. MVP MV* MVC MVVM 42

  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

  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. MVVM MV* MVC MVP 62

  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

  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. Что выбрать — Есть/можно использовать связывание данных: 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

  78. Вопросы? bit.ly/fc2016-mv 78