Geeks With Blogs
Subodh Pushpak Technical musings on Win8, mobile (iOS / android / WP7) and WCF

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 -->

        <div>

            [[iconName]]

        </div>

        <div>

            <iron-icon icon="[[iconName]]"></iron-icon>

        </div>

        <div>

            Status:  [[pressed]]

        </div>

 

    </template>

    <script>

        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;

            },

        });

    </script>

</dom-module>

 

Change index.html code to

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Polymer Demo</title>

    <script src="/lib/webcomponentsjs/webcomponents.js"></script>

    <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">

    <script>

        /*

        window.Polymer = window.Polymer || {};

        window.Polymer.dom = 'shadow';

        */

    </script>

 

</head>

<body>

    Polymer Play!!! 

    <div>

        <my-component icon-name="polymer" pressed></my-component>

    </div>

    <div>

        <my-component icon-name="menu"></my-component>

    </div>

    <div>

        <my-component icon-name="settings"></my-component>

    </div>

 

</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

    <div>

        <paper-button>Flat button</paper-button>

        <paper-button raised>Raised button</paper-button>

        <paper-button noink>No ripple effect</paper-button>

        <paper-button toggles>Toggle-able button</paper-button>

        <paper-button>Say Hello</paper-button>

    </div>

 

   <link rel="import" href="lib/paper-card/paper-card.html">

 

 

 <div>

        <paper-card heading="Polymer paper card" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">

            <div class="card-content">

               This is polymer paper card. It uses the my omponent as star rating

            </div>

            <div class="cafe-rating">

                <my-component  icon-name="star" pressed></my-component>

                <my-component icon-name="star" pressed></my-component>

                <my-component icon-name="star" pressed></my-component>

                <my-component icon-name="star"></my-component>

                <my-component  icon="star"></my-component>

            </div>

            <div class="card-actions">

                <paper-button>Share</paper-button>

                <paper-button>Explore!</paper-button>

            </div>

        </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!!!

Posted on Wednesday, August 24, 2016 12:06 AM | Back to top


Comments on this post: Polymer, React and Angular using Visual studio 2015

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
Do you know that https://www.imofreedownloadforpc.com/ was developed by former Google employees also known as Harik brothers named as Ralph Harik and Georges Harik. Being a former part of Google, Harik Brothers' work will be predominantly significant as we compare with the other social messenger applications out there. IMO App for Mobile is capable of delivering messages in low bandwidths too even if signal is week. The IMO App works in microseconds and transfers data within few seconds. The video quality of IMO App is very very good and pretty much equal to any paid app out there like Skype.
Left by James Smith on Aug 24, 2016 5:55 PM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
I have been a long time reader of your Official Site and really enjoyed it. So, now are moving to new domain name, it is really exciting for me to see what new is there. Thanks for being with us. I really enjoyed it with you.
Left by Jacob Bacon on Aug 25, 2016 2:51 PM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
My choice of editor is Visual Studio, working with Polymer in it does not feel great yet though, all of my tags are getting "cannot resolve tag" (everything is working fine though) and im currently creating an empty web project and adding the polymer starter kit using yeoman and finally including the files in the project.

How are you guys getting by, are you using VS, if so how do you go about setting up your projects?

Also, best practice for combining polymer + jQuery?
Left by Bob Foster on Dec 18, 2016 3:00 PM

# Obat Herbal Kanker Prostat
Requesting Gravatar...
I'd been very encouraged to track down this website. I desired to warm regards with this special study. I certainly savored every this and I've you bookmarked to look at fresh things you publish. Obat Herbal Kanker Prostat
Left by celsea on Jan 13, 2017 11:56 AM

# Obat Herbal Kanker Payudara Stadium 4
Requesting Gravatar...
The globe will be altering fast. people are also becoming changed.day by day we are becoming more dependant on degital system.you're making me think of this really.You have a nice method of sharing your thoughts. Obat Herbal Kanker Payudara Stadium 4
Left by munir on Jan 13, 2017 11:57 AM

# Obat Herbal Kanker Paru Paru
Requesting Gravatar...
This can be really a brilliant post, many credit for telling Great luck I found out concerning this specific blog site. Obat Herbal Kanker Paru Paru
Left by jamilah on Jan 13, 2017 11:58 AM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
Hecho correctamente, SEO puede ser duradero. Con el análisis de SEO adecuado por adelantado, puede permanecer en la primera página de los resultados de búsqueda durante años, sin gastar dinero en el futuro. Incluso después de detener su trabajo de SEO, su sitio web todavía puede clasificar alto en sus palabras clave elegidas, aunque es mejor seguir con los servicios de un consultor de SEO en Tijuana Mexico o en el equipo de la casa, o corre el riesgo de perder su ranking de búsqueda.
Left by Roberto on Jan 14, 2017 12:47 AM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
Bone desires stimulus to stay healthy. Because dental implants in Mexico fuse to the bone, they prevent additional bone loss and stabilize it. Resorption is a regular and inevitable process by which bone connected to teeth or is lost when it isn't any longer supporting. This procedure cans stop and maintain the bone.
Left by Carlos on Jan 20, 2017 2:16 AM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
First of all I would like to say big thanks to the one who created this useful page of articles discussing about polymer and other helpful web component details. The things about polymer are well explained here in an easily understandable way and keep your great work!
Photo Editing
Left by Merlinjohn on Jan 23, 2017 8:18 PM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
First of all I would like to say big thanks to the one who created this useful page of articles discussing about Cinavia Message Code 3 and other helpful web component details. The things about polymer are well explained here in an easily understandable way and keep your great work!
Left by Larry Jones on Feb 12, 2017 1:44 PM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
Extremely interesting applications you demonstrated. Such detailed elaborate information too. Thank you for such a thorough explanation which was easy to follow and understand.

J Fife
working-cinavia-ps3-fix-resources.weebly.com
Left by John Fife on Feb 21, 2017 2:25 PM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
I have tried this exercise, and when I run the application I am not seeing my-component sections, just Polymer Play!! appears on top. No errors, it seems like the steps worked - bower downloaded as expected. Added my-component.html and changed index as instructed. Is there any configuration to enable Polymer.
The link for the source code does not work, please verify.
Left by Raj J on Feb 23, 2017 9:19 PM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
Quote: "Extremely interesting applications you demonstrated. Such detailed elaborate information too. Thank you for such a thorough explanation which was easy to follow and understand."

It is very detailed, John, that's for sure. Geeks with Blogs always provides elaborate information and explains it down to the bones.

Tycoon Gold Addon Review
Left by Mark Taylor on Feb 27, 2017 2:45 AM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
This is great, That's a great website, it really is what I was looking for, thank you for sharing!
gmail sign in
Left by vicki padila on Mar 02, 2017 7:42 AM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
The gastric sleeve surgery in tijuana mexico has the highest success rate, and is less invasive, as it is an arthroscopic surgery. The feelings of hunger are greatly reduced, as is the volume of food that can be consumed. Also the metabolism remains high, so that the patient burns calories at a higher rate.
Left by NeterMedia on May 03, 2017 7:08 AM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
Now you need to follow the below given official link which will take you to the page where app Shareit Download For PC is given with complete guide.
Left by Vikas Kumar on Jul 02, 2017 2:25 PM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
IMO for PC is the latest emerging video calling and chatting app, which will be the best competitor to the social media giant Whatsapp, Facebook, IMO Free Download, Hike, Wechat, etc.
Left by Vikas Kumar on Jul 04, 2017 2:22 PM

# re: Polymer, React and Angular using Visual studio 2015
Requesting Gravatar...
Here is the quick guide to install the Mobdro apk for Android phone using this link http://mobdrodownloadapp.net/mobdro-apk once download the app and install using the unknown sources.
Left by karthik on Sep 07, 2017 8:40 PM

Your comment:
 (will show your gravatar)


Copyright © subodhnpushpak | Powered by: GeeksWithBlogs.net