Web components @ IT Life
-
Upload
- -
Category
Technology
-
view
206 -
download
0
Transcript of Web components @ IT Life
![Page 1: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/1.jpg)
Новый подход к процессу разработки с 4Веб-Компонентами
TeamLead компании UPROCKВсеволод Родионов
![Page 2: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/2.jpg)
Что такое Веб-компоненты
![Page 3: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/3.jpg)
Библиотеки
<X>X-tags
http://www.x-tags.org/1
Polymerhttp://www.polymer-project.org/1
![Page 4: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/4.jpg)
Shadow DOMИнкапсуляция CSS+HTML
![Page 5: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/5.jpg)
<template></template>
![Page 6: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/6.jpg)
Работа с Templates
<content select="selector">1
Логика перемещения элементов в shadow root:4
Элементы не появляются и не исчезают, они просто транслируются к содержимому
![Page 7: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/7.jpg)
HTML Imports
<head>1 <link rel="import" href="/path/to/imports/stuff.html">1</head>
![Page 8: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/8.jpg)
Бизнес логика
Визуальное представление
VS
![Page 9: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/9.jpg)
логики на странице привязано к конкретному элементу
от 60% до 100%
$(document).ready() не нужен1
Визуальное представление Бизнес логика
выполнять все скрипты на загрузке страницы не обязательно*
Визуальное представление
![Page 10: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/10.jpg)
Как появились компоненты
.HTC и IE4 - IE94БЭМ
AngularJS directives4HTMLUnknownElement
![Page 11: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/11.jpg)
Верстальщики
Фронтэндщики
VS
![Page 12: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/12.jpg)
Повторяется история с бэкэндщиками, фронтэндщиками, API First и MVC/MVVM фреймворками11Вместо REST теперь верстка11DOM с атрибутами и элементами превращается в API
![Page 13: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/13.jpg)
Архитектура приложения
Берем лучшее: подсматриваем у БЭМ11Держимся DRY: 1больше вложенных компонентов11Унифицируем компоненты
![Page 14: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/14.jpg)
Тестирование
отдельные компоненты 11интеграцию, при этом это часто интеграция тоже происходит внутри компонента1
Теперь мы тестируем:
![Page 15: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/15.jpg)
Что это даёт
Нужно меньше тестов 11Тесты пишутся быстрее 11На каждый из компонентов можно теперь потратить больше времени: есть четкая документация, как он должен себя вести, и это можно протестировать11Тесты проходят быстрее 11Тесты точнее дают ошибку 1 1Более точно можно узнать, кому ее исправлять
![Page 16: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/16.jpg)
Интеграция с фреймворками
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"
![Page 17: Web components @ IT Life](https://reader034.fdocuments.us/reader034/viewer/2022042715/5592a3e51a28ab6e798b45c7/html5/thumbnails/17.jpg)
"...Мы всегда видели веб единым, пытались разрабатывать стандарты, думая о том, чтобы все разработчики говорили на одном языке, чтобы везде были одни и те же термины и понятия. Но с появлением препроцессоров сообщество разработчиков стало дробиться: верстальщик на Slim и SASS не сможет работать с версткой на Slim и LESS, разработчик на LiveScript - не сможет разобраться в библиотеке на CoffeeScript. Веб-компоненты - пожалуй, единственное, что способно объединить весь распавшийся веб через простые и знакомые каждому интерфейсы"