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

Web Components with Polymer (extra Polymer 2.0)

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
脳が溶けた話 / Melted Brain
Avatar for Keisuke69 keisuke69
1
980
The Rise of Browser Automation: AI-Powered Web Interaction in 2026
Avatar for Marc Thompson marcthompson_seo
0
310
ABEMAのバグバウンティの取り組み
Avatar for Kurochan kurochan
1
690
CloudFrontのHost Header転送設定でパケットの中身はどう変わるのか？
Avatar for nagisa_53 nagisa53
1
170
AgentCoreとLINEを使った飲食店おすすめアプリを作ってみた
Avatar for やくも yakumo
2
240
How to install a gem
Avatar for André Arko indirect
0
1.4k
20260320_JaSST26_Tokyo_登壇資料.pdf
Avatar for Shin Murakami mura_shin
0
120
欠陥分析（ODC分析）における生成AIの活用プロセスと実践事例 / 20260320 Suguru Ishii & Naoki Yamakoshi & Mayu Yoshizawa
Avatar for SHIFT EVOLVE shift_evolve
PRO
0
390
Datadog で実現するセキュリティ対策 ~オブザーバビリティとセキュリティを 一緒にやると何がいいのか~
Avatar for Shuntaro Azuma a2ush
0
120
Agent Skill 是什麼？對軟體產業帶來的變化
Avatar for Bo-Yi Wu appleboy
0
230
品質を経営にどう語るか #jassttokyo / Communicating the Strategic Value of Quality to Executive Leadership
Avatar for kyonmm kyonmm
PRO
3
1.2k
スケールアップ企業でQA組織が機能し続けるための組織設計と仕組み〜ボトムアップとトップダウンを両輪としたアプローチ〜

Avatar for tarappo tarappo
4
370

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.9k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
89
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
840
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
91
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
240
Design in an AI World
Avatar for tapps tapps
0
180
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
How to make the Groovebox
Avatar for あそなす asonas
2
2k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k

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