PolymerState of the Union

Jim Lo Scalzo/EPA/Landov

About Me

+Matthew McNulty @mattsmcnulty

About Polymer

Polymer helps developers build awesome applications faster.

easierbetter

How awesome?

Very.

Let’s see.

Polymer mail

What is Polymer?

Polymer is a library, not a framework

for making applications out of web components

What does Polymer do?

Polymer makes web components sweeter

Image:

Image:

Primitives are primitive

Polymer does a lot that reduces boilerplate that you

have to write over and over and over

<polymer-is-declarative> </polymer-is-declarative>

Polymer has an opinion

Image:

The Polymer Experiment

Er

Report Card

Ergonomics

Polymer Unified School District

Er

Report Card

Ergonomics: A

Polymer Unified School District

Er

Report Card

Productivity

Polymer Unified School District

Er

Report Card

Productivity: A

Polymer Unified School District

Er

Report Card

Expressiveness

Polymer Unified School District

Er

Report Card

Expressiveness: A

Polymer Unified School District

Er

Report Card

Performance

Polymer Unified School District

Er

Report Card

Performance: Needs Improvement

Polymer Unified School District

Er

Report Card

Performance: Maximum Improvement Opportunity! ☺

Polymer Unified School District

Er

Report Card

Polymer Unified School District

Complexity & Payload

Er

Report Card

Complexity & Payload

Polymer Unified School District

Er

Report Card

Complexity: Needs Improvement

Polymer Unified School District

Er

Report CardErgonomics:

Productivity: Expressiveness:

Performance: Complexity:

AAANeeds Improvement

Needs ImprovementPolymer Unified School District

The experiment is over.

It’s time to make Polymer production-ready

Needs Improvement

• We took a hard look at every feature • Improve performance and complexity • But don’t sacrifice the features

developers love

Layering

• Refactored into layers • Core features are fast and lean • Advanced functionality is opt-in • Vast majority of use cases covered by

base feature set

Simplified Data Binding

• Optimized for performance and simplicity • Two-way binding opt-in • Explicit property typing • Change notification uses events for

interoperability

Leaner Polyfill for Shadow DOM

• Shadow DOM Polyfill is amazing, spec-compliant

• If we only shim features Polymer needs, we can make it much lighter & faster

So how did we do?

Chrome

5x faster0

25

50

75

100

Time

Safari

8x faster0

25

50

75

100

Time

What about payload & complexity?

Payload & Complexity

• 15KB vs 123KB • 6KB gzipped

87% smaller

About that report card…

Er

Report CardErgonomics:

Productivity: Expressiveness:

Performance: Complexity:

AAAImproved!

Improved!Polymer Unified School District

Nothing in life is free

• Some breaking changes • But not that scary - not a rewrite • A few minor version numbers’ worth • Reflected in the new version number: 0.8 • Closer to 1.0, .3 better.

But that’s not all…

What is Polymer?

Clean-up

• Polyfills are used by others like Brick • Polyfills are not Polymer • Moving to webcomponents.org

Clean-up

• Elements are made with Polymer • Polymer is a way to use material design,

but isn’t material design • So they are getting their own website

section

What’s left is the core of Polymer…

And that core is production-track

Polymer Roadmap

• 0.8 - preview today • 0.9 “beta” - Q1 • 1.0 - Q2

Who is using Polymer?

And a whole lot more…

Wrapup

Summary

• The next major version of Polymer is coming soon

• It’s really fast • It’s much lighter • It’s much more modular

Summary

• Polymer is no longer an experiment • The Polyfills are moving to

webcomponents.org • All the cool kids are already using it • You should too - Rob will show you how

• Do nothing: Rob’s up next • Do something: follow us @polymer • Do something more: Polymer on github

Fin.