web components @ it life
TRANSCRIPT
Новый подход к процессу разработки с 4Веб-Компонентами
TeamLead компании UPROCKВсеволод Родионов
Что такое Веб-компоненты
Библиотеки
<X>X-tags
http://www.x-tags.org/1
Polymerhttp://www.polymer-project.org/1
Shadow DOMИнкапсуляция CSS+HTML
<template></template>
Работа с Templates
<content select="selector">1
Логика перемещения элементов в shadow root:4
Элементы не появляются и не исчезают, они просто транслируются к содержимому
HTML Imports
<head>1 <link rel="import" href="/path/to/imports/stuff.html">1</head>
Бизнес логика
Визуальное представление
VS
логики на странице привязано к конкретному элементу
от 60% до 100%
$(document).ready() не нужен1
Визуальное представление Бизнес логика
выполнять все скрипты на загрузке страницы не обязательно*
Визуальное представление
Как появились компоненты
.HTC и IE4 - IE94БЭМ
AngularJS directives4HTMLUnknownElement
Верстальщики
Фронтэндщики
VS
Повторяется история с бэкэндщиками, фронтэндщиками, API First и MVC/MVVM фреймворками11Вместо REST теперь верстка11DOM с атрибутами и элементами превращается в API
Архитектура приложения
Берем лучшее: подсматриваем у БЭМ11Держимся DRY: 1больше вложенных компонентов11Унифицируем компоненты
Тестирование
отдельные компоненты 11интеграцию, при этом это часто интеграция тоже происходит внутри компонента1
Теперь мы тестируем:
Что это даёт
Нужно меньше тестов 11Тесты пишутся быстрее 11На каждый из компонентов можно теперь потратить больше времени: есть четкая документация, как он должен себя вести, и это можно протестировать11Тесты проходят быстрее 11Тесты точнее дают ошибку 1 1Более точно можно узнать, кому ее исправлять
Интеграция с фреймворками
Polymer.dart tutorial
"You can use Angular.dart and Polymer.dart. Or only Angular.dart. Or Polymer.dart. They are different, they do not interfere, each of them do their own stuff"
"...Мы всегда видели веб единым, пытались разрабатывать стандарты, думая о том, чтобы все разработчики говорили на одном языке, чтобы везде были одни и те же термины и понятия. Но с появлением препроцессоров сообщество разработчиков стало дробиться: верстальщик на Slim и SASS не сможет работать с версткой на Slim и LESS, разработчик на LiveScript - не сможет разобраться в библиотеке на CoffeeScript. Веб-компоненты - пожалуй, единственное, что способно объединить весь распавшийся веб через простые и знакомые каждому интерфейсы"
