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.

Transcript

1. oh hai!
   @rob_dodson
   +RobDodson
   

   View Slide

2. A (Brief) Status Update
   

   View Slide

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!
   

   View Slide

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

   View Slide

5. Template is shipping
   pretty much everywhere
   

   View Slide

6. View Slide

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

   View Slide

8. bit.ly/webkit-sd
   

   View Slide

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

   View Slide

10. Which leaves HTML Imports…
    

    View Slide

11. View Slide

12. View Slide

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

    View Slide

14. HTML Modules, maybe?
    

    View Slide

15. bit.ly/imports-modules
    

    View Slide

16. (gradual)
    Progress!
    

    View Slide

17. Polymer
    

    View Slide

18. About 3.5M pages on the
    web using Polymer
    

    View Slide

19. An explosion of use
    within the Googles!
    

    View Slide

20. Google’s Usage
    Elements
    Projects
    

    View Slide

21. YouTube
    Gaming
    

    View Slide

22. Play
    Music
    

    View Slide

23. TensorFlow
    

    View Slide

24. Library is getting smaller
    

    View Slide

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

    View Slide

26. Polyfills grand total…
    

    View Slide

27. Polyfills grand total…
    8kb
    

    View Slide

28. Polyfills grand total…
    8kb
    (11kb if you include IE10)
    

    View Slide

29. Polymer grand total…
    

    View Slide

30. Polymer grand total…
    35kb
    

    View Slide

31. 2015 was a solid year
    for Web Components
    

    View Slide

32. Plans for 2016
    

    View Slide

33. Progressive
    Web Apps
    

    View Slide

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

    View Slide

35. 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

36. Make It Responsive
    With app-layout Elements
    

    View Slide

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

    View Slide

38. 
    
    
    …
    
    …
    
    
    
    
    
    

    View Slide

39. polymerlabs.github.io/app-layout
    

    View Slide

40. Make It Load Fast
    With async patterns
    

    View Slide

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

    View Slide

42. polymerfast
    polymerfast.appspot.com
    

    View Slide

43. original version async + skeleton
    

    View Slide

44. codelabs.developers.google.com
    

    View Slide

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
    

    View Slide

46. polymerfast
    polymerfast.appspot.com
    

    View Slide

47. Add Missing Pieces
    More framework-y bits
    

    View Slide

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

    View Slide

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

    View Slide

50. Reduce complexity around
    subproperty and array bindings.
    

    View Slide

51. Improved
    Workflow
    

    View Slide

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

    View Slide

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

    View Slide

54. 
    

    View Slide

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

    View Slide

56. Configure polygit to pull
    your projects from GitHub
    

    View Slide

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

    View Slide

58. 
    
    
    
    
    
    
    # Hello World!
    How _you_ doin
    
    
    

    View Slide

59. 
    
    
    
    
    
    
    # Hello World!
    How _you_ doin
    
    
    

    View Slide

60. View Slide

61. bit.ly/polybin
    

    View Slide

62. npm
    Publish all the things!
    

    View Slide

63. View Slide

64. npmjs.com/~polymer
    

    View Slide

65. View Slide

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

    View Slide

67. View Slide

68. Polymer CLI
    Let’s make this easier
    

    View Slide

69. generator-polymer Polymer Starter Kit
    

    View Slide

70. Build a collection of tasks that
    can be consumed by gulp, or
    express middleware, or a CLI
    

    View Slide

71. Standardize on a project
    structure so the CLI can help
    automate tasks
    

    View Slide

72. View Slide

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

    View Slide

74. Community
    

    View Slide

75. Increase Visibility
    Where are we heading?
    

    View Slide

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

    View Slide

77. github.com/polymer/project
    

    View Slide

78. github.com/polymer/project
    

    View Slide

79. Improve Maintenance
    Keep issues and PRs in check
    

    View Slide

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

    View Slide

81. blog.ionic.io/how-ionic-uses-github-better
    

    View Slide

82. Bring in more community
    contributors
    

    View Slide

83. 59 contributors
    Mostly non-
    Googlers
    

    View Slide

84. Exploring giving maintainership
    status to community members
    

    View Slide

85. Promote Awesome Stuff
    Help the ecosystem take off
    

    View Slide

86. customelements.io
    

    View Slide

87. bit.ly/paper-date-picker
    

    View Slide

88. vaadin.com/elements
    

    View Slide

89. View Slide

90. builtwithpolymer.org
    

    View Slide

91. bit.ly/polycasts
    

    View Slide

92. Follow us at @polymer
    

    View Slide

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

    View Slide

94. thanks!
    @rob_dodson
    +RobDodson
    

    View Slide