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

Web Components in 2016

Rob Dodson
March 18, 2016
Technology
0
320

Web Components in 2016

The past few years have been a bumpy ride for developers excited by Web Components. But we’re finally reaching a point where all of the browsers agree upon, and are implementing, Web Component standards.

Similarly, the Polymer project has gone through many iterations to get where it is today and looking forward we want to focus on giving developers the most polished, on-rails experience we possibly can.

So what does that look like? In this talk we’ll cover the future of Polymer tools, where we see the ecosystem heading, and our roadmap of features for 2016 and beyond!

Rob Dodson

March 18, 2016
Tweet

More Decks by Rob Dodson

See All by Rob Dodson
Custom Elements Everywhere
robdodson
3
580
Pragmatic Accessibility. A How-To Guide for Teams.
robdodson
2
200
Accessibility in the Platform
robdodson
3
560
Accessibility @ Cascade SF
robdodson
4
360
Accessibility is My Favorite Part of the Platform
robdodson
9
700
How to be a great developer
robdodson
4
260
One Year of Web Components
robdodson
2
380
Building Progressive Web Apps with Polymer
robdodson
21
4.4k
End to End with Polymer
robdodson
17
1.4k

Other Decks in Technology

See All in Technology
ずっと昔に Star をつけたはずの 思い出せない GitHub リポジトリを見つけたい！
rokuosan
0
150
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
250
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
コンテナセキュリティのためのLandlock入門
nullpo_head
2
320
多領域インシデントマネジメントへの挑戦：ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
100
Amazon SageMaker Unified Studio（Preview）、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
podman_update_2024-12
orimanabu
1
260
ガバメントクラウドのセキュリティ対策事例について
fujisawaryohei
0
530
Qiita埋め込み用スライド
naoki_0531
0
860
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
1
300

Featured

See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Scaling GitHub
holman
458
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
KATA
mclloyd
29
14k
Bash Introduction
62gerente
608
210k
Mobile First: as difficult as doing things right
swwweet
222
9k
How STYLIGHT went responsive
nonsquared
95
5.2k
Fireside Chat
paigeccino
34
3.1k
RailsConf 2023
tenderlove
29
940
A Philosophy of Restraint
colly
203
16k
It's Worth the Effort
3n
183
28k
Making Projects Easy
brettharned
116
5.9k

Transcript

  1. oh hai! @rob_dodson +RobDodson

  2. <paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab> </paper-tabs> Less markup. Less JS. Less

    confusion. Web Components

  3. Why should I care about Web Components?

  4. None
  5. None

  6. Build a better framework

  7. Build a better framework web

  8. Small caption This is a header This is a sub

    header This is body copy and it goes a little like this and Lorem ipsum dolor sit amet, consectetur adipiscing elit. Photo or other source Good (albeit slow) progress on standards Web Standards!

  9. Four main specs: Template Shadow DOM Custom Elements HTML Imports

  10. Template is shipping pretty much everywhere

  11. None

  12. Shadow DOM has consensus and buy in from all browser

    vendors

  13. bit.ly/webkit-sd

  14. bit.ly/edge-sd

  15. Custom Elements just had a face to face meeting. Also

    have consensus and buy in from all vendors.

  16. bit.ly/webkit-ce

  17. bit.ly/ff-ce

  18. Which leaves HTML Imports…

  19. None
  20. None

  21. What if HTML Imports could use the ES Module Loader?

  22. HTML Modules, maybe?

  23. bit.ly/imports-modules

  24. (gradual) Progress!

  25. Polymer

  26. About 3.5M pages on the web using Polymer

  27. An explosion of use within the Googles!

  28. Google’s Usage Elements Projects

  29. YouTube Gaming

  30. Play Music

  31. TensorFlow

  32. Library is getting smaller

  33. “Aaaaactually, Polymer is all bloated cuz it has polyfills and

    stuff” — some dude on Hacker News

  34. Polyfills grand total…

  35. Polyfills grand total… 11kb

  36. Polymer grand total…

  37. Polymer grand total… 35kb

  38. 2015 was a solid year for Web Components

  39. Plans for 2016

  40. Progressive Web Apps

  41. Progressive Web Apps are… Responsive Connectivity independent App-like-interactions Etc… Progressive

    Apps: Escaping Tabs Without Losing Our Soul — goo.gl/KIZydg

  42. Progressive Web Apps are… Progressive Apps: Escaping Tabs Without Losing

    Our Soul — goo.gl/KIZydg “just websites that took all the right vitamins”

  43. Make It Responsive With app-layout Elements

  44. We want to provide elements that can support any app's

    layout, not just for Material Design

  45. <app-header-layout> <app-header fixed waterfall> <!-- top toolbar --> <app-toolbar>…</app-toolbar> </app-header>

    <main> <!-- Site content --> </main> </app-header-layout>

  46. polymerlabs.github.io/app-layout

  47. Make It Load Fast With async patterns

  48. Make sure you’re not blocking the renderer waiting on polyfills

    or elements

  49. polymerfast polymerfast.appspot.com

  50. original version async + skeleton

  51. Add Missing Pieces More framework-y bits

  52. Planning to release carbon-router 1st half of 2016.

  53. Plan to tackle i18n/l10n after the router lands.

  54. Reduce complexity around subproperty and array bindings.

  55. Improved Workflow

  56. Polygit A dev CDN serving assets from cdn.rawgit.com

  57. <link rel=“import“ href="http://polygit.org/components/polymer/polymer.html">

  58. <base href="http://polygit.org/components/">

  59. <base href="http://polygit.org/components/"> <link rel=“import” href=“polymer/polymer.html">

  60. Configure polygit to pull your projects from GitHub

  61. <component> [+<org>] + <ver>|:<branch>|* mark-down +robdodson +* “Fetch the latest

    tag of robdodson/mark-down”

  62. <head> <base href="https://polygit.org/mark-down+robdodson+*/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="mark-down/mark-down.html" rel="import"> </head> <body>

    <mark-down> # Hello World! How _you_ doin </mark-down> </body>

  63. <head> <base href="https://polygit.org/mark-down+robdodson+*/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="mark-down/mark-down.html" rel="import"> </head> <body>

    <mark-down> # Hello World! How _you_ doin </mark-down> </body>
  64. None

  65. bit.ly/polybin

  66. npm Publish all the things!

  67. None

  68. npmjs.com/~polymer

  69. None

  70. npm i --save @polymer/paper-button

  71. None

  72. Polymer CLI Let’s make this easier

  73. A collection of common tasks for scaffolding and productionizing an

    application

  74. generator-polymer Polymer Starter Kit

  75. Standardize on a project structure so the CLI can help

    automate work
  76. None

  77. Transpile ES2015 on the fly Resolve and load ES2015 modules

    Run vulcanize|cripser|polybuild Linting and file watching

  78. Community

  79. Increase Visibility Where are we heading?

  80. Put roadmap, code of conduct, and contributing guidelines front and

    center

  81. github.com/polymer/project

  82. github.com/polymer/project

  83. Improve Maintenance Keep issues and PRs in check

  84. Maintaining ~144 repos between Polymer, PolymerElements, and GoogleWebComponents orgs

  85. None

  86. Bring in more community contributors

  87. 59 contributors Mostly non- Googlers

  88. Exploring giving maintainership status to community members

  89. Promote Awesome Stuff Help the ecosystem take off

  90. customelements.io

  91. bit.ly/paper-date-picker

  92. vaadin.com/elements

  93. bit.ly/polycasts

  94. Follow us at @polymer

  95. Keep an eye on github.com/polymer/project and blog.polymer-project.org

  96. thanks! @rob_dodson +RobDodson