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

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!

Rob Dodson

March 18, 2016
Tweet

More Decks by Rob Dodson

Other Decks in Technology

Transcript

  1. oh hai!
    @rob_dodson
    +RobDodson

    View full-size slide


  2. KNOWLEDGE
    HISTORY
    FOOD

    Less markup. Less JS. Less confusion.
    Web Components

    View full-size slide

  3. Why should I care about
    Web Components?

    View full-size slide

  4. Build a better framework

    View full-size slide

  5. Build a better framework web

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Template is shipping
    pretty much everywhere

    View full-size slide

  9. Shadow DOM has consensus
    and buy in from all
    browser vendors

    View full-size slide

  10. bit.ly/webkit-sd

    View full-size slide

  11. bit.ly/edge-sd

    View full-size slide

  12. Custom Elements just had a
    face to face meeting. Also
    have consensus and buy in from
    all vendors.

    View full-size slide

  13. bit.ly/webkit-ce

    View full-size slide

  14. bit.ly/ff-ce

    View full-size slide

  15. Which leaves HTML Imports…

    View full-size slide

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

    View full-size slide

  17. HTML Modules, maybe?

    View full-size slide

  18. bit.ly/imports-modules

    View full-size slide

  19. (gradual)
    Progress!

    View full-size slide

  20. About 3.5M pages on the
    web using Polymer

    View full-size slide

  21. An explosion of use
    within the Googles!

    View full-size slide

  22. Google’s Usage
    Elements
    Projects

    View full-size slide

  23. YouTube
    Gaming

    View full-size slide

  24. Library is getting smaller

    View full-size slide

  25. “Aaaaactually, Polymer
    is all bloated cuz it
    has polyfills and stuff”
    — some dude on Hacker News

    View full-size slide

  26. Polyfills grand total…

    View full-size slide

  27. Polyfills grand total…
    11kb

    View full-size slide

  28. Polymer grand total…

    View full-size slide

  29. Polymer grand total…
    35kb

    View full-size slide

  30. 2015 was a solid year
    for Web Components

    View full-size slide

  31. Plans for 2016

    View full-size slide

  32. Progressive
    Web Apps

    View full-size slide

  33. Progressive Web
    Apps are…
    Responsive
    Connectivity independent
    App-like-interactions
    Etc…
    Progressive Apps: Escaping Tabs Without Losing Our Soul — goo.gl/KIZydg

    View full-size slide

  34. Progressive Web
    Apps are…
    Progressive Apps: Escaping Tabs Without Losing Our Soul — goo.gl/KIZydg
    “just websites that took all the
    right vitamins”

    View full-size slide

  35. Make It Responsive
    With app-layout Elements

    View full-size slide

  36. We want to provide elements that
    can support any app's layout, not
    just for Material Design

    View full-size slide

  37. polymerlabs.github.io/app-layout

    View full-size slide

  38. Make It Load Fast
    With async patterns

    View full-size slide

  39. Make sure you’re not blocking
    the renderer waiting on
    polyfills or elements

    View full-size slide

  40. polymerfast
    polymerfast.appspot.com

    View full-size slide

  41. original version async + skeleton

    View full-size slide

  42. Add Missing Pieces
    More framework-y bits

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Reduce complexity around
    subproperty and array bindings.

    View full-size slide

  46. Improved
    Workflow

    View full-size slide

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

    View full-size slide

  48. href="http://polygit.org/components/polymer/polymer.html">

    View full-size slide


  49. href=“polymer/polymer.html">

    View full-size slide

  50. Configure polygit to pull
    your projects from GitHub

    View full-size slide

  51. [+] + |:|*
    mark-down +robdodson +*
    “Fetch the latest tag of robdodson/mark-down”

    View full-size slide








  52. # Hello World!
    How _you_ doin


    View full-size slide








  53. # Hello World!
    How _you_ doin


    View full-size slide

  54. bit.ly/polybin

    View full-size slide

  55. npm
    Publish all the things!

    View full-size slide

  56. npmjs.com/~polymer

    View full-size slide

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

    View full-size slide

  58. Polymer CLI
    Let’s make this easier

    View full-size slide

  59. A collection of common tasks for
    scaffolding and productionizing
    an application

    View full-size slide

  60. generator-polymer Polymer Starter Kit

    View full-size slide

  61. Standardize on a project
    structure so the CLI can help
    automate work

    View full-size slide

  62. Transpile ES2015 on the fly
    Resolve and load ES2015 modules
    Run vulcanize|cripser|polybuild
    Linting and file watching

    View full-size slide

  63. Increase Visibility
    Where are we heading?

    View full-size slide

  64. Put roadmap, code of conduct,
    and contributing guidelines
    front and center

    View full-size slide

  65. github.com/polymer/project

    View full-size slide

  66. github.com/polymer/project

    View full-size slide

  67. Improve Maintenance
    Keep issues and PRs in check

    View full-size slide

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

    View full-size slide

  69. Bring in more community
    contributors

    View full-size slide

  70. 59 contributors
    Mostly non-
    Googlers

    View full-size slide

  71. Exploring giving maintainership
    status to community members

    View full-size slide

  72. Promote Awesome Stuff
    Help the ecosystem take off

    View full-size slide

  73. customelements.io

    View full-size slide

  74. bit.ly/paper-date-picker

    View full-size slide

  75. vaadin.com/elements

    View full-size slide

  76. bit.ly/polycasts

    View full-size slide

  77. Follow us at @polymer

    View full-size slide

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

    View full-size slide

  79. thanks!
    @rob_dodson
    +RobDodson

    View full-size slide