Polymer Javascript

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056 Volume: 05 Issue: 06 | June-2018 www.irjet.net p-ISSN: 2395-0072

Polymer JavaScript

Shabnam Shaikh1, Lavina Jadhav2

1Student, Dept. of Institute of Computer Science, MET College, Maharashtra, India 2Professor, Dept. of Institute of Computer Science, MET College, Maharashtra, India ------***------Abstract - The library is designed to make it faster for application via web components. Polymer benefits users and developers to create reusable components for the modern web businesses. Due to the ease-of-use web components offer, developers can increase their productivity while building applications. It is used to develop web applications using applications that boast better support and increased HTML web components. Polymer library used for established a longevity. set of W3C standards and it is compatible with browser APIs which define our own custom HTML elements. Using polyfills 1.2 Features of Polymer JS: (it is a piece of code that provides the technology that developer expects the browser to provide natively) and sugar,  It helps to create distributed custom elements we can create our own custom elements and this features can across the network that can be used by users. be used in modern browsers today. The Polymer JS library is  The Polymer provides One-way and Two-way data binding. used by a number of Google services and websites, Gaming,  It has polyfills for creating own customized faster web applications (depending on requirements) etc. This elements. can be designed with different paper or core elements (Google  It provides gesture events as well as computed material design, Vaadin elements etc.) properties.  It is used to create custom HTML elements because Key Words: Features, Architecture, Custom this library is built on top of web standards API. Elements, Events, Data System, Comparisons  Using Polymer, a creation of hybrid mobile application is easy. 1. INTRODUCTION  It distributes custom elements across network that can be used by users.

 It provides the polyfills by this we can create our Polymer is an open source JavaScript library which is own customized elements. developed by Google. It was released on May 27, 2015, and  It has command line interface (Polymer CLI) that 1.7.0 is a stable release that was done on September 29, helps to manage the project from simple to 2017.Polymer gives different web standards (E.g. web complicated application. components, CSS variables) which don’t have wide browser support yet but it’s being implemented by every major  It provides cross-browser compatibility for the browser in future which helps to run applications natively in application. the browsers very fast. Using Polymer we can create our own custom elements from scratch and reuse other elements to 1.3 Use of Polymer JS: extend our custom ones. For this, we have to create our own template of the custom element. The template is a  Polymer uses open web technologies and new web combination of HTML, CSS, and JavaScript which includes the standards. functionality that will be available when we are going to use  Polymer supports shadow and shady Document that element. The Polymer also provides Google material Object Model (DOM). design for the UI so this can use in the building of hybrid  The Polymer DOM layer is closest to the Native mobile application. JavaScript layer. (It’s closest to native DOM APIs, meaning, there is no barrier for developers who already know them.) 1.1 Definition of Polymer.js  Onboarding is much faster.  Connection with third party libraries is very easy. A Polymer is a library which provides a thin sugar layer to  It’s the best JavaScript library when it comes use the web-components specs called polyfills. And also to progressive web apps and lazy loading. polymer provides its own set of elements created using webcomponents specs which are helpful in creating your own 1.4 Need of Polymer JS: customized, reusable elements.  Big single page applications. Polymer, or the Polymer project, is the first library that gives developers the necessary tools and definitions to build an

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056 Volume: 05 Issue: 06 | June-2018 www.irjet.net p-ISSN: 2395-0072

 Completed projects where communication is 2.1 Web-Component: required between parent – child component and  Custom Elements – These are APIs enable child – parent component. developers to create their own HTML elements that  Applications with many different widgets & are relevant to their design as part of the DOM components. structure with the ability to style/script them just  Your application should support shadow DOM. like any other HTML tag.  Your application should contain different third  HTML Templates – We can define fragments of party libraries. Mark-up within tag which stay consistent across  Keyboard accessibility. web pages with the ability to inject dynamic content using JavaScript. 2. Architecture of Polymer JS:  Shadow DOM – This provides encapsulation of JavaScript, CSS, and templates so that your web The architecture of Polymer.js is divided into four component code remains modular and separated important layers: from the rest of the DOM.  HTML Imports – Used for to import one CSS file into Native Layer- It represents the current state of major another which allows including and reusing HTML browser support as well as implementation for the web documents in other HTML documents. component detail.

Foundation Layer- It consists polyfills libraries for the web component details. Polyfills is a code that implements the feature of web browser that does not support the feature.

Applications Pica

Polymer Elements Polymer UI Elements

Polymer Elements

Core Polymer.js

Platform.js

Foundation Mutation Pointer Shadow Custom HTML MDV Web Observers Events DOM Imports Animatio Elements n

Native

Fig -1: Architecture of Polymer JS

Core Layers- It contains necessary infrastructure for Polymer and the Polymer library code which is found in the polymer.html file.

Elements Layers- It consists of a basic set of elements which treated as building blocks that can help us to create our application.

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056 Volume: 05 Issue: 06 | June-2018 www.irjet.net p-ISSN: 2395-0072

2.2 Polymer JS Elements: examples. There is only “guidance” on how to use them in demo code. In some cases we have to refer the source code of  App elements: it’s used when we have to build a Polymer Element to understand how it works and can use entire application. in our applications.

 Iron elements: It is used for create basic building 2. Browser supports: blocks for application.  Paper elements: It consists with set of UI (User All browser vendors are working on web components Interface) elements that implement Google ‘material supports (Native support).If time is limited and your development team hasn’t have experience with web Design guidelines. components then there is no use of polymer.

 Gold elements: It is used to implement e- 3. Dependency errors and version: commerce-specific use cases.

 Neon elements: it is used to implement animated Even if we install any bower component (Polymer.js transitions which are related to Polymer elements. elements) as required in project, we might find dependency error, pointing to different version dependencies in the same  Molecules elements: It used to connect a group of element. These kinds of problems can make development plugins to the Polymer application. quite challenging.  Google web components: These components are used for Google's API and Service collection. 4. Inadequate or confusing error reporting:

 Platinum elements: This element is like Sometimes when you misspell an attribute name, or just application features which are used for push break something related to the core layer itself, we receive a notifications, offline caching and Bluetooth. strange error message on console with error stacks that we need to investigate and try determine where the problem is. 2.2 Polymer JS Custom Elements: Sometimes it’s easy to solve this, but sometimes you end up needing to try a completely different strategy just to avoid Those elements provide a component model for the web the error since you can’t track down its source. documents and web applications. Syntax: 5. Downloading entire library and polyfills: class MyElement extends HTMLElement { // code There is an overhead of loading both polymer and }; webcomponents.js and then having to go through the //link the new class with an our element name upgrade process of custom elements. This means user has to window.customElements.define ('myElement', MyElement); wait for the app to load fully before interacting with it.

Life Cycle of Custom elements: 6. Lack of server side rendering: The set of custom element reactions that allows to changes in elements lifecycle. As time goes on and browsers implement the standard, using Polymer will provide speed enhancements as the Table -1: Shadow DOM allows for efficient rendering (knowing there are no CSS leaks etc.). And with HTTP 2.0 with service workers, a Polymer page will have no speed penalty. It’s not Reaction Description Constructor It is called when element is upgraded. clear how to organize in larger applications. Connected Callback It is called when element is added to a document. 2.4 Events of Polymer JS: Disconnected It is called when element is removed to a Callback document. Event is something that happens at specific time and lead to AttributeChangedCa It is called when element is change, some changes. Polymer.js provides own methods to perform llback append, remove or replace. events like: on-click, on-tap, on-mouse over etc. we can also create our own custom events. 2.3 Disadvantages of Polymer JS: It also provides listener objects that can be used to bind 1. Lack of documentation and guidance: events to execute functions. For E.g.: Not all Polymer.js UI and non-UI Elements are documented. Some web components don’t have good documentation and submit() { } } customElements.define(my-event.is, my-event); 3. Comparisons: Table -2

2.5 Data System: Polymer JS Angular JS It is a library which is used for It is a complete In Data system, polymer.js allows us to observe changes on creating Web Components to framework for an element's properties by taking different actions. build web apps. building web apps. It doesn’t provide services, Angular has high- Data system actions include following properties: routing etc. except as separate level APIs like web components from their services,routing,se Observers: It invokes specified method whenever data core library. Polymer focuses rver changes. on allowing creating rich, communication et Computed properties: It computes the virtual properties powerful, reusable web c. which is based on other properties and recomputed when components, which used to the input data change. build web apps. Data binding: By using of annotation we can update the Polymer (more Angular element properties, attributes or text content whenever data specifically Shadow DOM) has directives changes. provides the ability to compose which A data binding connects data from a custom element (the encapsulated JS, CSS, and HTML implemented host element) to a property or attribute of an element in its as custom elements. without the use of local DOM (the child or target element). The host element the Web data can be a property or sub-property represented by a Components data path, or data generated based on one or more paths. APIs.Angular directives doesn’t For e.g.: have such encapsulation //import statements functionality. Angular compose Polymer Web Components Angular directives Polymer team suggests usage of Angular has in- Size: The size of minified Size : Crisper tool for content built features for Polymer is 127KB. It also The size of security. content security requires a polyfill called minified Angular and XSS webcomponents.js for package is 566K.It protection. browsers where web consists with Angular has in- components are not natively observable pattern built route guards, supported. Size of provided by Rxjs which can help in webcomponents-lite.js is 41 KB library. Size of implementing Angular 2 with application Rxjs library is security. 766K Native script Support: Native script Supports components and Supports There is no known support for Support: reuse: components and Polymer components in It is a framework Polymer components can reuse : Nativescript framework. for building native ideally be re-used in any web Angular iOS and Android application. Non-polymer components can app using application would need to be used only in javascript. import polymer library to be Angular Components can able to reuse polymer applications be used with components. Nativescript Structure of Code: Structure of code : framework. Polymer facilitates only It is a framework. component creation. There are It provides the few components which can be way to structure Table -3 used for routing. the application. It comes with built- Polymer JS React JS in application Polymer has a better template React has a better routing, state engine than React. template engine management and than Angular but data not polymer. communication. Polymer has a large set of React has Automated Tests: Automated Tests: helpful behaviors.This sets of complexities not Polymer’s Web Component Both unit and e2e the behaviors very helpful for beneficial for the Tester is an end-to-end testing test cases can be developers to reduce the developers or environment built by the written and development time. product owners. For Polymer team. executed using example, it doesn’t jasmine and have cleared a protractor. definition between Learning: Learning: Factory and Service. Polymer components usually Typescript is a When the concepts written in ES5 / ES6 JavaScript. new language and are not clear, this is Developers will have to get Angular supports a painful for the

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056 Volume: 05 Issue: 06 | June-2018 www.irjet.net p-ISSN: 2395-0072

development team license. and critical for the Polymer follows web React has own application and component architecture. component deadlines. architecture. Styling Mixin declaration To reuse the component we By Loading the Polymer supports: and CSS variables have to do HTML import. JavaScript module  Mixin declaration these features are we can reused the (Custom CSS mixin) not supported from component.  CSS variables React. No compilation and pre- For compilation Working with Native Data binding is not a processing are required in code should be JavaScript Objects Is Much problem for React, Polymer JS. transpiled since it Easier but the story is uses JSP syntax. The polymer DOM layer is different for DOM Polymer JS is not fully It is completely closest to the DOM API layer. manipulation and supported to server-side supported to server- Example element selection. rendering and limited to side rendering. with querySelectorAll() : Syntax: prerendering. It Returns a list of the var mynodes = Polymer JS library is set of For standard elements within the Polymer.dom(eleme basic components and distribution react document (using DFS pre- nt).getEffectiveChild material design elements consists with only order traversal of the Nodes(); involved in standard library not document’s nodes) that match distribution. components. the specified group of Polymer catalog is central NPM is central selectors. The object returned registry of components. registry of is a NodeList. components. var mynodes = Polymer.dom(element).query 4. CONCLUSIONS SelectorAll(‘my-element’); Onboarding React don’t have a Polymer technology which is not well suited to development Polymer documentation has a developer cast. of a large, enterprise level, production-ready application. better structure and examples Additionally, there isn’t many guidance or tutorials available than React. specific to Polymer.js web development. Polycasts Web Shows – Google Developers is a great As far as whether the JavaScript-centric or DOM-centric developer show. approach is really absolutely better. Choosing between one Connecting with Third Party In react, There is over the other technologies has a lot to do with the unique Libraries Is Very Easy : middleware to requirement of your project. If our application has a lot of Polymer doesn’t have an extra communicate to dynamic content changing within the view or pages, like the layer and sharing data third party libraries. gallery of photos on your Instagram then react is the most between components. prefer. If we don’t have time to learn React, those JSX files The Best JavaScript Library If application has a have feeling uncomfortable, or want to be ready for the When It Comes to Progressive lot of dynamic WC3’s latest web standards, it might be easier and faster to Web Apps and Lazy Loading. content changing quickly setup simple website using Polymer. within the view, like the gallery of photos REFERENCES on your Instagram feed, React library is [1] “Hashnode” Jounals most preferable. Polymer provides Very Large React have a lot of [2] Tutorials Example of Polymer Set of Custom Elements for third-party libraries [3] “Dotjs file” blogs Free. like widgets but when we talk about [4] “Polymer Project” org website the data grids, custom input [5] “binpress” blog elements, uploaders, [6] https://mentormate.com/blog/polymer-vs-angular- icons, etc. in many future-web-apps/ cases these widgets are not free or don’t have a commercial