Веб-компоненты изменят все, что вы знаете о создании веб-приложений. Впервые в сети появятся низкоуровневые API, позволяющие нам не только создавать собственные HTML-теги, но также инкапсулировать логику и CSS. Больше никаких глобальных таблиц стилей или шаблонного кода! Это дивный новый мир, где все является элементом.
В своем выступлении на DotJS я рассказываю о том, что могут предложить веб-компоненты и как их создавать с использованием современных инструментов. Сегодня я покажу вам Yeoman , рабочий процесс инструментов для оптимизации создания веб-приложений с использованием Polymer , библиотеки полифилов и сахара для разработки приложений с использованием веб-компонентов в современных браузерах.
Создавайте собственные элементы и устанавливайте элементы, созданные другими
В этом разговоре вы узнаете:
- О четырех различных спецификациях, составляющих веб-компоненты: пользовательские элементы , шаблоны , теневой DOM и импорт HTML .
- Как определить свои собственные элементы и установить элементы, созданные другими с помощью Bower
- Тратьте меньше времени на написание JavaScript и больше времени на создание страниц.
- Используйте современные интерфейсные инструменты ( Yeoman ) для создания приложения с использованием Polymer с генератором-полимером.
- Как Polymer суперменяет создание веб-компонентов.
Например, чтобы установить полифилы веб-компонентов Polymer и саму библиотеку, вы можете запустить этот один лайнер:
bower install --save Polymer/platform Polymer/polymer
Это добавит папку bower_components и добавит вышеуказанные пакеты. --save добавляет их в файл Bower.json вашего приложения.
Позже, если вы захотите установить элемент аккордеона Polymer, вы можете запустить:
bower install --save Polymer/polymer-ui-accordion
а затем импортируйте его в свое приложение:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Чтобы сэкономить время, создание нового приложения Polymer со всеми необходимыми вам зависимостями, шаблонным кодом и инструментами для оптимизации вашего приложения можно выполнить с помощью Yeoman с помощью еще одного лайнера:
yo polymer
Бонусное прохождение
Я также записал 30-минутное бонусное пошаговое руководство по приложению Polymer Jukebox, которое показываю в докладе.
В бонусном видео:
- Что означает мантра «Все есть элемент»
- Как использовать Bower для установки полифилов и элементов Polymer Platform
- Создание нашего приложения Jukebox с помощью генератора Yeoman и подгенераторов
- Понимание функций платформы, реализованных с помощью шаблона
- Как я функционально перенес приложение Angular на Polymer.
Мы также используем субгенераторы Yeoman для создания строительных лесов для наших новых полимерных элементов. например, чтобы создать шаблон для элемента foo мы запускаем:
yo polymer:element foo
который подскажет нам, хотим ли мы автоматически импортировать элемент, требуется ли конструктор и некоторые другие предпочтения.
Последние исходные коды приложения, показанные в обоих докладах, теперь доступны на GitHub . Я еще немного переработал его, чтобы сделать его более организованным и более простым для чтения.
Предварительный просмотр приложения:
дальнейшее чтение
Подводя итог, Polymer — это библиотека JavaScript, которая позволяет использовать веб-компоненты в современных веб-браузерах, пока мы ждем их собственной реализации. Современные инструменты могут помочь улучшить ваш рабочий процесс с их использованием, и вам может понравиться опробовать Yeoman и Bower при разработке собственных тегов.
Еще несколько статей на эту тему, которые стоит прочитать:
- Создание веб-приложений с помощью Yeoman и Polymer
- Объединение веб-компонентов с помощью Vulcanize
- Chrome Dev Summit: полимерные декларативные, инкапсулированные, повторно используемые компоненты
- Ландшафт автоматизации разработки
- Веб-компоненты: будущее веб-разработки
- Создание приложений с помощью рабочего процесса Yeoman