четверг, 29 августа 2013 г.

Будущее интернета

Я использую HTML примерно с 1993 года. Я долгое время занимался server-side разработкой, но даже тогда генерировал HTML. Однако, хотя бы раз в месяц мне напоминают о конкретном теге или атрибуте, о которых я забыл. Не заставляйте меня рассказывать о CSS. Каждый раз, когда я вспоминаю, что псевдокласс hover можно определить в CSS, мне вспоминается, сколько раз я писал тот самый чертов код, чтобы выделить пункты меню с помощью JavaScript. Я поставил себе целью сосредоточить свои усилия в этом направлении.

Веб-разработка может быть крайне трудной и утомительной, но, по крайней мере, инструменты и среда стремительно совершенствуются. Именно поэтому мне так нравится узнавать все больше о веб-компонентах.

Веб-компоненты обозначают несколько разных технологий. Однако, в целом они отображают невероятные изменения в сети интернет. Я считаю их настоящим "Web 2.0." подходом, который предлагает много интересного. У вас впервые получится определить новые структурные элементы (метки, поведение, дизайн), следуя веб-стандартам. Вы сможете расширить сеть интернет и это круто.

Шаблоны

Все, кто работал с шаблонами в JavaScript, знают, насколько это мощный инструмент. Шаблоны позволяют вам создавать многократно используемые блоки контента, которые можно добавить к DOM ("объектная модель документа") с помощью JavaScript. В качестве простого примера, представьте, что используете AJAX для получения контента, который возвращается в виде чистых данных.

Хотя вы, разумеется, можете просто создать крупные блоки HTML в строках JavaScript, они достаточно быстро становятся громоздкими. Таким образом, появились различные фреймворки шаблонов JavaScript.

Вы сможете использовать метки шаблонов в своем HTML-документе. Контент в метке не выполняется, пока вы не выполните клонирование шаблона и не добавите его к DOM. Следовательно, загрузка изображений или блоков скриптов будет происходить только, когда необходимо.

В отличии, к примеру, от Handlebars.js, здесь не происходит замена токенов. Зато требуется меньше дополнительного кода.

Больше о спецификации вы можете прочитать здесь: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html.

Теневая модель документа (Shadow DOM)

Для меня теневая модель документа является самым запутанным понятием. Не буду вдаваться в его красочное описание. В сущности, это способ создать для контента систему стилей типа "черный ящик".

Приведу пример. Представьте, что пишите HTML для кого-нибудь. Ваш HTML представляет собой лишь метку H1 и абзац. Вам хочется стилизовать данный контент, но тогда вам нужно убедиться, что ваш CSS не конфликтует с родительским документом. Есть альтернатива: контейнеры iFrame, но они создают другие трудности.

Опять-таки, я не знаток Shadow DOM. Больше информации ищите здесь: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html.

Пользовательские элементы

Самая прекрасная часть веб-компонентов -- в любом случае, для меня, -- пользовательские элементы. Как вы уже догадались, они позволяют создавать новые элементы HTML. Сейчас для их разметки используют префикс x-, но если вам когда-нибудь хотелось определить собственную разметку, никаких проблем.

Вы получите поддержку в течении всего жизненного цикла (то есть, будете знать, когда ваш элемент загружен, показан и т.д.) и даже сможете использовать это свойство для расширения существующих элементов. Безусловно, можно связать собственные события JavaScript и "подмешать" как шаблоны, так и теневую модель документа.

Если вам случалось использовать что-то вроде jQuery UI Tabs для добавления вкладок на сайт, веб-компоненты позволят вам выполнить тоже самое посредством веб-стандартов.

Импорт HTML

И наконец, импорт HTML. Фактически, как только вы определили пользовательский элемент, применили к нему макет через теневую модель документа и пользовательское поведение, у вас будет возможность создать многократно используемый шаблон, которым можно поделиться с другими. Подобно тому, как вы импортируете таблицу стилей, тег ссылки позволит вам импортировать и пользовательские элементы.

Спецификацию можно найти здесь: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html.

Ну и что, я не могу сейчас этого использовать!

Уверен, вы спрашиваете, насколько хорошо поддерживаются вышеперечисленные свойства. На данный момент достаточно слабо. По сути, пользовательские элементы не поддерживаются совсем. Все, что сейчас доступно -- функции Chrome и ночных билдов Firefox. Спецификации еще разрабатываются. Имейте в виду, что большинство главных браузеров переходят на постоянное обновление. Если вы по прежнему считаете, что вам не нужно обращать внимание на веб-стандарты, вы терпите фиаско как веб-разработчик.

источник

Комментариев нет:

Отправить комментарий