Pro Yearly is on sale from $80 to $50! »

One Year of Web Components

95c3a3b33ea51545229c625bef42e343?s=47 Rob Dodson
February 11, 2016

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.

95c3a3b33ea51545229c625bef42e343?s=128

Rob Dodson

February 11, 2016
Tweet

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