Веб-компоненты в веб-разработке на примере Polymer (Артур Дробинский)
•Download as PPTX, PDF•
0 likes•151 views
Веб-компоненты – это будущее веба. Это то, что придёт на смену Backbone, Angular, Knockout и многим другим. Веб-компоненты добавляют в стандарты, их реализуют в браузерах, но кажется, что применять их ещё нельзя. С помощью Polymer мы перенесёмся в будущее и реализуем веб-компоненты на существующих технологиях в существующих браузерах. И да, мы сможем начать использовать чистый, понятный, поддерживаемый и легко переиспользуемый код уже прямо сейчас.
Recommended
Recommended
More Related Content
Similar to Веб-компоненты в веб-разработке на примере Polymer (Артур Дробинский)
Similar to Веб-компоненты в веб-разработке на примере Polymer (Артур Дробинский) (20)
Веб-компоненты в веб-разработке на примере Polymer (Артур Дробинский)
- 1. Веб-компоненты в веб-разработке на примере Polymer Артур Дробинский, архитектор Rubius 1
- 2. Что такое WebComponents? • Пример с <select> 2 <select> <option>Standard</option> <option>2-day</option> <option>Overnight</option> </select>
- 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
- 5. История 5
- 6. История 6
- 7. Что такое Polymer? • Надстройка над веб-компонентами, упрощающая работу • Библиотека, а не фреймворк • Полифиллы для работы в «несовременных» браузерах 7
- 8. Как работает 8 <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>
- 10. Как работает 10 <!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>
- 11. Как работает 11
- 12. Как работает 12 properties: { who: { type: String, value: 'World' } }
- 14. Как работает 14
- 15. DEMO 15
- 16. Где используется: • https://gaming.youtube.com/ • https://builtwithpolymer.org • Google • Chrome • EA Sports • etc 16
- 18. Существующие компоненты • ExpandJS • Bosonic • Paper-elements • Google-elements • Vaadin • http://customelements.io 18
- 19. Лучше чем Backbone? • Проще • Работа с моделями as-is (не требуется оборачивать модели в Model/Collection) • Двустороннее связывание 19
- 20. Лучше чем React? • Двустороннее связывание • Полноценная библиотека (не view-only) • Основан на стандартизованных веб- компонентах • Нормальные шаблоны (не JSX) 20
- 21. Лучше чем Angular? • Простой в изучении • Понятные шаблоны • Не фреймворк • Не RC и не надо переписывать все между обновлениями 21
- 22. Совместное использование с React и Angular – возможно! 22
- 23. …и даже с jQuery 23 $(this.root)
- 26. Поддержка с использованием Polymer polifills 26
- 27. Минусы Polymer • Отсутствие поддержки в старых браузерах • Начальная загрузка • Performance (не идеален, но много лучше Angular) • Молодой (отсутствие специалистов, накопленного опыта) 27
- 28. Рекомендации к использованию • Использовать с осторожностью • Внедрение малыми блоками • Веб-компоненты это будущее веба (ближайшее), но еще пока не настоящее 28
Editor's Notes
- https://output.jsbin.com/tugedoxapo