Polymer, React and angular using Visual studio 2015

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:

  1. Libraries based on futuristic Web-components. Good example is Polymer
  2. 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:

  1. Templates :  The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
  2. 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.
  3. Custom elements: describes the method for enabling the author to define and use new types of DOM elements in a document.
  4. 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!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s