Компонентный подход:
cкучно, неинтересно, бесперспективно

Роман Дворнов
Ostrovok.ru
Самара, 2013
2
Немного о себе
• Работаю в Ostrovok.ru
• Ранее руководил
веб-разработкой
в ПС Единый кошелек

• Автор и мейтейнер
фреймвор...
Веб-приложения

4
Это практично, удобно и
воcтребовано

5
Все больше сайтов
становятся SPA*

* Single page application
6
Как делать?

7
jQuery style
Zepto, KnockoutJS, etc.

8
Предназначены
для декорация сайтов,
а не для разработки
приложений

9
Да, можно использовать
для приложений

10
Но лучше не стоит ;)

11
Работа «мечты»

12
MVC

13
Определены роли
и разделена
ответственность

14
Примерно так

(из википедии)
15
Каждый понимает
по-своему

16
Не определен подход
к декомпозиции

17
Много вопросов
• Как поступать со сложносоставными
моделями?

• Как разбивать большие view на части?
• Часто не понятно, к...
Пример

19
Это все одно view

20
В цифрах
• 1 JavaScript файл на 4500+ строк

• 150+ методов
• 150+ свойств

21
22
«Это может случиться
даже с лучшими из нас»

23
Понять и простить...
24
Компонентный
подход

25
«Component-based software engineering
(CBSE) ... is a reuse-based approach
to defining, implementing and composing
loosely ...
Слабые связи и
декомпозиция

27
Обычный подход
list
item
item
item
item
item

28
Компонентный подход
list

item
item
item
item
item
29
Обычный подход
window
form
field
field
button panel
button

button
30
Компонентный подход
window

form

field
field

button panel
button

button
31
Фреймворки

32
Компонентные
фреймворки
• Dojo Toolkit
• qooxdoo
• YUI
• Ext.js (Sencha)
• Google Closure
33
Преимущество

34
Недостатки
• Сложные – необъятное API, много
классов, свойств и пр.

• Большой объем (ext-all.js min ~1.5 MB)
• Медленные
...
Эти факторы
сформировали
негативное отношение
к компонентному походу

36
Фреймворки
меняются к лучшему,
но недостаточно сильно,
чтобы изменить
устоявшееся мнение
37
Почему так получилось?

38
Время появления
фреймворков
• Dojo Toolkit – 2004
• qooxdoo – 2005
• YUI – 2006
• Ext.js – 2007
39
Не было понимания как
делать веб-приложения,
но был опыт разработки
desktop-приложений

40
Desktop IDE

Borland Delphi 6
41
Особенности
• Для отрисовки нужно работать с GDI
и другими системными API

• Управление памятью
• Компилируемые языки и ст...
Настройка компонент

43
Сложность отрисовки
Много свойств,
отвечающих
за внешний вид

44
Разработчики
фреймворков не стали
изобретать новых
подходов

45
Сложности перевода
• Отсутсвие в javascript приватных свойств
(private, protected etc), getters/setters*
→ большое количес...
Наследство
• Подходы к построению API, именованию
• Структура компонент
• Большие компоненты
• Стилизация в коде
47
Эти факторы определили
первоначальный вид
компонентных
фреймворков

48
А сейчас большинству
мешает тяжелое
наследие

49
Все ли так плохо?

50
1. Сложность

51
Основа компонент
Фреймворк

Класс

Кол-во свойств

qooxdoo

qx.ui.core.Widget

538

ext.js

Ext.Component

391

YUI

Y.Wid...
Строим дерево

53
Ext.js
• Больше часа, чтобы разобраться
• Примеры не помогают
• Вручную дерево не построить, только
через store или «хитры...
Google Сlosure
• ~20 минут чтобы разобраться
• Помог пример
• +15 мин чтобы оптимизировать

и уменьшить время вдвое
(можно...
qooxdoo
• Не взлетел Потребовалась "помощь из зала"
• Чтобы сделать приложение надо
использовать инструменты на python (!)...
Dojo
• Очень сложно
• Запутанная документация и примеры
• Кое как получилось построить дерево,
но не получилось разобратьс...
basis.js
• Ну вы понимаете ;)
• Есть примеры
• Документация пишется (готово ~30%)
• Сам интерфейс – большое дерево
• Можно...
basis.ui.Node
• listener, состояние, синхронизация,
подписка

• хранение данных, привязка данных
• управление дочерними уз...
2. Размер сборки

60
Практически все
фреймворки используют
модульность и систему
зависимостей

61
В сборку попадает только
то, что используется
в проекте

62
Сравниваем

63
TodoMVC
• Ext.js – 1.2 MB фреймворк + уже неважно ;)
• YUI – 300 KB
• Dojo – 298 KB
• basis.js – 152 KB
• Google Closure –...
TodoMVC
• Ember.js – 403 KB
• Knockback – 197 KB
• jQuery (+handlebars) – 133 KB
• backbone.js – 132 KB
• AngularJS – 83 K...
3. Производительность

66
Построение дерева
Фреймворк

100 листьев

2000 листьев

qooxdoo

131* ms

3024* ms

Ext.js

52 ms

859 ms

Google Closure
...
TodoMVC
100 todo

1000 todo

AngularJS

125 ms

1491 ms

Backbone.js

53 ms

523 ms

Knockout

39 ms

489 ms

vanilla

23 ...
Заключение

69
Все еще нет четкого
понимания как должны
быть устроенны
веб-приложения

70
Веб-приложения –
это не просто сайт,
но и desktop практики
неэффективны

71
jQuery, knockout,
Backbone.js, AngularJS,
Ember.js и др.
Становятся все больше и сложнее,
приводят к неэффективным
решения...
Ext.js, Dojo,YUI, Google
Closure, qooxdoo и др.
Становятся лучше, меньше размер
сборки, быстрее, но по прежнему
сложные, в...
Изучайте компонентный
подход!

74
Используйте

75
Творите

76
Это круто! ;)

77
Вопросы?
Роман Дворнов
@rdvornov
rdvornov@gmail.com

basis.js
basisjs.com
github.com/basisjs
78
Upcoming SlideShare
Loading in...5
×

Компонентный подход: скучно, неинтересно, бесперспективно

2,153

Published on

Использование компонентного подхода это тяжеловесно, медленно, не гибко. Так ли это?

Доклад с фестиваля 404, Самара, 13 октября 2013
Видео: https://www.youtube.com/watch?v=QpZy0WW0Ig4

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,153
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Компонентный подход: скучно, неинтересно, бесперспективно

  1. 1. Компонентный подход: cкучно, неинтересно, бесперспективно Роман Дворнов Ostrovok.ru Самара, 2013
  2. 2. 2
  3. 3. Немного о себе • Работаю в Ostrovok.ru • Ранее руководил веб-разработкой в ПС Единый кошелек • Автор и мейтейнер фреймворка basis.js 3
  4. 4. Веб-приложения 4
  5. 5. Это практично, удобно и воcтребовано 5
  6. 6. Все больше сайтов становятся SPA* * Single page application 6
  7. 7. Как делать? 7
  8. 8. jQuery style Zepto, KnockoutJS, etc. 8
  9. 9. Предназначены для декорация сайтов, а не для разработки приложений 9
  10. 10. Да, можно использовать для приложений 10
  11. 11. Но лучше не стоит ;) 11
  12. 12. Работа «мечты» 12
  13. 13. MVC 13
  14. 14. Определены роли и разделена ответственность 14
  15. 15. Примерно так (из википедии) 15
  16. 16. Каждый понимает по-своему 16
  17. 17. Не определен подход к декомпозиции 17
  18. 18. Много вопросов • Как поступать со сложносоставными моделями? • Как разбивать большие view на части? • Часто не понятно, кто должен отвечать за функциональность 18
  19. 19. Пример 19
  20. 20. Это все одно view 20
  21. 21. В цифрах • 1 JavaScript файл на 4500+ строк • 150+ методов • 150+ свойств 21
  22. 22. 22
  23. 23. «Это может случиться даже с лучшими из нас» 23
  24. 24. Понять и простить... 24
  25. 25. Компонентный подход 25
  26. 26. «Component-based software engineering (CBSE) ... is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems...» http://en.wikipedia.org/wiki/Software_component 26
  27. 27. Слабые связи и декомпозиция 27
  28. 28. Обычный подход list item item item item item 28
  29. 29. Компонентный подход list item item item item item 29
  30. 30. Обычный подход window form field field button panel button button 30
  31. 31. Компонентный подход window form field field button panel button button 31
  32. 32. Фреймворки 32
  33. 33. Компонентные фреймворки • Dojo Toolkit • qooxdoo • YUI • Ext.js (Sencha) • Google Closure 33
  34. 34. Преимущество 34
  35. 35. Недостатки • Сложные – необъятное API, много классов, свойств и пр. • Большой объем (ext-all.js min ~1.5 MB) • Медленные • Сложно кастомизировать, переопределять поведение и стили • Слишком большие для простых приложений 35
  36. 36. Эти факторы сформировали негативное отношение к компонентному походу 36
  37. 37. Фреймворки меняются к лучшему, но недостаточно сильно, чтобы изменить устоявшееся мнение 37
  38. 38. Почему так получилось? 38
  39. 39. Время появления фреймворков • Dojo Toolkit – 2004 • qooxdoo – 2005 • YUI – 2006 • Ext.js – 2007 39
  40. 40. Не было понимания как делать веб-приложения, но был опыт разработки desktop-приложений 40
  41. 41. Desktop IDE Borland Delphi 6 41
  42. 42. Особенности • Для отрисовки нужно работать с GDI и другими системными API • Управление памятью • Компилируемые языки и статическая типизация • Для упрощения множество классов были объеденены в единое целое и представлялись одним компонентом 42
  43. 43. Настройка компонент 43
  44. 44. Сложность отрисовки Много свойств, отвечающих за внешний вид 44
  45. 45. Разработчики фреймворков не стали изобретать новых подходов 45
  46. 46. Сложности перевода • Отсутсвие в javascript приватных свойств (private, protected etc), getters/setters* → большое количество свойств и сложное API • В javascript используется прототипное наследование → эмуляция классической модели в ущерб производительности * стандартизированы только в ES5 46
  47. 47. Наследство • Подходы к построению API, именованию • Структура компонент • Большие компоненты • Стилизация в коде 47
  48. 48. Эти факторы определили первоначальный вид компонентных фреймворков 48
  49. 49. А сейчас большинству мешает тяжелое наследие 49
  50. 50. Все ли так плохо? 50
  51. 51. 1. Сложность 51
  52. 52. Основа компонент Фреймворк Класс Кол-во свойств qooxdoo qx.ui.core.Widget 538 ext.js Ext.Component 391 YUI Y.Widget 180 Google Closure goog.ui.Container goog.ui.Control 164 172 basis.js basis.ui.Node 126 Dojo dijit._Widget 87 52
  53. 53. Строим дерево 53
  54. 54. Ext.js • Больше часа, чтобы разобраться • Примеры не помогают • Вручную дерево не построить, только через store или «хитрым» методом, найденым методом научного тыка 54
  55. 55. Google Сlosure • ~20 минут чтобы разобраться • Помог пример • +15 мин чтобы оптимизировать и уменьшить время вдвое (можно манипулировать узлами) 55
  56. 56. qooxdoo • Не взлетел Потребовалась "помощь из зала" • Чтобы сделать приложение надо использовать инструменты на python (!) • Примеры в скомпилированом виде • Примеров мало 56
  57. 57. Dojo • Очень сложно • Запутанная документация и примеры • Кое как получилось построить дерево, но не получилось разобраться как его менять 57
  58. 58. basis.js • Ну вы понимаете ;) • Есть примеры • Документация пишется (готово ~30%) • Сам интерфейс – большое дерево • Можно быстро собрать собственное дерево используя basis.ui.Node 58
  59. 59. basis.ui.Node • listener, состояние, синхронизация, подписка • хранение данных, привязка данных • управление дочерними узлами • сортировка, группировка • selection, disabled/enabled • взаимодействие с шаблоном 59
  60. 60. 2. Размер сборки 60
  61. 61. Практически все фреймворки используют модульность и систему зависимостей 61
  62. 62. В сборку попадает только то, что используется в проекте 62
  63. 63. Сравниваем 63
  64. 64. TodoMVC • Ext.js – 1.2 MB фреймворк + уже неважно ;) • YUI – 300 KB • Dojo – 298 KB • basis.js – 152 KB • Google Closure – 55 KB 64
  65. 65. TodoMVC • Ember.js – 403 KB • Knockback – 197 KB • jQuery (+handlebars) – 133 KB • backbone.js – 132 KB • AngularJS – 83 KB • KnockoutJS – 52 KB 65
  66. 66. 3. Производительность 66
  67. 67. Построение дерева Фреймворк 100 листьев 2000 листьев qooxdoo 131* ms 3024* ms Ext.js 52 ms 859 ms Google Closure 13 ms 216 ms basis.js 3 ms 68 ms * не включает рендеринг 67
  68. 68. TodoMVC 100 todo 1000 todo AngularJS 125 ms 1491 ms Backbone.js 53 ms 523 ms Knockout 39 ms 489 ms vanilla 23 ms 1882 ms jQuery 20 ms 184 ms basis.js 8 ms 95 ms 68
  69. 69. Заключение 69
  70. 70. Все еще нет четкого понимания как должны быть устроенны веб-приложения 70
  71. 71. Веб-приложения – это не просто сайт, но и desktop практики неэффективны 71
  72. 72. jQuery, knockout, Backbone.js, AngularJS, Ember.js и др. Становятся все больше и сложнее, приводят к неэффективным решениям 72
  73. 73. Ext.js, Dojo,YUI, Google Closure, qooxdoo и др. Становятся лучше, меньше размер сборки, быстрее, но по прежнему сложные, высокий порог входа 73
  74. 74. Изучайте компонентный подход! 74
  75. 75. Используйте 75
  76. 76. Творите 76
  77. 77. Это круто! ;) 77
  78. 78. Вопросы? Роман Дворнов @rdvornov rdvornov@gmail.com basis.js basisjs.com github.com/basisjs 78
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×