Often when you are developing a website, you find yourself reusing large chunks of html code repeatedly. If you later decide you want to update the html of these reused components, you have to change the html in multiple places to accomplish that. This is just one of the problems that Web Components helps solve. Web Components let you create your own HTML elements and control the way these elements are rendered.
While Web Components, which are based on the Shadow DOM standard, are a native browser technology, it has taken time for the various browsers to integrate the standard into their browsers. This often happens whenever something new is added to the web platform, and the solution today is the same as it has been in the past, Polyfills. A Polyfill is a piece of code that enables technologies that your browser doesn’t yet support.
Fortunately the Browsers are catching up with the standards. Apple added support for Shadow DOM in Safari 10.0 which makes Web Components natively possible in Safari (including on iOS) without a Polyfill. Firefox is currently working on developing Shadow DOM support into their browser and Microsoft is considering adding support to their Edge browser. Eventually once all browsers support Web Components natively, we can stop using Polyfills to enable the power of Web Components, in the mean time however, there is Polymer.
Just before Google I/O this year, Google released Polymer 2.0, a massive upgrade over the original Polymer library. Polymer 2.0 ads a ton of new functionality and features to Polymer making developing and using Web Components easier than before, yet still manages to weigh in at just 1/4 the size of the previous release. At the same time the Polymer team has managed to make components that were designed for Polymer 1 still work 100% making it completely backwards compatible.
Polymer 2.0 is a great weapon in the web developer’s arsenal to help them #UseThePlatform to make the web platform even better.
Live Blog Transcript
: Ready for my first live blog of #io17
Looking forward to learning more about Polymer and Web Components from @wmginsberg
: Safari now natively supports Web Components!
: "Polymer is a lattice to enable components and new features where not available"
: The original web platform was designed for documents, the platform was not designed from the ground up for applications.
: Frameworks are amazing for making the web platform do what it wasn't designed to, web components on the other hand makes the web platform better.
terraform the web
: #UseThePlatform Does Not mean #UseONLYThePlatform
: #UseThePlatform in production
: Who is using Polymer?
A Lot of people: Comcast, USA Today, ING, Net-a-porter, BBVA, CocaCola, EA, Predix (General Electric)
: Who is using Polymer?
Google uses polymer as the most common dependancy of ALL dependancies across their projects
: Announcing Polymer 2.0
native on 1b+ mobile devices
: Polymer 2.0
1/4 the size of Polymer 1.0
: Three key goals of Polymer 2.0
- latest platform features
- smooth migration
: Why do we need polymer at all?
Polyfill for some browsers (Firefox and Edge), and simplicity in development
: Extend PolymerElement instead of HTMLElement
: Polymer 2.0 + Polyfill size: 11k payload on chrome vs 40k before
: native shadow dom ~ 70% high-fidelity polyfill
: Polymer 2.0 has a legacy api, so you can migrate to polymer 2.0 without code changes
: hybrid pattern, elements can target 1.9+ and 2.x simultaneously
: best practice patterns
To learn best practices google has developed a number of patterns, including the PRPL (pronounced "Purple") pattern
: App toolbox to help developers create apps quickly
: tons of webcomponents available, find them at webcomponents.org
: tooling available for all web components, not just those built with polymer
- ide plugins
- polymer cli
: PRPL Pattern
: Cheese example
: Join the Polymer Community
Polymer Summit 2017 in Copenhagen this summer