One Year of Web Components

Slide 1

Slide 1 text

oh hai! @rob_dodson +RobDodson

Slide 2

Slide 2 text

A (Brief) Status Update

Slide 3

Slide 3 text

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!

Slide 4

Slide 4 text

Four main specs: Template Shadow DOM Custom Elements HTML Imports

Slide 5

Slide 5 text

Template is shipping pretty much everywhere

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Shadow DOM has consensus and buy in from all browser vendors

Slide 8

Slide 8 text

bit.ly/webkit-sd

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Which leaves HTML Imports…

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

What if HTML Imports could use the ES Module Loader?

Slide 14

Slide 14 text

HTML Modules, maybe?

Slide 15

Slide 15 text

bit.ly/imports-modules

Slide 16

Slide 16 text

(gradual) Progress!

Slide 17

Slide 17 text

Polymer

Slide 18

Slide 18 text

About 3.5M pages on the web using Polymer

Slide 19

Slide 19 text

An explosion of use within the Googles!

Slide 20

Slide 20 text

Google’s Usage Elements Projects

Slide 21

Slide 21 text

YouTube Gaming

Slide 22

Slide 22 text

Play Music

Slide 23

Slide 23 text

TensorFlow

Slide 24

Slide 24 text

Library is getting smaller

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Polyfills grand total…

Slide 27

Slide 27 text

Polyfills grand total… 8kb

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Polymer grand total…

Slide 30

Slide 30 text

Polymer grand total… 35kb

Slide 31

Slide 31 text

2015 was a solid year for Web Components

Slide 32

Slide 32 text

Plans for 2016

Slide 33

Slide 33 text

Progressive Web Apps

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Make It Responsive With app-layout Elements

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

… …

Slide 39

Slide 39 text

polymerlabs.github.io/app-layout

Slide 40

Slide 40 text

Make It Load Fast With async patterns

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

polymerfast polymerfast.appspot.com

Slide 43

Slide 43 text

original version async + skeleton

Slide 44

Slide 44 text

codelabs.developers.google.com

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

polymerfast polymerfast.appspot.com

Slide 47

Slide 47 text

Add Missing Pieces More framework-y bits

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Plan to tackle i18n/l10n after the router lands.

Slide 50

Slide 50 text

Reduce complexity around subproperty and array bindings.

Slide 51

Slide 51 text

Improved Workflow

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Configure polygit to pull your projects from GitHub

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

# Hello World! How _you_ doin

Slide 59

Slide 59 text

# Hello World! How _you_ doin

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

bit.ly/polybin

Slide 62

Slide 62 text

npm Publish all the things!

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

npmjs.com/~polymer

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

npm i --save @polymer/paper-button

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Polymer CLI Let’s make this easier

Slide 69

Slide 69 text

generator-polymer Polymer Starter Kit

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Community

Slide 75

Slide 75 text

Increase Visibility Where are we heading?

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

github.com/polymer/project

Slide 78

Slide 78 text

github.com/polymer/project

Slide 79

Slide 79 text

Improve Maintenance Keep issues and PRs in check

Slide 80

Slide 80 text

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