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

Web Components in 2016

Rob Dodson
March 18, 2016
Technology
0
230

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
510
Pragmatic Accessibility. A How-To Guide for Teams.
robdodson
2
190
Accessibility in the Platform
robdodson
3
510
Accessibility @ Cascade SF
robdodson
4
290
Accessibility is My Favorite Part of the Platform
robdodson
9
680
How to be a great developer
robdodson
4
260
One Year of Web Components
robdodson
2
270
Building Progressive Web Apps with Polymer
robdodson
21
4.2k
End to End with Polymer
robdodson
17
1.4k

Other Decks in Technology

See All in Technology
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
190
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
590
反実仮想機械学習とは何か
usaito
PRO
8
3k
Oracle Cloud Infrastructure：2024年4月度サービス・アップデート
oracle4engineer
PRO
1
180
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
1
940
本当のAWS基礎
toru_kubota
0
470
Cracking the KubeCon CfP
inductor
2
220
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
0
330
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
430
LLM とプロンプトエンジニアリング／チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
250
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
190
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
4
260

Featured

See All Featured
Atom: Resistance is Futile
akmur
259
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Automating Front-end Workflow
addyosmani
1356
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Clear Off the Table
cherdarchuk
84
310k
A Tale of Four Properties
chriscoyier
151
22k
Typedesign – Prime Four
hannesfritz
36
2.1k
Ruby is Unlike a Banana
tanoku
96
10k
Docker and Python
trallard
34
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k

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