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!

Transcript

1. oh hai!
   @rob_dodson
   +RobDodson
   

   View Slide

2. 
   KNOWLEDGE
   HISTORY
   FOOD
   
   Less markup. Less JS. Less confusion.
   Web Components
   

   View Slide

3. Why should I care about
   Web Components?
   

   View Slide

4. View Slide

5. View Slide

6. Build a better framework
   

   View Slide

7. Build a better framework web
   

   View Slide

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!
   

   View Slide

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

   View Slide

10. Template is shipping
    pretty much everywhere
    

    View Slide

11. View Slide

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

    View Slide

13. bit.ly/webkit-sd
    

    View Slide

14. bit.ly/edge-sd
    

    View Slide

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

    View Slide

16. bit.ly/webkit-ce
    

    View Slide

17. bit.ly/ff-ce
    

    View Slide

18. Which leaves HTML Imports…
    

    View Slide

19. View Slide

20. View Slide

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

    View Slide

22. HTML Modules, maybe?
    

    View Slide

23. bit.ly/imports-modules
    

    View Slide

24. (gradual)
    Progress!
    

    View Slide

25. Polymer
    

    View Slide

26. About 3.5M pages on the
    web using Polymer
    

    View Slide

27. An explosion of use
    within the Googles!
    

    View Slide

28. Google’s Usage
    Elements
    Projects
    

    View Slide

29. YouTube
    Gaming
    

    View Slide

30. Play
    Music
    

    View Slide

31. TensorFlow
    

    View Slide

32. Library is getting smaller
    

    View Slide

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

    View Slide

34. Polyfills grand total…
    

    View Slide

35. Polyfills grand total…
    11kb
    

    View Slide

36. Polymer grand total…
    

    View Slide

37. Polymer grand total…
    35kb
    

    View Slide

38. 2015 was a solid year
    for Web Components
    

    View Slide

39. Plans for 2016
    

    View Slide

40. Progressive
    Web Apps
    

    View Slide

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

    View Slide

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

    View Slide

43. Make It Responsive
    With app-layout Elements
    

    View Slide

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

    View Slide

45. 
    
    
    …
    
    
    
    
    
    

    View Slide

46. polymerlabs.github.io/app-layout
    

    View Slide

47. Make It Load Fast
    With async patterns
    

    View Slide

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

    View Slide

49. polymerfast
    polymerfast.appspot.com
    

    View Slide

50. original version async + skeleton
    

    View Slide

51. Add Missing Pieces
    More framework-y bits
    

    View Slide

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

    View Slide

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

    View Slide

54. Reduce complexity around
    subproperty and array bindings.
    

    View Slide

55. Improved
    Workflow
    

    View Slide

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

    View Slide

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

    View Slide

58. 
    

    View Slide

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

    View Slide

60. Configure polygit to pull
    your projects from GitHub
    

    View Slide

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

    View Slide

62. 
    
    
    
    
    
    
    # Hello World!
    How _you_ doin
    
    
    

    View Slide

63. 
    
    
    
    
    
    
    # Hello World!
    How _you_ doin
    
    
    

    View Slide

64. View Slide

65. bit.ly/polybin
    

    View Slide

66. npm
    Publish all the things!
    

    View Slide

67. View Slide

68. npmjs.com/~polymer
    

    View Slide

69. View Slide

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

    View Slide

71. View Slide

72. Polymer CLI
    Let’s make this easier
    

    View Slide

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

    View Slide

74. generator-polymer Polymer Starter Kit
    

    View Slide

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

    View Slide

76. View Slide

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

    View Slide

78. Community
    

    View Slide

79. Increase Visibility
    Where are we heading?
    

    View Slide

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

    View Slide

81. github.com/polymer/project
    

    View Slide

82. github.com/polymer/project
    

    View Slide

83. Improve Maintenance
    Keep issues and PRs in check
    

    View Slide

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

    View Slide

85. View Slide

86. Bring in more community
    contributors
    

    View Slide

87. 59 contributors
    Mostly non-
    Googlers
    

    View Slide

88. Exploring giving maintainership
    status to community members
    

    View Slide

89. Promote Awesome Stuff
    Help the ecosystem take off
    

    View Slide

90. customelements.io
    

    View Slide

91. bit.ly/paper-date-picker
    

    View Slide

92. vaadin.com/elements
    

    View Slide

93. bit.ly/polycasts
    

    View Slide

94. Follow us at @polymer
    

    View Slide

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

    View Slide

96. thanks!
    @rob_dodson
    +RobDodson
    

    View Slide