Successfully reported this slideshow.

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

0

Share

1 of 30
1 of 30

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Веб-компоненты в веб-разработке на примере 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

Editor's Notes

  • https://output.jsbin.com/tugedoxapo
  • https://output.jsbin.com/tugedoxapo
  • ×