We can’t send you updates from Justia Onward without your email.
Unsubscribe at any time.
Web Components are a means of creating reusable encapsulated components to push the web platform further. While Web Components are a native concept, not all browsers support it yet, and they can still be quite difficult to use. Polymer, the javascript library by Google, solves both problems, and this year at I/O Google Announced Polymer 2.0. We were there in the crowd, live blogging. #UseThePlatform
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.
Polymer is a javascript library created by Google that acts as a Polyfill for browsers that don’t yet support Web Components, and as a framework to vastly simplify the task of creating and using web components. It has gained massive popularity over time among proponents of Web Components, used by developers of sites both large and small. Within Google, Polymer is the most common imported requirement across all projects.
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.
Session Video
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
- interoperability
- 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
Push
Render
Pre-Cache
Lazy Load
polymer 2 es6 using prpl pattern backed by firebase and google's machine learning api
Share yours on Twitter with #PolymerIO
Polymer Summit 2017 in Copenhagen this summer