Web applications are getting more demanding and complex. One way to manage complex functionalities of the application is to break the functionalities into modules. There are many JavaScript libraries which provides this Componentization at the front-end side.
With adoption of ECMAScript 6; the syntax and features for componentization of functionalities is easier than ever. There are several libraries which provides for these. ReactJs, Polymer and Angular being the major ones.
These libraries can be majorly clubbed into two categories based on approach:
- Libraries based on futuristic Web-components. Good example is Polymer
- Libraries based on own implementation of the component-based UI architecture. Good example is ReactJs
Needless to mention; each of these libraries aim is to share the same idea of componentization.
ReactJs : is the JavaScript library that allows to decompose UI into small reusable Components developed by Facebook. ReactJs allows to create isomorphic applications, meaning that components are being rendered on the server and in the browser in the same way. It’s a very important feature that influences load time, SEO and performance in general.
Polymer: is the library to create reusable web-components developed by Google.
Here is a quick start on getting your hands wet on these technologies using Visual Studio 2015 Update 3
Polymer
Polymer is about Web Components. Web components allows to describe new types of elements with their properties and methods that encapsulates their DOM and styles. Web components have 4 specifications:
- Templates : The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
- Shodow DOM : This specification describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.
- Custom elements: describes the method for enabling the author to define and use new types of DOM elements in a document.
- HTML Imports : a way to include and reuse HTML documents in other HTML documents.
Lets build a webapplication using polymer and Visual studio 2015. We will be using Bower integration with VS2015
create a new application
Select the ASP .Net 5.0 template (Preferably WEB API)
Visual Studio will create the boiler plate code from the template
Here is how the Solution will look like
Go to startup.cs and comment the lines app.UseMvc();. We are interested in serving static files.
Add a HTML file; index.html
Right click on project -> open properties and set the launch page to html page just created
Add a Bower file by selecting add new file -> client side – > bower configuration file
Add below line in bower.json file
“polymer”: “Polymer/polymer#^1.0.0”,
“iron-icon”: “PolymerElements/iron-icon#^1.0.0”,
“iron-icons”: “PolymerElements/iron-icons#^1.0.0”
By above, we are puling the library for polymer and iron icons.
The file now looks like:
If the above operation is successful, a lib folder is created in wwwroot folder.
Now lets code our first polymer webcomponent
Add a new html file; by right click on wwwroot folder and addig a new html file. Name it my-component.html.
Here is the code for my-component.html
<dom-module id=”my-component”>
<template>
<style>
/* local DOM styles go here */
:host {
display: inline-block;
}
iron-icon {
fill: rgba(0,0,0,0);
stroke: currentcolor;
}
:host([pressed]) iron-icon {
fill: currentcolor;
}
</style>
<!– local DOM goes here –>
[[iconName]]
Status: [[pressed]]
</template>
Polymer({
/* this is the element’s prototype */
is: ‘my-component’,
properties: {
iconName: String,
pressed: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true
}
},
listeners: {
‘tap’: ‘toggle’
},
toggle: function () {
this.pressed = !this.pressed;
},
});
</dom-module>
Change index.html code to
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>Polymer Demo</title>
/lib/webcomponentsjs/webcomponents.js
<link rel=”import” href=”lib/polymer/polymer.html” />
<link rel=”import” href=”lib/iron-icons/iron-icons.html”>
<link rel=”import” href=”my-component.html”>
/*
window.Polymer = window.Polymer || {};
window.Polymer.dom = ‘shadow’;
*/
</head>
<body>
Polymer Play!!!
my-component icon-name=”polymer” pressed>my-component>
</body>
</html>
Run the application:
If you are getting the above output; voila. the first webcomponent is running. Try toggling the icons by tapping on it.
Now lets use some of the pre-built elements:
You can find these at https://www.polymer-project.org/1.0/toolbox/
Polymer supports various elements; here is a brief overview:
Lets add paper elements to the Demo
Add below lines to bower.json file and save. Bower will pull down the required library
{
“name”: “ASP.NET”,
“private”: true,
“dependencies”: {
“polymer”: “Polymer/polymer#^1.0.0”,
“iron-icon”: “PolymerElements/iron-icon#^1.0.0”,
“iron-icons”: “PolymerElements/iron-icons#^1.0.0”,
“paper-button”: “PolymerElements/paper-button#^1.0.0”,
“paper-card”: “PolymerElements/paper-card#^1.0.0″
}
}
Add link at top of index.html page
<link rel=”import” href=”lib/paper-button/paper-button.html” />
<link rel=”import” href=”lib/paper-material/paper-material.html”>
Add below code in index.html page
Some paper Button with inbuilt material styles
Flat button
Raised button
No ripple effect
Toggle-able button
Say Hello
<link rel=”import” href=”lib/paper-card/paper-card.html”>
<
div>
This is polymer paper card. It uses the my omponent as star rating
Share
Explore!
</paper-card>
</div>
The output you will get is:
So the polymer app is ready. If you want the code; please download it here
In next blog we will explore React!!!
Subodh Pushpak's Blog 