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

One Year of Web Components

Rob Dodson
February 11, 2016
Technology
2
380

One Year of Web Components

2015 was a big year for Polymer and Web Components. All of the major browser makers are now on-board and implemented the various Web Component specifications, but there are still a lot of questions to be answered. Chief among these is "How can I build a best in breed app that leverages technologies like Polymer, and ship it to production?" To help answer this question we'll look at the roadmap for Polymer in 2016 and beyond, as well as exploring how Web Components fit into the Progressive Web App movement.

Rob Dodson

February 11, 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
Web Components in 2016
robdodson
0
320
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
開発生産性向上！ 育成を「改善」と捉えるエンジニア育成戦略
shoota
1
230
How to be an AWS Community Builder | 君もAWS Community Builderになろう！〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
多領域インシデントマネジメントへの挑戦：ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
100
AIのコンプラは何故しんどい？
shujisado
1
190
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
420
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
180
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
アップデート紹介：AWS Data Transfer Terminal
stknohg
PRO
0
180

Featured

See All Featured
A designer walks into a library…
pauljervisheath
204
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Thoughts on Productivity
jonyablonski
67
4.4k
4 Signs Your Business is Dying
shpigford
181
21k
A Philosophy of Restraint
colly
203
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to train your dragon (web standard)
notwaldorf
88
5.7k

Transcript

  1. oh hai! @rob_dodson +RobDodson

  2. A (Brief) Status Update

  3. 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!

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

  5. Template is shipping pretty much everywhere

  6. None

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

    vendors

  8. bit.ly/webkit-sd

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

    have consensus and buy in from all vendors.

  10. Which leaves HTML Imports…

  11. None
  12. None

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

  14. HTML Modules, maybe?

  15. bit.ly/imports-modules

  16. (gradual) Progress!

  17. Polymer

  18. About 3.5M pages on the web using Polymer

  19. An explosion of use within the Googles!

  20. Google’s Usage Elements Projects

  21. YouTube Gaming

  22. Play Music

  23. TensorFlow

  24. Library is getting smaller

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

    stuff” — some dude on Hacker News

  26. Polyfills grand total…

  27. Polyfills grand total… 8kb

  28. Polyfills grand total… 8kb (11kb if you include IE10)

  29. Polymer grand total…

  30. Polymer grand total… 35kb

  31. 2015 was a solid year for Web Components

  32. Plans for 2016

  33. Progressive Web Apps

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

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

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

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

  36. Make It Responsive With app-layout Elements

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

    layout, not just for Material Design

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

    bottom toolbar --> <app-toolbar>…</app-toolbar> </app-header> <main> <!-- Site content --> </main> </app-header-layout>

  39. polymerlabs.github.io/app-layout

  40. Make It Load Fast With async patterns

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

    or elements

  42. polymerfast polymerfast.appspot.com

  43. original version async + skeleton

  44. codelabs.developers.google.com

  45. 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 source: webpagetest

  46. polymerfast polymerfast.appspot.com

  47. Add Missing Pieces More framework-y bits

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

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

  50. Reduce complexity around subproperty and array bindings.

  51. Improved Workflow

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

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

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

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

  56. Configure polygit to pull your projects from GitHub

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

    tag of robdodson/mark-down”

  58. <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>

  59. <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>
  60. None

  61. bit.ly/polybin

  62. npm Publish all the things!

  63. None

  64. npmjs.com/~polymer

  65. None

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

  67. None

  68. Polymer CLI Let’s make this easier

  69. generator-polymer Polymer Starter Kit

  70. Build a collection of tasks that can be consumed by

    gulp, or express middleware, or a CLI

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

    automate tasks
  72. None

  73. Transpile ES2015 on the fly Resolve and load ES2015 JS

    modules Run vulcanize|cripser|polybuild Linting and file watching

  74. Community

  75. Increase Visibility Where are we heading?

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

    center

  77. github.com/polymer/project

  78. github.com/polymer/project

  79. Improve Maintenance Keep issues and PRs in check

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

  81. blog.ionic.io/how-ionic-uses-github-better

  82. Bring in more community contributors

  83. 59 contributors Mostly non- Googlers

  84. Exploring giving maintainership status to community members

  85. Promote Awesome Stuff Help the ecosystem take off

  86. customelements.io

  87. bit.ly/paper-date-picker

  88. vaadin.com/elements

  89. None

  90. builtwithpolymer.org

  91. bit.ly/polycasts

  92. Follow us at @polymer

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

  94. thanks! @rob_dodson +RobDodson