Post on 16-Jun-2015
description
ComponentsNow!
Михаил Давыдов
РИТ++, 14-15 Апреля 2014
Библиотеки
● jQuery — чинит DOM
● Underscore — добавляет API ECMAScript 5
● Backbone — приносит MV*
● Все они созданы для исправления Web
По историческим причинм хорошие инструменты - библиотеки.
The DOM is a Mess 2009
Библиотеки
04
Библиотеки везде
● Тяжелые
–jQuery 2.0.3 — 230K (не сжатый)
● Их сложно понять
–Цикломатическая сложность $.ajax — 43
● Слишком могущественные
–$.ajax, $.animate, _
Библиотеки большие
06
● Сложно использовать только маленькую часть
–$.Deferred, $.ajax
–_.template
● Приходится делить вручную
● Их модульность мало помогает
Их части тесно связаны
07
● Все хотят jQuery
● Библиотеки зависят от библиотек
–Backbone+jQuery+Underscore
● Ручное управление зависимостями
–Bower и Npm — спасители!
Управление зависимостями
08
Веб починили*
● querySelector
● CSS3 Selectors*
● Web Storage (localStorage)
● Cross-Origin Resource Sharing*
* полностью с полифилами
Can I Use
Важные DOM APIs
11
ECMAScript 5
● CSS3 Selectors (медленный, но работает)
● Cross-Origin Resource Sharing
● HTML5 Elements
● ECMAScript 5
HTML5 Please polyfills
Полифилы чинят остальное
13
Mobile
Мобильный рынок растет
Почему мы все ещеиспользуембиблиотеки?
Компоненты
Простые
● Легкие
–dom — 28K, 3K self (не сжатый)
● Единственная ответственность & KISS-принцип
● Очень легко понять
–Поддерживать
–Писать тесты
Компоненты простые
20
Независимые
● Содержат все зависимости
–Большая часть внешние
● Легко использовать повторно
– bower i name
– npm i name
● Легко использовать только часть
Компоненты независимы
22
Изолированные
● Не конфликтуют с другими
–Изоляция CSS
–Гибкое представление
–Нет утечек глобалов
● Имеют ограниченный доступ к другим
– require()
Компоненты изолированы
24
● Идея произвольного HTML элемента
● API/Framework
–Shadow DOM (Инкапсуляция)
–HTML Imports & Templates
–Template Binding
Web Components: A Tectonic Shift for Web Development
WebComponents
26
HTML Templates
Shadow DOM
Custom Elements
HTML Imports
Возможно починить в других барузерах, используя Polymer.
WebComponents в 2014 году
27
WebComponents API Альтернатива
Custom Elements Компонентные движки
Shadow DOM BEM Методология
HTML Templates Шаблонные движки
HTML Imports Инструменты сборки
Scoped CSS BEM или OOCSS
Template Binding Data binding
Альтернативы этим API
28
● X-Tag
● jQuery UI Widgets
● Dojo Widgets
● React
● bem-tools
● basis.js
Компонентные движки
29
● Изоляция CSS
● Блок — Custom Element
● Элемент — Shadow DOM
● Модификатор — Нет аналога
● i-bem — Логика блока
БЕМ и WebComponents
31
.tab-panel — Блок
.tab-panel__tab — Элемент
.tab-panel__tab_state_active
Давайте напишемКомпонент!
● Компонент Простой
–KISS
● Компонент Независимый
–Все на борту
● Компонент Изолированный
–HTML, CSS, JS
Помним, что
35
Package file
// 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
HTML
<!-- my-share.html -->
<a href="{{ href }}" class="my-share">
<img src="{{ icon }}" class="my-share__icon"/>
<span class="my-share__label">{{ label }}</span>
</a>
Приватный HTML01.
02.
03.
04.
05.
39
Интерфейс
<a class="my-share"
data-href="{{ href }}"
data-icon="{{ icon }}"
>{{ label }}</a>
Интерфейс похож на Custom Element из WebComponents.
Интерфейс компонента01.
02.
03.
04.
41
<my-share
href="{{ href }}"
icon="{{ icon }}"
>{{ label }}</my-share>
WebComponents для сравнения01.
02.
03.
04.
42
.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
my-share {}
.icon {
vertical-align: middle;
height: 16px;
}
.label {
padding-left: 5px;
}
CSS WebComponent01.
02.
03.
04.
05.
06.
07.
08.
44
● WebComponent — DOM API
– <style scoped>
● BEM
–Избегание каскада в CSS
–Соглашения именования .block__element
CSS изолирован
45
Зависимости
// bower.json
"dependencies": {
"tpl": "azproduction/lodash-template",
"domify": "component/domify",
"decl": "azproduction/decl"
}
Декларируем все зависимости.
Внешние зависимости01.
02.
03.
04.
05.
06.
47
// 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
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
● CommonJS/Modules
–Нет утечек глобалов
–Просит зависимости, а не берет их
–Поставляет ресурсы
● Так же можно использовать AMD
JavaScript модуля изолирован
50
Сборка
● Получение всех зависимостей
● Компиляция
–стили, скрипты, шаблоны
● Упаковка скриптов и шаблонов
● Конкатинация стилей
Сборка компонента
52
● bem-tools
● Component
● Browserify
● LMD
Инструменты сборкикомпонентов
53
<a class="my-share" ...>Tweet</a>
<link rel="stylesheet" href="my-share.css"/>
<script src="my-share.js"></script>
Компонент легко использовать01.
02.
03.
54
<my-share ...>Tweet</my-share>
<link rel="import" href="my-share.html"/>
WebComponent01.
02.
55
Живой пример
56
● Web уже починили, Mobile растет
● Библиотеки слишком сложны
● WebComponents == API
● Пишите компоненты. Сегодня!
Заключение
59
Components Now!
Михаил Давыдов
@azproduction
60
● Живой пример my-share
● You might not need jQuery
● BEM Методология
● Web Components
● Polymer Project
Полезные ресусы
61
● 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