segment-pixel
For the best experience, try the new Microsoft Edge browser recommended by Microsoft (version 87 or above) or switch to another browser � Google Chrome / Firefox / Safari
OK
brand-elementsbrand-elementsbrand-elementsbrand-elementsbrand-elementsbrand-elements
brand-elementsbrand-elements

Component based web-applications development has, forever, been an area of interest to all software developers. As Javascript became more mature, powerful and omnipresent, this movement gathered much more momentum.

JQuery provided the first big boost to Javascript developers by simplifying access and modification of DOM elements. After that, creating reusable components was the next logical step. Several different frameworks (Bootstrap, Ext JS, jQuery User Interface etc.) tried to solve the problem, although in their own way.

Somewhere along the way, WWW consortium also came into the picture to establish standards so that major browser vendors could provide a minimum baseline of features in this arena. It is therefore, no surprise, that two of the most popular frameworks – React and Angular 2 - are being watched by the entire community of web developers. Their acceptance and percolation could drastically change the way developers build web applications.

Let’s start with a simplified form of the problem statement.

If you are building a food ordering web-site, your starting point will be “Menu” of food items available, typically displayed in a simple tabular manner as below.

List of Items - Webcomponents List of Items

 

The equivalent HTML representation would look somewhat like this:

HTML HTML

 

If this piece of code, is to be used in several places in the form of a reusable component, its eventual look and feel would depend completely on the stylesheet (CSS) surrounding it and therefore, prone to losing consistency.

Isn’t it desirable to separate the domain specific data (menu items and their prices) and presentation elements (TD,TR) ? Wouldn’t it be nicer if we could represent the raw information (as below) and somehow, something else would handle the look and feel ?

Components Components

 

That “something else” is implemented using a set of new HTML features such as “Web Components”.  Web Components (W3.org/TR/components-intro) and its accompanying technologies such as Shadow DOM, enable creation of components that can be reliably re-used without being affected by surrounding CSS.

The new code, is made up of two sub blocks. The HTML portion looks like this :

New HTML code with 2 sub-blocks New HTML code with 2 sub-blocks

 

This also needs some code in JavaScript, as below.

JavaScript JavaScript

 

Web Components standards are still being refined, as a result, applications with Web Components could lead to cross-browser issues. While latest version of Chrome browser has already implemented these features, Google’s Polymer framework (www.polymer-project.org) provides an interesting approach. It abstracts the use of Web Components in such a way that developers can use Polymer framework, and in turn, Web Components. In case underlying browsers do not support Web Components, Polymer handles it.

At this point in time, there is very strong tendency for web development to go the “component” way and, popular frameworks like Angular 2, React, Polymer etc., are becoming critical components of contemporary web development. Xoriant is already working on assignments for several clients, where, one or more of these frameworks are being used in interesting use cases.

Get Started

arrow arrow
vector_white_1
Think Tomorrow
With Xoriant
triangle triangle triangle triangle triangle
Is your digital roadmap adaptive to Generative AI, Hyper cloud, and Intelligent Automation?
Are your people optimally leveraging AI, cloud apps, and analytics to drive enterprise future states?
Which legacy challenge worries you most when accelerating digital and adopting new products?

Your Information

4 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Your Information

4 + 8 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Your Information

1 + 8 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.