PolyFill, Shim and Web Components

Pollyfill and Shim

  • In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser. It implements technology that a developer expects the browser to provide natively providing a more uniform API landscape.
  • A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.
  • A shim is a library that brings a new API to an older environment.
  • So a polyfill is a shim for a browser API. You typically check if a browser supports an API and load a polyfill if it doesn’t
  • The ultimate goal of any polyfill is to become obsolete over time. As more and more browsers start to implement the missing feature, and the number of browsers needing to be polyfilled shrinks to zero, the polyfill will gradually stop being downloaded or used altogether. This happens automatically without you having to change your site’s code later on.
  • Polyfilling is a term coined by Remy Sharp to describe an approach for backfilling missing functionality in a way that duplicates the missing API. Using this technique allows you to write application-specific code without worrying about whether or not each user’s browser implements it natively

Web Components

Web Components is a set of cutting edge standards that:

  • Make it possible to build widgets
  • Can be reused reliably

Web Components is comprised of

  1. Template Element decorators (which apply templates to CSS),
  2. Custom elements (which allow developers to create their own elements)
  3. Shadow DOM (It defines how all of the other pieces play together and shield the other three pieces from the regular DOM if necessary).

Essentially, Web Components give developers an easier way to create web sites and recyclable widgets on these sites with the help of the HTML, CSS and JavaScript they already know. Web Components help developer encapsulate they HTML, CSS and JavaScript so it doesn’t interfere with the rest of the page and the page doesn’t interfere with it.

Web Components also allow developers to more easily separate content from presentation and the Shadow DOM ensures that the styles you create for the rest of your site don’t interfere with the widgets you build using Web Components


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s