Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Веб-компоненты в веб-разработке
на примере 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.992...
Что такое WebComponents?
4
- Это стандарт!
История
5
История
6
Поддержка WebComponents в
браузерах
7
Поддержка WebComponents
браузерах
8
Поддержка с использованием
Polymer polyfills
9
История
10
Что такое Polymer?
• Надстройка над веб-компонентами,
упрощающая работу
• Библиотека, а не фреймворк
• Полифиллы для работ...
Как работает
12
<link rel="import" href="../polymer/polymer.html">
<dom-module id="hello-world">
<template>
<p>Hello World...
Как работает
13
<p>Hello <strong>{{who}}</strong> :)</p>
Как работает
14
<!doctype html>
<html>
<head>
<script src="../webcomponentsjs/webcomponents-
lite.min.js"></script>
<link ...
Как работает
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)
• Двустороннее ...
Лучше чем React?
• Двустороннее связывание
• Полноценная библиотека (не view-only)
• Основан на стандартизованных веб-
ком...
Лучше чем Angular?
• Простой в изучении
• Понятные шаблоны
• Не фреймворк 
• Не RC и не надо переписывать все между
обнов...
Совместное использование с React и
Angular – возможно!
26
…и даже с jQuery
27
$(this.root)
Минусы Polymer
• Отсутствие поддержки в старых браузерах
• Начальная загрузка
• Performance (не идеален, но много лучше
An...
Рекомендации к использованию
• Использовать с осторожностью 
• Внедрение малыми блоками
• Веб-компоненты это будущее веба...
Спасибо!
Вопросы?
Артур Дробинский,
http://arturdr.ru
info@arturdr.ru
30
Upcoming SlideShare
Loading in …5
×

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

1,359 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Веб-компоненты в веб-разработке на примере Polymer Артур Дробинский, архитектор Rubius 1
  2. 2. Что такое WebComponents? 2 <select> <option>Standard</option> <option>2-day</option> <option>Overnight</option> </select>
  3. 3. Что такое 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>
  4. 4. Что такое WebComponents? 4 - Это стандарт!
  5. 5. История 5
  6. 6. История 6
  7. 7. Поддержка WebComponents в браузерах 7
  8. 8. Поддержка WebComponents браузерах 8
  9. 9. Поддержка с использованием Polymer polyfills 9
  10. 10. История 10
  11. 11. Что такое Polymer? • Надстройка над веб-компонентами, упрощающая работу • Библиотека, а не фреймворк • Полифиллы для работы в «несовременных» браузерах 11
  12. 12. Как работает 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. 13. Как работает 13 <p>Hello <strong>{{who}}</strong> :)</p>
  14. 14. Как работает 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. 15. Как работает 15
  16. 16. Как работает 16 properties: { who: { type: String, value: 'World' } }
  17. 17. Как работает 17 <input value="{{who::change}}" />
  18. 18. Как работает 18
  19. 19. DEMO 19
  20. 20. Где используется: • https://gaming.youtube.com/ • https://builtwithpolymer.org • Google • Chrome • etc • Rubius 20
  21. 21. Где используется: 21
  22. 22. Существующие компоненты • ExpandJS • Bosonic • Paper-elements • Google-elements • Vaadin • http://customelements.io 22
  23. 23. Лучше чем Backbone? • Проще • Работа с моделями as-is (не требуется оборачивать модели в Model/Collection) • Двустороннее связывание 23
  24. 24. Лучше чем React? • Двустороннее связывание • Полноценная библиотека (не view-only) • Основан на стандартизованных веб- компонентах • Нормальные шаблоны (не JSX) 24
  25. 25. Лучше чем Angular? • Простой в изучении • Понятные шаблоны • Не фреймворк  • Не RC и не надо переписывать все между обновлениями 25
  26. 26. Совместное использование с React и Angular – возможно! 26
  27. 27. …и даже с jQuery 27 $(this.root)
  28. 28. Минусы Polymer • Отсутствие поддержки в старых браузерах • Начальная загрузка • Performance (не идеален, но много лучше Angular) • Молодой (отсутствие специалистов, накопленного опыта) 28
  29. 29. Рекомендации к использованию • Использовать с осторожностью  • Внедрение малыми блоками • Веб-компоненты это будущее веба (ближайшее), но еще пока не настоящее 29
  30. 30. Спасибо! Вопросы? Артур Дробинский, http://arturdr.ru info@arturdr.ru 30

×