polymer state of the union - chrome dev summit 2014
TRANSCRIPT
![Page 1: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/1.jpg)
![Page 2: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/2.jpg)
PolymerState of the Union
![Page 3: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/3.jpg)
Jim Lo Scalzo/EPA/Landov
![Page 4: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/4.jpg)
About Me
+Matthew McNulty @mattsmcnulty
![Page 5: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/5.jpg)
About Polymer
![Page 6: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/6.jpg)
Polymer helps developers build awesome applications faster.
easierbetter
![Page 7: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/7.jpg)
How awesome?
Very.
![Page 8: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/8.jpg)
Let’s see.
![Page 9: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/9.jpg)
Polymer mail
![Page 10: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/10.jpg)
What is Polymer?
![Page 11: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/11.jpg)
Polymer is a library, not a framework
for making applications out of web components
![Page 12: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/12.jpg)
What does Polymer do?
![Page 15: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/15.jpg)
Polymer does a lot that reduces boilerplate that you
have to write over and over and over
![Page 16: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/16.jpg)
<polymer-is-declarative> </polymer-is-declarative>
![Page 18: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/18.jpg)
![Page 19: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/19.jpg)
The Polymer Experiment
![Page 20: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/20.jpg)
Er
Report Card
Ergonomics
Polymer Unified School District
![Page 21: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/21.jpg)
Er
Report Card
Ergonomics: A
Polymer Unified School District
![Page 22: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/22.jpg)
Er
Report Card
Productivity
Polymer Unified School District
![Page 23: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/23.jpg)
Er
Report Card
Productivity: A
Polymer Unified School District
![Page 24: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/24.jpg)
Er
Report Card
Expressiveness
Polymer Unified School District
![Page 25: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/25.jpg)
Er
Report Card
Expressiveness: A
Polymer Unified School District
![Page 26: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/26.jpg)
Er
Report Card
Performance
Polymer Unified School District
![Page 27: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/27.jpg)
Er
Report Card
Performance: Needs Improvement
Polymer Unified School District
![Page 28: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/28.jpg)
Er
Report Card
Performance: Maximum Improvement Opportunity! ☺
Polymer Unified School District
![Page 29: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/29.jpg)
Er
Report Card
Polymer Unified School District
Complexity & Payload
![Page 30: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/30.jpg)
Er
Report Card
Complexity & Payload
Polymer Unified School District
![Page 31: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/31.jpg)
Er
Report Card
Complexity: Needs Improvement
Polymer Unified School District
![Page 32: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/32.jpg)
Er
Report CardErgonomics:
Productivity: Expressiveness:
Performance: Complexity:
AAANeeds Improvement
Needs ImprovementPolymer Unified School District
![Page 33: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/33.jpg)
![Page 34: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/34.jpg)
The experiment is over.
It’s time to make Polymer production-ready
![Page 35: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/35.jpg)
Needs Improvement
• We took a hard look at every feature • Improve performance and complexity • But don’t sacrifice the features
developers love
![Page 36: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/36.jpg)
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
![Page 37: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/37.jpg)
Simplified Data Binding
• Optimized for performance and simplicity • Two-way binding opt-in • Explicit property typing • Change notification uses events for
interoperability
![Page 38: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/38.jpg)
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
![Page 39: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/39.jpg)
So how did we do?
![Page 40: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/40.jpg)
Chrome
5x faster0
25
50
75
100
Time
![Page 41: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/41.jpg)
Safari
8x faster0
25
50
75
100
Time
![Page 42: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/42.jpg)
What about payload & complexity?
![Page 43: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/43.jpg)
Payload & Complexity
• 15KB vs 123KB • 6KB gzipped
87% smaller
![Page 44: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/44.jpg)
![Page 45: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/45.jpg)
![Page 46: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/46.jpg)
![Page 47: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/47.jpg)
![Page 48: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/48.jpg)
About that report card…
![Page 49: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/49.jpg)
Er
Report CardErgonomics:
Productivity: Expressiveness:
Performance: Complexity:
AAAImproved!
Improved!Polymer Unified School District
![Page 50: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/50.jpg)
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.
![Page 51: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/51.jpg)
But that’s not all…
![Page 52: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/52.jpg)
What is Polymer?
![Page 53: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/53.jpg)
Clean-up
• Polyfills are used by others like Brick • Polyfills are not Polymer • Moving to webcomponents.org
![Page 54: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/54.jpg)
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
![Page 55: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/55.jpg)
What’s left is the core of Polymer…
![Page 56: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/56.jpg)
And that core is production-track
![Page 57: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/57.jpg)
Polymer Roadmap
• 0.8 - preview today • 0.9 “beta” - Q1 • 1.0 - Q2
![Page 58: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/58.jpg)
Who is using Polymer?
![Page 59: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/59.jpg)
![Page 60: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/60.jpg)
![Page 61: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/61.jpg)
![Page 62: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/62.jpg)
![Page 63: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/63.jpg)
![Page 64: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/64.jpg)
![Page 65: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/65.jpg)
![Page 66: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/66.jpg)
![Page 67: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/67.jpg)
![Page 68: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/68.jpg)
![Page 69: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/69.jpg)
And a whole lot more…
![Page 70: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/70.jpg)
Wrapup
![Page 71: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/71.jpg)
Summary
• The next major version of Polymer is coming soon
• It’s really fast • It’s much lighter • It’s much more modular
![Page 72: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/72.jpg)
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
![Page 73: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/73.jpg)
• Do nothing: Rob’s up next • Do something: follow us @polymer • Do something more: Polymer on github
![Page 74: Polymer State of the Union - Chrome Dev Summit 2014](https://reader037.vdocuments.site/reader037/viewer/2022110122/55a0ecf11a28ab43088b487c/html5/thumbnails/74.jpg)
Fin.