update

3-more/1-webcomponents/1-webcomponents-intro/article.md

@@ -0,0 +1,91 @@
+# С высоты орбитального полёта
+
+Этот раздел посвящён набору современных браузерных стандартов, описывающих создание "веб-компонент" (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")`. Но "под капотом" кроются расширенные возможности по инкапсуляции поддерева DOM и стилей, по генерации событий и многое другое.
+