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

Web Components in 2016

Rob Dodson
March 18, 2016
Technology
0
320

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

See All by Rob Dodson
Custom Elements Everywhere
robdodson
3
570
Pragmatic Accessibility. A How-To Guide for Teams.
robdodson
2
200
Accessibility in the Platform
robdodson
3
550
Accessibility @ Cascade SF
robdodson
4
350
Accessibility is My Favorite Part of the Platform
robdodson
9
690
How to be a great developer
robdodson
4
260
One Year of Web Components
robdodson
2
370
Building Progressive Web Apps with Polymer
robdodson
21
4.4k
End to End with Polymer
robdodson
17
1.4k

Other Decks in Technology

See All in Technology
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
130
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
250
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
160
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
これまでの計測・開発・デプロイ方法全部見せます！ / Findy ISUCON 2024-11-14
tohutohu
3
370
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
520
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
220

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
A better future with KSS
kneath
238
17k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
For a Future-Friendly Web
brad_frost
175
9.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
What's in a price? How to price your products and services
michaelherold
243
12k
4 Signs Your Business is Dying
shpigford
180
21k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Making Projects Easy
brettharned
115
5.9k
Building an army of robots
kneath
302
43k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Visualization
eitanlees
145
15k

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