Introduction to “Web Components”

Narendran Solai Sridharan

HTML and Web Development

It gave rise to sharing Ideas & documents across Universities and

eventually for all.

Interactive HTML

Opened Business on Internet across World Wide Web.

AJAX, Dynamic HTML and JavaScript

Made HTML Document More Interactive and Less Expensive

Non Destructive Java Scripting and Jquery

Made Manipulation of HTML DOM easy and to work without any flaws during DOM Load

with “Cross Browser Support” for various Browsers.

Jquery Toolkits, DoJo Toolkit,YUI Toolkit, GWT Toolkit, EXT JS

The Raise of Toolkits with built in reusable Widgets increased productivity of “Web

Application” Development for all browsers

Responsive HTML & Bootstrap

Raise of Mobile phones let to the development of Responsive HTML &

Bootstrap CSS & JS Framework.

SPA, REST API, JSON & JS Frameworks (Prototype, Ext, Angular, Backbone,

Ember, React, Knockout)Single Page Applications (SPA), JavaScript Frameworks reconsidered development of Web Application in a maintainable way. They Introduced,1. Templating2. Two Way Binding3. Routing for AJAX calls & History Management4. MVC Support - Modularity with Componentization.5. Dependency Injection6. Scoping of properties & behaviors of Components

HTML 5 StandardHTML 5 Standard New Tags,1. Considered Common structure of Business Application,

most common UI Elemental Structures 2. Considered Mobile Platform, Offline Storage, Geo

Location Detection and Advanced Multimedia

What is NEXT?

Despite Web Application Developers remain Happy stating “Enough is Enough”.

We have Too MUCH of same principles present in different JS Frameworks.

Problems are wonderful opportunities for Innovation

HTML 5 tried addressing few frequently used and redundant work.

Now Again there is a redundancy depicted by various JS Frameworks

Web Components

• It is a W3C Standard similar to HTML 5• It will be implemented by All Browsers sooner or later• Few principles followed in various JS Frameworks like Scoping,

Routing, Templating will be provided with First Class Support in the Browser itself.

• It will help to reuse components Across Applications rather than reusing components only within one Application.

Web Components – Shadow DOM

1. A First Class Support for Scoping.2. Now only one DOM is in one HTML, With Web

Components we can have one Parent DOM and many DOM modules/Shadow DOMs each having their own Scope

3. It is essential for Templating & Custom Tag Creation

Web Components – Templates

1. Supports Templates or Widget Creation, which can be reused.

2. If same Template is used in 2 different Application, Browser will reuse it without loading it for each Application.

Web Components – Custom Elements

Extends HTML Tags1. It is understood despite we could add thousands of Tags to Standard HTML

tags, still Custom Tags will be required.2. Loading & Unloading JS frameworks Creating Custom Tags with Templates for

each Application is Redundant.3. Despite HTML 5 considered Offline Storage, each Application can have

different version of same framework and framework always not only just has features only required by the application.

4. Web Components Standard Considered Supporting “Extension of HTML Tags” and allow Templating to create Custom Tags

Web Components – HTML Imports

1. Supports Reusing already loaded HTML Document2. It Increases Modularity and maintenance of various

Components.3. With First Class Support for Custom Elements &

Templates, it becomes essential.

“Web Component as NEW STANDARD”

• Will make most of the work done by JS Framework redundant & unnecessary.• It will take years for all the browser to support this standard so don’t fear if you

are working on some JS frameworks• JS Frameworks also will start supporting Web Components.• Currently only “Google Polymer”, “Mozilla X-Tag” has First Class Support for Web

Components.• Visit - http://webcomponents.org/ for more info.