Download - Introduction to Web Components
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.