SlideShare a Scribd company logo
1 of 18
Download to read offline
Новый подход к
процессу разработки с 4
Веб-Компонентами
TeamLead компании UPROCK
Всеволод Родионов
Что такое Веб-компоненты
Библиотеки
<X>
X-tags
http://www.x-tags.org/1
Polymer
http://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 directives4
HTMLUnknownElement
Верстальщики
Фронтэндщики
VS
Повторяется история с бэкэндщиками,
фронтэндщиками, API First и MVC/MVVM
фреймворками1
1
Вместо REST теперь верстка1
1
DOM с атрибутами и элементами
превращается в API
Архитектура приложения
Берем лучшее: подсматриваем у БЭМ1
1
Держимся DRY: 1
больше вложенных компонентов1
1
Унифицируем компоненты
Тестирование
отдельные компоненты 1
1
интеграцию, при этом это часто интеграция
тоже происходит внутри компонента1
Теперь мы тестируем:
Что это даёт
Нужно меньше тестов 1
1
Тесты пишутся быстрее 1
1
На каждый из компонентов можно теперь потратить
больше времени: есть четкая документация, как он
должен себя вести, и это можно протестировать1
1
Тесты проходят быстрее 1
1
Тесты точнее дают ошибку 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. Веб-
компоненты - пожалуй, единственное, что способно
объединить весь распавшийся веб через простые и
знакомые каждому интерфейсы"
Хочешь знать больше?
d-ninja.ru1

More Related Content

Similar to Web components @ IT Life

Олег Мохов: Модель Отображения. Браузеры
Олег Мохов: Модель Отображения. БраузерыОлег Мохов: Модель Отображения. Браузеры
Олег Мохов: Модель Отображения. Браузеры
Yandex
 
Использование Symfony
Использование SymfonyИспользование Symfony
Использование Symfony
Media Gorod
 
1С-Битрикс: Управление сайтом Версия .NET
1С-Битрикс: Управление сайтом Версия .NET1С-Битрикс: Управление сайтом Версия .NET
1С-Битрикс: Управление сайтом Версия .NET
Media Gorod
 
Практикум Web программирование
Практикум Web программированиеПрактикум Web программирование
Практикум Web программирование
Rauan Ibraikhan
 
рит2007 требования и состав работ бесков доронин
рит2007   требования и состав работ   бесков доронинрит2007   требования и состав работ   бесков доронин
рит2007 требования и состав работ бесков доронин
Media Gorod
 

Similar to Web components @ IT Life (20)

Олег Мохов: Модель Отображения. Браузеры
Олег Мохов: Модель Отображения. БраузерыОлег Мохов: Модель Отображения. Браузеры
Олег Мохов: Модель Отображения. Браузеры
 
Phalcon. Что нового?
Phalcon. Что нового?Phalcon. Что нового?
Phalcon. Что нового?
 
DevConf 2015. HTML5 Web Components: следующий шаг к модульности вашего проекта
DevConf 2015. HTML5 Web Components: следующий шаг к модульности вашего проектаDevConf 2015. HTML5 Web Components: следующий шаг к модульности вашего проекта
DevConf 2015. HTML5 Web Components: следующий шаг к модульности вашего проекта
 
Миграция кода с Magento 1 на Magento 2
Миграция кода с Magento 1 на Magento 2Миграция кода с Magento 1 на Magento 2
Миграция кода с Magento 1 на Magento 2
 
Быстро о быстром
Быстро о быстромБыстро о быстром
Быстро о быстром
 
Использование Symfony
Использование SymfonyИспользование Symfony
Использование Symfony
 
1С-Битрикс: Управление сайтом Версия .NET
1С-Битрикс: Управление сайтом Версия .NET1С-Битрикс: Управление сайтом Версия .NET
1С-Битрикс: Управление сайтом Версия .NET
 
Александр Воинов - Тренды Веб
Александр Воинов - Тренды Веб Александр Воинов - Тренды Веб
Александр Воинов - Тренды Веб
 
Dhtml 1
Dhtml 1Dhtml 1
Dhtml 1
 
DHTML
DHTMLDHTML
DHTML
 
Аудит Belkagames.pw
Аудит Belkagames.pwАудит Belkagames.pw
Аудит Belkagames.pw
 
Web application framework
Web application frameworkWeb application framework
Web application framework
 
Практикум Web программирование
Практикум Web программированиеПрактикум Web программирование
Практикум Web программирование
 
Trening modul2-webinar11
Trening modul2-webinar11Trening modul2-webinar11
Trening modul2-webinar11
 
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
 
FrontTalks: Роман Дворнов (Ostrovok.ru), «Basis.js: почему я не бросил разраб...
FrontTalks: Роман Дворнов (Ostrovok.ru), «Basis.js: почему я не бросил разраб...FrontTalks: Роман Дворнов (Ostrovok.ru), «Basis.js: почему я не бросил разраб...
FrontTalks: Роман Дворнов (Ostrovok.ru), «Basis.js: почему я не бросил разраб...
 
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS MeetupДоклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
 
"Веб-компоненты — будущее или настоящее?", Денис Иогансен, MoscowJS 20
"Веб-компоненты — будущее или настоящее?", Денис Иогансен, MoscowJS 20"Веб-компоненты — будущее или настоящее?", Денис Иогансен, MoscowJS 20
"Веб-компоненты — будущее или настоящее?", Денис Иогансен, MoscowJS 20
 
рит2007 требования и состав работ бесков доронин
рит2007   требования и состав работ   бесков доронинрит2007   требования и состав работ   бесков доронин
рит2007 требования и состав работ бесков доронин
 
Аудит сайта Moviespictures.net
Аудит сайта Moviespictures.netАудит сайта Moviespictures.net
Аудит сайта Moviespictures.net
 

Recently uploaded

CVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdfCVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdf
Хроники кибер-безопасника
 
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Ирония безопасности
 
2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf
Хроники кибер-безопасника
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdfСИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
Хроники кибер-безопасника
 
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
Ирония безопасности
 
Cyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdfCyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdf
Хроники кибер-безопасника
 

Recently uploaded (9)

CVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdfCVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdf
 
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
 
2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdfСИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
 
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
 
Ransomware_Q3 2023. The report [RU].pdf
Ransomware_Q3 2023.  The report [RU].pdfRansomware_Q3 2023.  The report [RU].pdf
Ransomware_Q3 2023. The report [RU].pdf
 
MS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdfMS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdf
 
Cyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdfCyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdf
 
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdfMalware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
 

Web components @ IT Life