Polymer.js Interview Questions and Answers

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 uses open web technologies and new web standards.
• Onboarding is much faster
• It supports shadow and shady Document Object Model (DOM).
• DOM layer is closest to the Native JavaScript layer. (It’s closest to native DOM APIs, meaning, there is no barrier for developers who already know them.)
• Connection with third party libraries is very easy. (For our project, establishing a connection between Polymer and d3js / Mathjax was very important.
• Arguably, it’s the best JavaScript library when it comes to Progressive Web Apps and lazy loading.

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.

The architecture of Polymer.js is divided into four important layers:

Native Layer: It represents the current state of browser support and implementation for the web component detail.

Foundation Layer: It consists polyfill libraries for the web component details. Polyfill is a code that implement the feature of web browser that does not support the feature.

Core Layers: It contains the Polymer library code which is found in polymer.html file.

Elements Layers: It consists of core and paper elements.

There are the different types of polymer elements:

App element: when we build entire application.

Iron element: create basic building blocks of an application.

Paper element: set of UI (User Interface) elements that implement the material design system.

Google web components: Components for google APIs and services

Gold elements: build for e commerce.

Neon element: animation-related elements.

Platinum elements: It’s like application features, like push notifications, offline caching and Bluetooth.

Molecules element: wrappers for third party libraries

Constructor: When element is created

Connected Callback: When element is added to document

Disconnected Callback: When element is removed from document

AttributeChangedCallback: When element is append, removed, changed or replaced from a document.

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:

Observers: It call back invokes specified method whenever data changes.

Computed properties: It computes the virtual properties which is based on other properties and recomputed when the input data change.

Data binding: By using of annotation we can update the properties, attributes or text content whenever data changes.

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.

<dom-module id=”host-element”>

  <template>

    <target-element target-property=”{{hostProperty}}”></target-element>

  </template>

</dom-module>

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.

It’s used for user interaction that provides better interaction for touch and mobile devices.

It specifies the event’s target in which the element can be represented in the same scope as the listening element

The polyfill is implemented using wrappers. A wrapper wraps the native DOM node in a wrapper node. The wrapper node looks and behaves identically to the native node (minus bugs and known limitations).

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:

webcomponents/webcomponents-lite.min.js

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.

It does it by taking following actions.

Observers: It invokes the callbacks whenever the data changes.

Computed Properties: It computes the virtual properties based on other properties, and re-computes them whenever the input data changes.

Data Bindings: It updates the properties, attributes, or the text content of a DOM node using annotations whenever the data changes.

Features of Polymer.js:

• Polymer is simplest way to create custom elements.
• Polymer has both One-way and Two-way data binding.
• Polymer provides polyfills for creating its own customized elements.
• Polymer has computed properties.
• Polymer provides gesture events.

Polymer pros:

• 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.
• Lack of server-side rendering.

(Wiki and Polymer docs)