Polymer.js Interview Questions and Answers

Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google’s Material Design principles.

Polymer is used by a number of Google services and websites, including the redesigned YouTube, YouTube Gaming, the redesigned Google Earth, Google I/O websites, Google Play Music, redesign of Google Sites and Allo for web.

Public development of Polymer began on Nov 14, 2013 with the release of a Promises Polyfill. This steadily expanded into a web design library covering visual styling guidelines (via Material Design), data binding, and a large number of “Core” and “Paper” Web Components. Core components were originally envisioned to encompass generic functionality that would be essential to most websites, while Paper components were intended to provide more specialized components with Material Design concepts forming a key part of their design. A major milestone was reached with the release of Version 0.5, which was considered the first version of the project ready for use by early adopters

Polymer is an open source javascript library created by Google that allows reusing the HTML elements for building applications with components. It creating reusable custom elements and using elements built by others, can make building complex web applications easier and more efficient. By being based on the Web Components API’s built in the browser (or polyfilled where needed), Polymer elements are interoperable at the browser level, and can be used with other frameworks or libraries that work with modern browsers. The aim of the Polymer project is not to create a bloated library, but instead make the smallest library possible, and make the browser do all the work. One of the advantages of using Polymer is that it has a built-in data binding model (like Angular) enabling complete applications to be made without any other libraries.

Polymer is an open-source JavaScript library. It is using web apps. Polymer gives us the ability to create our own custom elements from scratch and even reuse other elements to extend our custom ones. This is done by first creating a template of the custom element. For all intents, this template is a combination of HTML, CSS and JavaScript and includes the functionality that will be available when you use the element. It provides google material design for the UI so this can be used in building of hybrid mobile application. Through which the UI look and feel of the hybrid app will be somewhat similar to the new Android L interface (Android L and Polymer were designed using same UX principles of Material Interface).

Custom Elements: These enable developers to create their own elements that are relevant to their design as part of the DOM structure with the ability to style/script them just like any other HTML tag.

HTML Templates: These let you define fragments of markup that stay consistent across web pages with the ability to inject dynamic content using JavaScript.

HTML Imports: Similar to import one CSS file into another, these allow you to include and reuse HTML documents in other HTML documents. Chrome has a native implementation, but other browsers are looking to JavaScript ES6 modules (with a polyfill for HTML imports).

Shadow DOM: This is designed to abstract all the complexities from the markup by defining functional boundaries between the DOM tree and the subtrees hidden behind a shadow root.

In Data system, Polymer lets you observe changes to an element’s properties and take various actions based on data changes. These actions, or property effects, include: Data system actions include following properties:

A data binding connects data from a custom element (the host element) to a property or attribute of an element in its local DOM (the child or target element). The host element data can be a property or sub-property represented by a data path, or data generated based on one or more paths.

You create data bindings by adding annotations to an element’s local DOM template.

polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will. Some browsers are still in the process of updating to support the standards for Web Components. In the meantime, Polyfills simulate the missing browser capabilities as closely as possible.

In Polymer.js, event is something that happens at specific time and lead to some changes. Polymer.js provides own methods to perform events like: on-click, on-tap, on-mouse over etc. we can also create our own custom events. It is used by elements to communicate state change of DOM to parent elements.

The shadow DOM polyfill provides shadow DOM v0 functionality in browsers that don’t support it natively. See the Compatibility table for more information. The shadow DOM polyfill, though very powerful, is also fairly intrusive and can add significant performance overhead. For this reason, many Web Components-based libraries like Polymer work around having to use this polyfill and provide a lighter-weight alternative. These libraries don’t require loading the full Web Components polyfill, but instead use a “lite” version of the polyfill with shadow DOM removed:

The Custom Elements polyfill provides support for v0 of the Custom Elements spec. A polyfill for v1 is in progress at https://github.com/webcomponents/custom-elements.Custom elements polyfill handles element upgrades asynchronously. The polyfill defers upgrading elements until DOMContentsLoaded time. It does this as a performance optimization. Subsequent to the initial upgrade pass, Mutation Observers are used to discover new elements.

Polymer is a basic library that makes it faster and easier than ever before to build beautiful applications on the web.

Polymer believes in leveraging the browsers “Native” technologies rather than relying on some increasingly complex custom JavaScript libraries.

Polymer is a great tool for building modern web apps, it includes a fast binding system that keeps the UI up to date with no extra effort, and wraps web components to provide all the benefits they are designed to provide.

Polymer supports all major evergreen browsers.

Reduces the gap between developer and designer

Community support

Polymer cons:

There is an overhead of loading both Polymer and webcomponents.js and then having to go through the upgrade process of custom elements. This means the user has to wait for the app to load fully before interacting with it (although you can be clever with app framing techniques and asynchronously load parts of the UI to reduce load time).

Dependency errors and pointing to a different version of dependencies.

Downloading of entire library and Polyfills.

As time goes on and browsers implement the standard, using Polymer will provide speed enhancements as the Shadow DOM allows for efficient rendering (knowing there is no CSS leaks etc). And with HTTP 2.0 with service workers, a Polymer page will have no speed penalty.