introduction to web components
TRANSCRIPT
![Page 1: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/1.jpg)
Introduction to “Web Components”
Narendran Solai Sridharan
![Page 2: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/2.jpg)
HTML and Web Development
It gave rise to sharing Ideas & documents across Universities and
eventually for all.
![Page 3: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/3.jpg)
Interactive HTML
Opened Business on Internet across World Wide Web.
![Page 4: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/4.jpg)
AJAX, Dynamic HTML and JavaScript
Made HTML Document More Interactive and Less Expensive
![Page 5: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/5.jpg)
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.
![Page 6: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/7.jpg)
Responsive HTML & Bootstrap
Raise of Mobile phones let to the development of Responsive HTML &
Bootstrap CSS & JS Framework.
![Page 8: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/10.jpg)
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.
![Page 11: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/12.jpg)
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.
![Page 13: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/14.jpg)
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.
![Page 15: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/16.jpg)
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.
![Page 17: Introduction to Web Components](https://reader036.vdocuments.site/reader036/viewer/2022082907/589ddc2e1a28ab77148b5393/html5/thumbnails/17.jpg)
“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.