08Jun2016

Application Development: Polymer framework is a new better Web

Web and HTML as its main technology was designed more than 20 years ago. There was just the idea to publish rich format documents and reference each other in easy way. The purpose of the Web has been changed drastically several times during these years. A proposition to reinvent HTML sounds reasonable. There is a lot of hype around new Polymer project [https://www.polymer-project.org/1.0/] provided by Google. Its version 1.0 is already released and used widely. Polymer is based on Web Components technology. In practice, it’s treated as the same.

Web Components

Web Components is HTML5 standard for both extending HTML as a language and providing modularity for rich SPA solutions. A component is a sort of reusable part of the page. It contains all 3 parts of web application: HTML template based on regular tags and other components treated as children, CSS styles specific for the component and JavaScript code of this logical part of the page:

 

I’m a DOM element. This is my local DOM!

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

<template>

<style>

p {

background: #bada55;

color: red;

}

</style>

<p>I’m a DOM element. This is my local DOM!</p>

</template>

<script>

Polymer({

is: “dom-element”

});

</script>

</dom-module>

Place the reference to the component file to use it:

<link rel=”import” href=”dom-element.html”>

Then we can use the component in form of custom HTML tag:

<dom-element></dom-element>

All modern browsers and mobile platforms support Web Components.

Problems are solved by Polymer

Polymer intended to be used for responsive Web Application Development. It’s a mobile-first approach. Bootstrap or other similar frameworks use the same standard set of HTML tags to represent responsive. Polymer encapsulates complicated nested set of tags into single custom tag with settings and features as an attributes and events specific for that tag. Such approach makes Web Application Development more robust and clean.

CSS of one component is separated completely from other parts of the page. The same with JavaScript code. A component has its own scope. On the other hand, you can always use some common JavaScript modules. To have some CSS styles general for whole application, Polymer provides ability to define core styles:

<core-style id=”button”>
button {
background: #bada55;
font-size: 1.4em;
}

</core-style>

Then reference it in the components:

 

<template>

<core-style ref=”button”></core-style>

<style>

button {

color: red;

}

</style>

<button><content></content></button>

</template>

 

To speed up whole application loading we can use vulcanizer technology as build step of grunt </core-style> or gulp build tool scenario. It composes a set of SPA components into a single file loaded in production. It has out of the box obfuscation feature for CSS and JavaScript, as well.

Catalog of elements

There is a catalog of elements [https://elements.polymer-project.org/] you can use. Special category Paper Elements provides full set of responsive UI elements to build material design look and feel for the application.

Read also

Comments are closed.