Web Components in 2016

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!

95c3a3b33ea51545229c625bef42e343?s=128

Rob Dodson

March 18, 2016
Tweet

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