Документ обсуждает современные подходы к разработке веб-компонентов, подчеркивая преимущества использования библиотек и компонентов, таких как jQuery, Backbone и другие. Основное внимание уделяется принципам модульности, независимости и изоляции CSS в веб-разработке, а также важности управления зависимостями с помощью инструментов, таких как Bower и npm. Заключение акцентирует на том, что веб-компоненты могут значительно упростить разработку и улучшить структуру кода.

2. Components
Now!
Михаил Давыдов
РИТ++, 14-15 Апреля 2014

3. Библиотеки

4. ●jQuery — чинит DOM
●Underscore — добавляет API ECMAScript 5
●Backbone — приносит MV*
●Все они созданы для исправления Web
По историческим причинм хорошие инструменты - библиотеки.
The DOM is a Mess 2009
Библиотеки
04

5. Библиотеки везде

6. ●Тяжелые
–jQuery 2.0.3 — 230K (не сжатый)
●Их сложно понять
–Цикломатическая сложность $.ajax — 43
●Слишком могущественные
–$.ajax, $.animate, _
Библиотеки большие
06

7. ●Сложно использовать только маленькую часть
–$.Deferred, $.ajax
–_.template
●Приходится делить вручную
●Их модульность мало помогает
Их части тесно связаны
07

8. ●Все хотят jQuery
●Библиотеки зависят от библиотек
–Backbone+jQuery+Underscore
●Ручное управление зависимостями
–Bower и Npm — спасители!
Управление зависимостями
08

9. Веб починили*

11. ●querySelector
●CSS3 Selectors*
●Web Storage (localStorage)
●Cross-Origin Resource Sharing*
* полностью с полифилами
Can I Use
Важные DOM APIs
11

12. ECMAScript 5

13. ●CSS3 Selectors (медленный, но работает)
●Cross-Origin Resource Sharing
●HTML5 Elements
●ECMAScript 5
HTML5 Please polyfills
Полифилы чинят остальное
13

15. Mobile

16. Мобильный рынок растет

17. Почему мы все еще
используем
библиотеки?

18. Компоненты

19. Простые

20. ●Легкие
–dom — 28K, 3K self (не сжатый)
●Единственная ответственность & KISS-принцип
●Очень легко понять
–Поддерживать
–Писать тесты
Компоненты простые
20

21. Независимые

22. ●Содержат все зависимости
–Большая часть внешние
●Легко использовать повторно
– bower i name
– npm i name
●Легко использовать только часть
Компоненты независимы
22

23. Изолированные

24. ●Не конфликтуют с другими
–Изоляция CSS
–Гибкое представление
–Нет утечек глобалов
●Имеют ограниченный доступ к другим
– require()
Компоненты изолированы
24

26. ●Идея произвольного HTML элемента
●API/Framework
–Shadow DOM (Инкапсуляция)
–HTML Imports & Templates
–Template Binding
Web Components: A Tectonic Shift for Web Development
WebComponents
26

27. HTML Templates
Shadow DOM
Custom Elements
HTML Imports
Возможно починить в других барузерах, используя Polymer.
WebComponents в 2014 году
27

28. WebComponents API Альтернатива
Custom Elements Компонентные движки
Shadow DOM BEM Методология
HTML Templates Шаблонные движки
HTML Imports Инструменты сборки
Scoped CSS BEM или OOCSS
Template Binding Data binding
Альтернативы этим API
28

29. ●X-Tag
●jQuery UI Widgets
●Dojo Widgets
●React
●bem-tools
●basis.js
Компонентные движки
29

31. ●Изоляция CSS
●Блок — Custom Element
●Элемент — Shadow DOM
●Модификатор — Нет аналога
●i-bem — Логика блока
БЕМ и WebComponents
31

32. .tab-panel— Блок
.tab-panel__tab— Элемент
.tab-panel__tab_state_active

33. Давайте напишем
Компонент!

35. ●Компонент Простой
–KISS
●Компонент Независимый
–Все на борту
●Компонент Изолированный
–HTML, CSS, JS
Помним, что
35

36. Package file

37. // bower.json
{
"name": "my-share",
"version": "1.0.0",
"main": ["my-share.js"]
}
Bower и формат bower.json
Package file это контракт
01.
02.
03.
04.
05.
06.
37

38. HTML

39. <!-- my-share.html -->
<a href="{{ href }}" class="my-share">
<img src="{{ icon }}" class="my-share__icon"/>
<span class="my-share__label">{{ label }}</span>
</a>
Приватный HTML
01.
02.
03.
04.
05.
39

40. Интерфейс

41. <a class="my-share"
data-href="{{ href }}"
data-icon="{{ icon }}"
>{{ label }}</a>
Интерфейс похож на Custom Element из WebComponents.
Интерфейс компонента
01.
02.
03.
04.
41

42. <my-share
href="{{ href }}"
icon="{{ icon }}"
>{{ label }}</my-share>
WebComponents для сравнения
01.
02.
03.
04.
42

43. .my-share {}
.my-share__icon {
vertical-align: middle;
height: 16px;
}
.my-share__label {
padding-left: 5px;
}
CSS Компонента
01.
02.
03.
04.
05.
06.
07.
08.
43

44. my-share {}
.icon {
vertical-align: middle;
height: 16px;
}
.label {
padding-left: 5px;
}
CSS WebComponent
01.
02.
03.
04.
05.
06.
07.
08.
44

45. ●WebComponent — DOM API
– <style scoped>
●BEM
–Избегание каскада в CSS
–Соглашения именования .block__element
CSS изолирован
45

46. Зависимости

47. // bower.json
"dependencies": {
"tpl": "azproduction/lodash-template",
"domify": "component/domify",
"decl": "azproduction/decl"
}
Декларируем все зависимости.
Внешние зависимости
01.
02.
03.
04.
05.
06.
47

48. // my-share.js
var tpl = require('tpl'),
decl = require('decl'),
domify = require('domify');
var html = require('templates/my-share'),
template = tpl(html);
Связи модуля с другими
01.
02.
03.
04.
05.
06.
07.
48

49. function MyShare(el) {
this.options = this.collectOptions(el);
this.el = this.render();
this.delegateEvents();
this.replaceElement(el);
}
decl('.my-share', MyShare);
module.exports = MyShare;
Базовая логика компонента
01.
02.
03.
04.
05.
06.
07.
08.
49

50. ●CommonJS/Modules
–Нет утечек глобалов
–Просит зависимости, а не берет их
–Поставляет ресурсы
●Так же можно использовать AMD
JavaScript модуля изолирован
50

51. Сборка

52. ●Получение всех зависимостей
●Компиляция
–стили, скрипты, шаблоны
●Упаковка скриптов и шаблонов
●Конкатинация стилей
Сборка компонента
52

53. ●bem-tools
●Component
●Browserify
●LMD
Инструменты сборки
компонентов
53

54. <a class="my-share" ...>Tweet</a>
<link rel="stylesheet" href="my-share.css"/>
<script src="my-share.js"></script>
Компонент легко использовать
01.
02.
03.
54

55. <my-share ...>Tweet</my-share>
<link rel="import" href="my-share.html"/>
WebComponent
01.
02.
55

56. Живой пример
56

59. ●Web уже починили, Mobile растет
●Библиотеки слишком сложны
●WebComponents == API
●Пишите компоненты. Сегодня!
Заключение
59

60. Components Now!
Михаил Давыдов
@azproduction
60

61. ●Живой пример my-share
●You might not need jQuery
●BEM Методология
●Web Components
●Polymer Project
Полезные ресусы
61

62. clck.ru/97Zm8

63. ● minecraft.gamepedia.com/Blocks
● fr.fotopedia.com/wiki/Bibliothèque#!/items/flickr-6899137527
● www.planetminecraft.com/project/minecraft-site/
● investments.academic.ru/1513/Форвардный_контракт
● frozen-lama.deviantart.com/art/Minecraft-Compound-Door-209872466
● www.postandcourier.com/article/20120620/pc1002/120629985
● isintu.com/features/responsive-design/
● nicolaijuhler.wordpress.com/
● r3c0nic.deviantart.com/art/minecraft-Blueprint-293455933
● ru-wallp.com/view/1542/
Источники изображений
63