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

Web Components with Polymer (extra Polymer 2.0)

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
ソースを読む時の思考プロセスの例-MkDocs
Avatar for Satoru Takeuchi sat
PRO
1
170
ソフトウェアエンジニアの生成AI活用と、これから
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
900
Zephyr(RTOS)にEdge AIを組み込んでみた話
Avatar for misoji engineer iotengineer22
1
340
ヘンリー会社紹介資料（エンジニア向け） / company deck for engineer
Avatar for Henry, Inc. henryofficial
0
360
IoTLT@ストラタシスジャパン_20251021
Avatar for Norippy norioikedo
0
130
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
Avatar for Claire Giordano clairegiordano
0
130
Observability — Extending Into Incident Response
Avatar for Narimichi Takamura nari_ex
1
250
AI AgentをLangflowでサクッと作って、1日働かせてみた！
Avatar for Yano-13 yano13
1
150
OpenTelemetry が拡げる Gemini CLI の可観測性
Avatar for Tomonori Hayashi phaya72
2
2.2k
SOTA競争から人間を超える画像認識へ
Avatar for Yosuke Shinya shinya7y
0
200
難しいセキュリティ用語をわかりやすくしてみた
Avatar for Yuta3110 yuta3110
0
390
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地（S3）まで見に行く
Avatar for camay kameitomohiro
1
400

Featured

See All Featured
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
15k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
238
140k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.2k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
369
20k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k

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