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

One Year of Web Components

Rob Dodson
February 11, 2016
Technology
2
270

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
510
Pragmatic Accessibility. A How-To Guide for Teams.
robdodson
2
190
Accessibility in the Platform
robdodson
3
510
Accessibility @ Cascade SF
robdodson
4
290
Accessibility is My Favorite Part of the Platform
robdodson
9
680
How to be a great developer
robdodson
4
260
Web Components in 2016
robdodson
0
230
Building Progressive Web Apps with Polymer
robdodson
21
4.2k
End to End with Polymer
robdodson
17
1.4k

Other Decks in Technology

See All in Technology
Grafana x PagerDuty Better Together
jacopen
1
240
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
860
一生覚えておきたい「システム開発＝コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
2
250
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
230
成長をサポートするピープルマネジメントのやり方
sioncojp
1
150
Babylon.jsと色々なものを組み合わせる：ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
150
ワールドカフェI ／チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
3
590
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.1k
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
230

Featured

See All Featured
Adopting Sorbet at Scale
ufuk
69
8.6k
Raft: Consensus for Rubyists
vanstee
133
6.3k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Docker and Python
trallard
35
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Being A Developer After 40
akosma
66
580k
Producing Creativity
orderedlist
PRO
338
39k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
How STYLIGHT went responsive
nonsquared
92
4.8k

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