Approximate Read Time: 2 Minutes
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
Looking forward to learning more about Polymer and Web Components from @wmginsberg
terraform the web
A Lot of people: Comcast, USA Today, ING, Net-a-porter, BBVA, CocaCola, EA, Predix (General Electric)
Google uses polymer as the most common dependancy of ALL dependancies across their projects
native on 1b+ mobile devices
1/4 the size of Polymer 1.0
- latest platform features
- smooth migration
Polyfill for some browsers (Firefox and Edge), and simplicity in development
To learn best practices google has developed a number of patterns, including the PRPL (pronounced "Purple") pattern
- ide plugins
- polymer cli
Polymer Summit 2017 in Copenhagen this summer