Web Components in 2016 - Speaker Deck

Slide 1

Slide 1 text

oh hai! @rob_dodson +RobDodson

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Why should I care about Web Components?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Build a better framework

Slide 7

Slide 7 text

Build a better framework web

Slide 8

Slide 8 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 9

Slide 9 text

Four main specs: Template Shadow DOM Custom Elements HTML Imports

Slide 10

Slide 10 text

Template is shipping pretty much everywhere

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Shadow DOM has consensus and buy in from all browser vendors

Slide 13

Slide 13 text

bit.ly/webkit-sd

Slide 14

Slide 14 text

bit.ly/edge-sd

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

bit.ly/webkit-ce

Slide 17

Slide 17 text

bit.ly/ff-ce

Slide 18

Slide 18 text

Which leaves HTML Imports…

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

What if HTML Imports could use the ES Module Loader?

Slide 22

Slide 22 text

HTML Modules, maybe?

Slide 23

Slide 23 text

bit.ly/imports-modules

Slide 24

Slide 24 text

(gradual) Progress!

Slide 25

Slide 25 text

Polymer

Slide 26

Slide 26 text

About 3.5M pages on the web using Polymer

Slide 27

Slide 27 text

An explosion of use within the Googles!

Slide 28

Slide 28 text

Google’s Usage Elements Projects

Slide 29

Slide 29 text

YouTube Gaming

Slide 30

Slide 30 text

Play Music

Slide 31

Slide 31 text

TensorFlow

Slide 32

Slide 32 text

Library is getting smaller

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Polyfills grand total…

Slide 35

Slide 35 text

Polyfills grand total… 11kb

Slide 36

Slide 36 text

Polymer grand total…

Slide 37

Slide 37 text

Polymer grand total… 35kb

Slide 38

Slide 38 text

2015 was a solid year for Web Components

Slide 39

Slide 39 text

Plans for 2016

Slide 40

Slide 40 text

Progressive Web Apps

Slide 41

Slide 41 text

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

Slide 42

Slide 42 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 43

Slide 43 text

Make It Responsive With app-layout Elements

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

…

Slide 46

Slide 46 text

polymerlabs.github.io/app-layout

Slide 47

Slide 47 text

Make It Load Fast With async patterns

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

polymerfast polymerfast.appspot.com

Slide 50

Slide 50 text

original version async + skeleton

Slide 51

Slide 51 text

Add Missing Pieces More framework-y bits

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Plan to tackle i18n/l10n after the router lands.

Slide 54

Slide 54 text

Reduce complexity around subproperty and array bindings.

Slide 55

Slide 55 text

Improved Workflow

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Configure polygit to pull your projects from GitHub

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

# Hello World! How _you_ doin

Slide 63

Slide 63 text

# Hello World! How _you_ doin

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

bit.ly/polybin

Slide 66

Slide 66 text

npm Publish all the things!

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

npmjs.com/~polymer

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

npm i --save @polymer/paper-button

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

Polymer CLI Let’s make this easier

Slide 73

Slide 73 text

A collection of common tasks for scaffolding and productionizing an application

Slide 74

Slide 74 text

generator-polymer Polymer Starter Kit

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Community

Slide 79

Slide 79 text

Increase Visibility Where are we heading?

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

github.com/polymer/project

Slide 82

Slide 82 text

github.com/polymer/project

Slide 83

Slide 83 text

Improve Maintenance Keep issues and PRs in check

Slide 84

Slide 84 text

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