Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components with Polymer (extra Polymer 2.0)

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Dhyego Fernando Dhyego Fernando
May 20, 2017
Technology
0
47

Web Components with Polymer (extra Polymer 2.0)

Lightning talk presented by me at Google I/O Extended Cuiabá 2017.

Avatar for Dhyego Fernando

Dhyego Fernando

May 20, 2017
Tweet

More Decks by Dhyego Fernando

See All by Dhyego Fernando
Introduction to Angular 2
Avatar for Dhyego Fernando dhyegofernando
0
63
Angular JS Introduction
Avatar for Dhyego Fernando dhyegofernando
0
54
Modular Angular JS
Avatar for Dhyego Fernando dhyegofernando
0
35

Other Decks in Technology

See All in Technology
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
20260208_第66回 コンピュータビジョン勉強会
Avatar for KeiichiIto1978 keiichiito1978
0
160
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
Avatar for 小笠原理久 riku_423
2
590
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
2
300
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.4k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
310
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
3
450
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
960
usermode linux without MMU - fosdem2026 kernel devroom
Avatar for Hajime Tazaki thehajime
0
240
ランサムウェア対策としてのpnpm導入のススメ
Avatar for Satoru Ishikawa ishikawa_satoru
0
180
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
270

Featured

See All Featured
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
130
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
280
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
450
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.1k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
190

Transcript

  1. Web Components with Polymer @ Google I/O, Extended Cuiabá Web

    Components with Polymer /dhyegofernando

  2. Web Components with Polymer @ Google I/O, Extended Cuiabá /dhyegofernando

    full stack dev @

  3. Web Components with Polymer @ Google I/O, Extended Cuiabá

  4. Web Components with Polymer @ Google I/O, Extended Cuiabá Agenda

    ✓ What is a Web Component? ✓ Benefits ✓ Where do they live? Web Components ✓ What is Polymer? ✓ Why Polymer? Polymer ✓ Polymer 2.0 ✓ App Toolbox ✓ Polymer CLI ✓ Getting Started (live code) ✓ Finals

  5. Web Components with Polymer @ Google I/O, Extended Cuiabá What

    is a Web Component?

  6. Web Components with Polymer @ Google I/O, Extended Cuiabá Just

    HTML Elements
 <div>Hello World</div>

  7. Web Components with Polymer @ Google I/O, Extended Cuiabá Custom

    Elements
 <your-own-element/>

  8. Web Components with Polymer @ Google I/O, Extended Cuiabá HTML

    Templates
 <template></template>

  9. Web Components with Polymer @ Google I/O, Extended Cuiabá Shadow

    DOM
 <slot></slot>

  10. Web Components with Polymer @ Google I/O, Extended Cuiabá HTML

    Imports
 <link/>

  11. Web Components with Polymer @ Google I/O, Extended Cuiabá What

    are its benefits?

  12. Web Components with Polymer @ Google I/O, Extended Cuiabá Reusable

  13. Web Components with Polymer @ Google I/O, Extended Cuiabá Maintainable

  14. Web Components with Polymer @ Google I/O, Extended Cuiabá Encapsulated

    && Independent

  15. Web Components with Polymer @ Google I/O, Extended Cuiabá Let’s

    Work Together

  16. Web Components with Polymer @ Google I/O, Extended Cuiabá What

    is not so good?

  17. Web Components with Polymer @ Google I/O, Extended Cuiabá Cross-browsers

    weirdness

  18. Web Components with Polymer @ Google I/O, Extended Cuiabá Cross-browsers

    specs implementation

  19. Web Components with Polymer @ Google I/O, Extended Cuiabá Polyfills

    are slow

  20. Web Components with Polymer @ Google I/O, Extended Cuiabá Where

    do they live?

  21. Web Components with Polymer @ Google I/O, Extended Cuiabá “There’s

    an element for that” bit.ly/2rDlzJ0

  22. Web Components with Polymer @ Google I/O, Extended Cuiabá

  23. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer

  24. Web Components with Polymer @ Google I/O, Extended Cuiabá 3.5+

    Million Pages using Polymer

  25. Web Components with Polymer @ Google I/O, Extended Cuiabá Who

    is using Polymer? bit.ly/2rCuX04

  26. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer

    + PWA + Google Cloud Vision API bit.ly/2qIDX66 Cheese

  27. Web Components with Polymer @ Google I/O, Extended Cuiabá What

    is Polymer?

  28. Web Components with Polymer @ Google I/O, Extended Cuiabá What

    is not Polymer?

  29. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer

    is not a framework

  30. Web Components with Polymer @ Google I/O, Extended Cuiabá Interoperable


    by default

  31. Web Components with Polymer @ Google I/O, Extended Cuiabá +

  32. Web Components with Polymer @ Google I/O, Extended Cuiabá +

  33. Web Components with Polymer @ Google I/O, Extended Cuiabá +

    any framework

  34. Web Components with Polymer @ Google I/O, Extended Cuiabá Why

    Polymer at all?

  35. Web Components with Polymer @ Google I/O, Extended Cuiabá Template-based

    rendering

  36. Web Components with Polymer @ Google I/O, Extended Cuiabá State

    propagation

  37. Web Components with Polymer @ Google I/O, Extended Cuiabá Declarative

    events

  38. Web Components with Polymer @ Google I/O, Extended Cuiabá Attributes

    && Properties sync

  39. Web Components with Polymer @ Google I/O, Extended Cuiabá Premisses

  40. Web Components with Polymer @ Google I/O, Extended Cuiabá Speed

  41. Web Components with Polymer @ Google I/O, Extended Cuiabá Latest

    APIs

  42. Web Components with Polymer @ Google I/O, Extended Cuiabá App

    Toolbox Scaffolding Routing i18n UI Elements App Storage Offline Behavior + Patterns

  43. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer

    CLI npm install -g polymer-cli

  44. Web Components with Polymer @ Google I/O, Extended Cuiabá polymer

    init

  45. Web Components with Polymer @ Google I/O, Extended Cuiabá polymer

    serve polymer test polymer build

  46. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer

    2.0

  47. Web Components with Polymer @ Google I/O, Extended Cuiabá Smaller,

    faster, better…

  48. Web Components with Polymer @ Google I/O, Extended Cuiabá Cross-browser

    fits 9, 10, 11

  49. Web Components with Polymer @ Google I/O, Extended Cuiabá natively

    supported +1b devices

  50. Web Components with Polymer @ Google I/O, Extended Cuiabá 1/4

    the size of Polymer 1.0

  51. Web Components with Polymer @ Google I/O, Extended Cuiabá Interoperability

  52. Web Components with Polymer @ Google I/O, Extended Cuiabá ES6

    syntax like class MyElement extends Polymer.Element { // ... }

  53. Web Components with Polymer @ Google I/O, Extended Cuiabá Data

    system improvements

  54. Web Components with Polymer @ Google I/O, Extended Cuiabá Smooth

    Migration

  55. Web Components with Polymer @ Google I/O, Extended Cuiabá Hybrid

    Elements

  56. Web Components with Polymer @ Google I/O, Extended Cuiabá Getting

    Started

  57. Web Components with Polymer @ Google I/O, Extended Cuiabá Where

    to Learn?

  58. Web Components with Polymer @ Google I/O, Extended Cuiabá “There’s

    an element for that” bit.ly/2rDlzJ0

  59. Web Components with Polymer @ Google I/O, Extended Cuiabá Polycasts

    bit.ly/2q3I4Xf

  60. Web Components with Polymer @ Google I/O, Extended Cuiabá Let’s

    discuss ?

  61. Web Components with Polymer @ Google I/O, Extended Cuiabá Thank

    you — /dhyegofernando bit.ly/devmt-slack