93 lines
6.2 KiB
Markdown
93 lines
6.2 KiB
Markdown
# С высоты орбитального полёта
|
||
|
||
Этот раздел посвящён набору современных браузерных стандартов, описывающих создание "веб-компонент" (web components).
|
||
|
||
На текущий момент эти стандарты -- в разработке, браузеры по-разному поспевают за их развитием. Статьи можно читать в любом браузере, но для тестирования я бы рекомендовал использовать Chrome Canary, поскольку главной "движущей силой" этих стандартов являются сотрудники Google и, как правило, этот браузер реализует последний вариант спецификации.
|
||
|
||
Понимание этих стандартов важно потому, что это "взгляд в будущее", в то, какой станет интернет-разработка. Сейчас уже существуют некоторые полифиллы, частично реализующие их.
|
||
|
||
Идеи веб-компонент взяты не с пустого места. Они эксплуатируются в более "приземлённых", текущих подходах к разработке.
|
||
|
||
## Что общего, между...
|
||
|
||
Прежде, чем мы перейдём к веб-компонентам, посмотрим на одну очень классную штуку:
|
||
|
||
<img style="border-radius:5px" src="satellite.jpg">
|
||
|
||
Да, это Международная Космическая Станция (МКС).
|
||
|
||
И вот, как она, приблизительно, устроена:
|
||
|
||
<img style="border-radius:5px" src="satellite-expanded.jpg">
|
||
|
||
МКС:
|
||
<ul>
|
||
<li>Состоит из множества компонентов.</li>
|
||
<li>Каждый компонент -- в свою очередь состоит из множества деталей внутри.</li>
|
||
<li>Эти компоненты очень сложны, они гораздо сложнее, чем большинство сайтов.</li>
|
||
<li>Их разрабатывают команды из разных стран, разговаривающие на разных языках.</li>
|
||
</ul>
|
||
|
||
...И эта штука летает!
|
||
|
||
За счёт чего строятся настолько сложные вещи?
|
||
|
||
Что мы могли бы позаимствовать, чтобы наша разработка была столь же надёжной и масштабируемой? Ну, или по крайней мере, близко к этому...
|
||
|
||
## Компонентная архитектура
|
||
|
||
Ключевое правило при разработке сложных вещей: "Никогда не делайте сложные вещи".
|
||
|
||
Если что-то становится сложным -- разбиваем это на части попроще и связываем их наиболее очевидным способом.
|
||
|
||
**Хороший архитектор -- это как раз тот, кто умеет делать сложное простым.**
|
||
|
||
Любой сложный интерфейс мы делим на компоненты -- сущности, для которых мы можем максимально чётко и понятно указать, что это такое и что оно умеет делать.
|
||
|
||
Посмотрим на какой-нибудь более-менее сложный сайт, например на [Twitter](http://twitter.com).
|
||
|
||
Он естественным образом распадается на компоненты:
|
||
<img src="twitter-components.png">
|
||
|
||
Для наглядности они обведены <span style="border: 2px dashed red">красной рамкой:</span>
|
||
|
||
<ol>
|
||
<li>"Главное Меню"</li>
|
||
<li>"Об Авторе"</li>
|
||
<li>"Близкие по духу"</li>
|
||
<li>"Твиты"</li>
|
||
</ol>
|
||
|
||
Как мы решаем, что именно выделять в компонент? Это нам подсказывает опыт и здравый смысл.
|
||
|
||
В случае с твиттером разбиение на компоненты особенно очевидно. Странца "сама распадается" на чётко очерченные блоки, каждый из которых выполняет свою роль.
|
||
|
||
Если представить каждый компонент HTML-тегом, то страница будет выглядеть примерно так (выделены нестандартные теги):
|
||
|
||
```html
|
||
<header>
|
||
*!*
|
||
<top-menu/>
|
||
*/!*
|
||
</header>
|
||
<aside>
|
||
*!*
|
||
<author-info/>
|
||
<congenial-info/>
|
||
*/!*
|
||
</aside>
|
||
<main>
|
||
*!*
|
||
<tweets-list/>
|
||
*/!*
|
||
</main>
|
||
```
|
||
|
||
До недавнего времени, чтобы так описать страницу, требовались специальные JavaScript-фреймворки. Такой фреймворк позволял описывать "свои" теги, которые, после обработки фреймворком, становились JavaScript-объектами.
|
||
|
||
Веб-компоненты (Web Components) -- это не один стандарт, а целая платформа, комплекс стандартов, которые вместе добавляют в браузер технологии для удобной реализации компонент.
|
||
|
||
Если глядеть "сверху", то веб-компоненты -- это возможность добавлять свои элементы в браузер, например `document.createElement("tweets-list")`, которые описываются с помощью классов JavaScript, могут иметь свои методы и свойства.
|
||
|
||
Также "под капотом" кроются расширенные возможности по инкапсуляции поддерева DOM и стилей, по генерации событий и многое другое, что мы рассмотрим далее.
|
||
|