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

One Year of Web Components

Rob Dodson
February 11, 2016
Technology
2
370

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
570
Pragmatic Accessibility. A How-To Guide for Teams.
robdodson
2
200
Accessibility in the Platform
robdodson
3
550
Accessibility @ Cascade SF
robdodson
4
350
Accessibility is My Favorite Part of the Platform
robdodson
9
690
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
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
980
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
180
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
500
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
200
TanStack Routerに移行するのかい しないのかい、どっちなんだい！ / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
580
強いチームと開発生産性
onk
PRO
34
11k
Platform Engineering for Software Developers and Architects
syntasso
1
520
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270

Featured

See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
89
Being A Developer After 40
akosma
86
590k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
RailsConf 2023
tenderlove
29
900
Statistics for Hackers
jakevdp
796
220k
The Language of Interfaces
destraynor
154
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
Unsuck your backbone
ammeep
668
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k

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