SlideShare une entreprise Scribd logo
1  sur  30
Веб-компоненты в веб-разработке
на примере Polymer
Артур Дробинский,
архитектор Rubius
1
Что такое WebComponents?
2
<select>
<option>Standard</option>
<option>2-day</option>
<option>Overnight</option>
</select>
Что такое WebComponents?
3
<google-map id="map" fit-to-markers>
<google-map-marker latitude="56.5010397"
longitude="84.9924506"></google-map-marker>
<google-map-marker latitude="56.4810397"
longitude="85.0024506"></google-map-marker>
</google-map>
Что такое WebComponents?
4
- Это стандарт!
История
5
История
6
Поддержка WebComponents в
браузерах
7
Поддержка WebComponents
браузерах
8
Поддержка с использованием
Polymer polyfills
9
История
10
Что такое Polymer?
• Надстройка над веб-компонентами,
упрощающая работу
• Библиотека, а не фреймворк
• Полифиллы для работы в «несовременных»
браузерах
11
Как работает
12
<link rel="import" href="../polymer/polymer.html">
<dom-module id="hello-world">
<template>
<p>Hello World!</p>
</template>
</dom-module>
<script>
Polymer({
is: 'hello-world',
});
</script>
Как работает
13
<p>Hello <strong>{{who}}</strong> :)</p>
Как работает
14
<!doctype html>
<html>
<head>
<script src="../webcomponentsjs/webcomponents-
lite.min.js"></script>
<link rel="import" href="hello-world.html">
</head>
<body>
<hello-world who="Вася"></hello-world>
<hello-world who="Петя"></hello-world>
<hello-world who="Леша"></hello-world>
</body>
</html>
Как работает
15
Как работает
16
properties: {
who: {
type: String,
value: 'World'
}
}
Как работает
17
<input value="{{who::change}}" />
Как работает
18
DEMO
19
Где используется:
• https://gaming.youtube.com/
• https://builtwithpolymer.org
• Google
• Chrome
• etc
• Rubius 20
Где используется:
21
Существующие компоненты
• ExpandJS
• Bosonic
• Paper-elements
• Google-elements
• Vaadin
• http://customelements.io
22
Лучше чем Backbone?
• Проще
• Работа с моделями as-is (не требуется
оборачивать модели в Model/Collection)
• Двустороннее связывание
23
Лучше чем React?
• Двустороннее связывание
• Полноценная библиотека (не view-only)
• Основан на стандартизованных веб-
компонентах
• Нормальные шаблоны (не JSX)
24
Лучше чем Angular?
• Простой в изучении
• Понятные шаблоны
• Не фреймворк 
• Не RC и не надо переписывать все между
обновлениями
25
Совместное использование с React и
Angular – возможно!
26
…и даже с jQuery
27
$(this.root)
Минусы Polymer
• Отсутствие поддержки в старых браузерах
• Начальная загрузка
• Performance (не идеален, но много лучше
Angular)
• Молодой (отсутствие специалистов,
накопленного опыта)
28
Рекомендации к использованию
• Использовать с осторожностью 
• Внедрение малыми блоками
• Веб-компоненты это будущее веба
(ближайшее), но еще пока не настоящее
29
Спасибо!
Вопросы?
Артур Дробинский,
http://arturdr.ru
info@arturdr.ru
30

Contenu connexe

Tendances

Оптимизация времени загрузки сайта: проблемы и решения
Оптимизация времени загрузки сайта: проблемы и решенияОптимизация времени загрузки сайта: проблемы и решения
Оптимизация времени загрузки сайта: проблемы и решения
Media Gorod
 
[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)
[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)
[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)
Evgeny Kaziak
 
JavaScript и доступность web-сайтов
JavaScript и доступность web-сайтовJavaScript и доступность web-сайтов
JavaScript и доступность web-сайтов
guest42f396
 
Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...
Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...
Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...
Ontico
 
Yaremchuk - Корпоративные сайты
Yaremchuk - Корпоративные сайтыYaremchuk - Корпоративные сайты
Yaremchuk - Корпоративные сайты
Andrii Podanenko
 
Сборка проектов с помощью ENB
Сборка проектов с помощью ENBСборка проектов с помощью ENB
Сборка проектов с помощью ENB
Aleksandr Boichenko
 
Павел Юрийчук - Разработка приложений под мобильные браузеры
Павел Юрийчук - Разработка приложений под мобильные браузерыПавел Юрийчук - Разработка приложений под мобильные браузеры
Павел Юрийчук - Разработка приложений под мобильные браузеры
UA Mobile
 
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcСергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Yandex
 
Презентация доклада Лавриненко
Презентация доклада ЛавриненкоПрезентация доклада Лавриненко
Презентация доклада Лавриненко
LuxoftTraining
 
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, ЯндексТема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
yaevents
 
СУБД осень 2012 вестник 4
СУБД осень 2012 вестник 4СУБД осень 2012 вестник 4
СУБД осень 2012 вестник 4
Technopark
 
Арсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложенияАрсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложения
Arseny Zarechnev
 

Tendances (20)

Оптимизация времени загрузки сайта: проблемы и решения
Оптимизация времени загрузки сайта: проблемы и решенияОптимизация времени загрузки сайта: проблемы и решения
Оптимизация времени загрузки сайта: проблемы и решения
 
Блогплатформы и особенности ведения блогов
Блогплатформы и особенности ведения блоговБлогплатформы и особенности ведения блогов
Блогплатформы и особенности ведения блогов
 
1 2 2_1_c-bitrix_kuleshov
1 2 2_1_c-bitrix_kuleshov1 2 2_1_c-bitrix_kuleshov
1 2 2_1_c-bitrix_kuleshov
 
[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)
[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)
[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)
 
JavaScript и доступность web-сайтов
JavaScript и доступность web-сайтовJavaScript и доступность web-сайтов
JavaScript и доступность web-сайтов
 
Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...
 
Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...
Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...
Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...
 
Yaremchuk - Корпоративные сайты
Yaremchuk - Корпоративные сайтыYaremchuk - Корпоративные сайты
Yaremchuk - Корпоративные сайты
 
Вебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проектаВебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проекта
 
Сборка проектов с помощью ENB
Сборка проектов с помощью ENBСборка проектов с помощью ENB
Сборка проектов с помощью ENB
 
Павел Юрийчук - Разработка приложений под мобильные браузеры
Павел Юрийчук - Разработка приложений под мобильные браузерыПавел Юрийчук - Разработка приложений под мобильные браузеры
Павел Юрийчук - Разработка приложений под мобильные браузеры
 
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcСергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
 
Презентация доклада Лавриненко
Презентация доклада ЛавриненкоПрезентация доклада Лавриненко
Презентация доклада Лавриненко
 
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, ЯндексТема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
 
Анна Ладошкина: Проект Guthenberg: революция в консоли
Анна Ладошкина: Проект Guthenberg: революция в консолиАнна Ладошкина: Проект Guthenberg: революция в консоли
Анна Ладошкина: Проект Guthenberg: революция в консоли
 
СУБД осень 2012 вестник 4
СУБД осень 2012 вестник 4СУБД осень 2012 вестник 4
СУБД осень 2012 вестник 4
 
Разработка мобильного и веб интерфейса для Caché
Разработка мобильного и веб интерфейса для CachéРазработка мобильного и веб интерфейса для Caché
Разработка мобильного и веб интерфейса для Caché
 
HappyDev-lite-2016-весна 02 Дмитрий Пашкевич. Нетривиальный веб
HappyDev-lite-2016-весна 02 Дмитрий Пашкевич. Нетривиальный вебHappyDev-lite-2016-весна 02 Дмитрий Пашкевич. Нетривиальный веб
HappyDev-lite-2016-весна 02 Дмитрий Пашкевич. Нетривиальный веб
 
Арсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложенияАрсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложения
 
Преимущества компонентной разработки для тестирования интерфейсов
Преимущества компонентной разработки для тестирования интерфейсовПреимущества компонентной разработки для тестирования интерфейсов
Преимущества компонентной разработки для тестирования интерфейсов
 

Similaire à Веб-компоненты в веб-разработке на примере Polymer

сравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикссравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикс
Andrii Podanenko
 
Pavel Dovbush Toster
Pavel Dovbush Toster Pavel Dovbush Toster
Pavel Dovbush Toster
Pavel Dovbush
 
инструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэлинструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэл
PVasili
 
инструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэлинструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэл
drupalconf
 
инструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэлинструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэл
drupalconf
 

Similaire à Веб-компоненты в веб-разработке на примере Polymer (20)

сравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикссравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикс
 
Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
 
WebdriverIO + Puppeteer. Double gun – double fun
WebdriverIO + Puppeteer. Double gun – double funWebdriverIO + Puppeteer. Double gun – double fun
WebdriverIO + Puppeteer. Double gun – double fun
 
QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - doub...
QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - doub...QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - doub...
QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - doub...
 
Pavel Dovbush Toster
Pavel Dovbush Toster Pavel Dovbush Toster
Pavel Dovbush Toster
 
Meet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis BosakMeet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis Bosak
 
Микросервисный фронтенд
Микросервисный фронтендМикросервисный фронтенд
Микросервисный фронтенд
 
Микросервисный фронтенд / Вячеслав Слинько (ЦИАН)
Микросервисный фронтенд / Вячеслав Слинько (ЦИАН)Микросервисный фронтенд / Вячеслав Слинько (ЦИАН)
Микросервисный фронтенд / Вячеслав Слинько (ЦИАН)
 
В offline и обратно
В offline и обратноВ offline и обратно
В offline и обратно
 
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
 
Иван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизацияИван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизация
 
Программируем back-end: функции, события, особенности мобильного приложения
Программируем back-end: функции, события, особенности мобильного приложенияПрограммируем back-end: функции, события, особенности мобильного приложения
Программируем back-end: функции, события, особенности мобильного приложения
 
Опыт работы с фреймворком ASP.NET MVC
Опыт работы с фреймворком ASP.NET MVCОпыт работы с фреймворком ASP.NET MVC
Опыт работы с фреймворком ASP.NET MVC
 
Баба-Яга против! — Роман Дворнов, Ostrovok.ru
Баба-Яга против! — Роман Дворнов, Ostrovok.ruБаба-Яга против! — Роман Дворнов, Ostrovok.ru
Баба-Яга против! — Роман Дворнов, Ostrovok.ru
 
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter..."Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
 
инструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэлинструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэл
 
инструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэлинструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэл
 
инструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэлинструкция по оптимизации сайтов на Drupal херени даниэл
инструкция по оптимизации сайтов на Drupal херени даниэл
 
Аудит Veloshtuki.com.ua
Аудит Veloshtuki.com.uaАудит Veloshtuki.com.ua
Аудит Veloshtuki.com.ua
 
Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)
Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)
Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)
 

Веб-компоненты в веб-разработке на примере Polymer

Notes de l'éditeur

  1. https://output.jsbin.com/tugedoxapo
  2. https://output.jsbin.com/tugedoxapo