SlideShare a Scribd company logo
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

Recommended for you

Java Script from Browser to Server
Java Script from Browser to ServerJava Script from Browser to Server
Java Script from Browser to Server

This document provides an overview of Jaggery, an open source JavaScript web application framework that allows developers to use JavaScript on both the front-end and back-end. Jaggery uses Rhino to execute JavaScript and handle requests through Java servlets. It provides features like accessing Java APIs from JavaScript, connecting to databases, invoking web services, and integrating with the WSO2 Carbon platform. The presentation then demonstrates building a sample web application using Jaggery.

 
by WSO2
wso2 webinars
[JogjaJS] Single Page Application nganggo Angular.js
[JogjaJS] Single Page Application nganggo Angular.js [JogjaJS] Single Page Application nganggo Angular.js
[JogjaJS] Single Page Application nganggo Angular.js

This document provides an introduction and overview of AngularJS, a JavaScript framework for building single page applications. It discusses the main concepts of AngularJS including two-way data binding, directives, expressions, models, views/templates, controllers, and filters. It also provides brief histories of JavaScript and AngularJS, reasons for choosing AngularJS, and instructions for getting started with AngularJS.

javascriptangularsingle page application
Edugeeklogontracker
EdugeeklogontrackerEdugeeklogontracker
Edugeeklogontracker

EduGeek Logon Tracker is a next generation user tracking software that improves upon previous solutions. It limits concurrent logins to one user account, stores tracking data in an SQL database for reporting and searching through a web interface, and allows real-time login tracking. It is easy to deploy by adding scripts to a GPO and dragging folders to IIS, and supports Windows 7, Server 2008 and newer operating systems.

egc2010edugeek
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. Templating
2. Two Way Binding
3. Routing for AJAX calls & History Management
4. MVC Support - Modularity with Componentization.
5. Dependency Injection
6. Scoping of properties & behaviors of Components

Recommended for you

Pros of angular js
Pros of angular jsPros of angular js
Pros of angular js

Angular JS provides several key pros for developers including two-way data binding that automatically updates the view and model with any changes, easy DOM manipulation through two-way data binding that saves developer time, faster app prototyping through quick initialization and obtaining feedback without annoyance, and responsive web applications that automatically adapt to different systems with fast loading and smooth navigation.

angularjshire angularjs developerweb design and development
Kendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.euKendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.eu

High level overview of the Kendo UI framework and upcoming plans. See http://kendoui.com for current status and http://demos.kendoui.com for online demos.

kendouicomponent frameworkshtml5
Java script
Java scriptJava script
Java script

What are JavaScript and how to apply validations in JavaScript and the different types of Javascript available and use them.

jsjavascriptvalidation
HTML 5 Standard
HTML 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.

Recommended for you

Kendo ui web
Kendo ui webKendo ui web
Kendo ui web

Lohith G N is a Developer Evangelist at Telerik India and a Microsoft MVP for ASP.NET/IIS. He leads the Bangalore Dot Net user group and his agenda includes introducing Kendo UI, discussing single page applications and hybrid apps, and building apps with Kendo UI. Kendo UI is a framework from Telerik that includes everything needed to build HTML5 and JavaScript sites and apps, including UI widgets, MVVM framework, data source, templates, and themes.

kendokendo uiwidgets
Word press
Word pressWord press
Word press

WordPress is an open-source content management system (CMS) often used for blogging. It has many features including a plugin architecture, templating system, and widgets that can be rearranged without editing code. WordPress was first released in 2003 and as of 2009 was being used by over 200 million websites worldwide. It allows for customization through themes and supports multiple categories and tags for posts.

Word press
Word pressWord press
Word press

WordPress is an open-source content management system (CMS) often used for blogging. It has many features including a plugin architecture, templating system, and widgets that can be rearranged without editing code. WordPress was first released in 2003 and as of 2009 was being used by over 200 million websites worldwide. It allows for customization through themes and supports multiple categories and tags for posts.

wordpress
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 Tags
1. 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 Document
2. It Increases Modularity and maintenance of
various Components.
3. With First Class Support for Custom Elements &
Templates, it becomes essential.

Recommended for you

Jquery mobile book review
Jquery mobile book reviewJquery mobile book review
Jquery mobile book review

Why jQuery Mobile is a better choice compared to other frameworks: 1. Create and style pages and dialogs 2. Use toolbars, theme en enhance them 3. and much more!

jquery mobilebook reviewjquery
JQuery mobile
JQuery mobileJQuery mobile
JQuery mobile

jQuery Mobile is a JavaScript framework that makes it easier to develop mobile web sites and apps. It allows developers to use standard HTML and CSS to build interfaces that work across various mobile device platforms. Some key features include automatically adapting layouts for different screens, supporting touch and mouse events, and providing common mobile widgets like sliders and flip switches. Navigation between pages is handled using internal links, and jQuery Mobile can fetch and integrate external pages using AJAX to provide a native-like experience.

jquery mobile;jquery
Building uis.with-react
Building uis.with-reactBuilding uis.with-react
Building uis.with-react

This document discusses building user interfaces with React, an open-source JavaScript library for building user interfaces and web applications. React aims to be simple and declarative by using components to break down user interfaces and compose complex UIs from them. Components manage their own state and lifecycles without direct parent interactions. React uses a virtual DOM for efficient updates and handles events through delegation and autobinding. The document provides links to React documentation, tools, and additional resources for contributors and watchers.

reactjsreactuser-interface
“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.

More Related Content

What's hot

Introducing Kendo UI
Introducing Kendo UIIntroducing Kendo UI
Introducing Kendo UI
John Bristowe
 
Exercise: Building Node-webkit apps
Exercise: Building Node-webkit appsExercise: Building Node-webkit apps
Exercise: Building Node-webkit apps
Evgenios Skitsanos
 
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Katy Slemon
 
Java Script from Browser to Server
Java Script from Browser to ServerJava Script from Browser to Server
Java Script from Browser to Server
WSO2
 
[JogjaJS] Single Page Application nganggo Angular.js
[JogjaJS] Single Page Application nganggo Angular.js [JogjaJS] Single Page Application nganggo Angular.js
[JogjaJS] Single Page Application nganggo Angular.js
Yanuar W
 
Edugeeklogontracker
EdugeeklogontrackerEdugeeklogontracker
Edugeeklogontracker
EduGeek.net
 
Pros of angular js
Pros of angular jsPros of angular js
Pros of angular js
ElenorWisozk
 
Kendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.euKendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.eu
Alexander Gyoshev
 
Java script
Java scriptJava script
Java script
Anuj Singh Rajput
 
Kendo ui web
Kendo ui webKendo ui web
Word press
Word pressWord press
Word press
gayath3
 
Word press
Word pressWord press
Word press
sundar raj
 
Jquery mobile book review
Jquery mobile book reviewJquery mobile book review
Jquery mobile book review
Islam AlZatary
 
JQuery mobile
JQuery mobileJQuery mobile
JQuery mobile
Gary Yeh
 
Building uis.with-react
Building uis.with-reactBuilding uis.with-react
Building uis.with-react
JakeRios
 
Lesson 09
Lesson 09Lesson 09
Lesson 09
Gene Babon
 
Web components: the future has come
Web components: the future has comeWeb components: the future has come
Web components: the future has come
Andrea Chiarelli
 
coursera-full-stack-web-development-specialization
coursera-full-stack-web-development-specializationcoursera-full-stack-web-development-specialization
coursera-full-stack-web-development-specialization
Madrisan Davide
 
Introduction to yzs code generator
Introduction to yzs code generatorIntroduction to yzs code generator
Introduction to yzs code generator
YZSolution, Inc.
 
What is jQuery?
What is jQuery?What is jQuery?
What is jQuery?
tina3reese7
 

What's hot (20)

Introducing Kendo UI
Introducing Kendo UIIntroducing Kendo UI
Introducing Kendo UI
 
Exercise: Building Node-webkit apps
Exercise: Building Node-webkit appsExercise: Building Node-webkit apps
Exercise: Building Node-webkit apps
 
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
 
Java Script from Browser to Server
Java Script from Browser to ServerJava Script from Browser to Server
Java Script from Browser to Server
 
[JogjaJS] Single Page Application nganggo Angular.js
[JogjaJS] Single Page Application nganggo Angular.js [JogjaJS] Single Page Application nganggo Angular.js
[JogjaJS] Single Page Application nganggo Angular.js
 
Edugeeklogontracker
EdugeeklogontrackerEdugeeklogontracker
Edugeeklogontracker
 
Pros of angular js
Pros of angular jsPros of angular js
Pros of angular js
 
Kendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.euKendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.eu
 
Java script
Java scriptJava script
Java script
 
Kendo ui web
Kendo ui webKendo ui web
Kendo ui web
 
Word press
Word pressWord press
Word press
 
Word press
Word pressWord press
Word press
 
Jquery mobile book review
Jquery mobile book reviewJquery mobile book review
Jquery mobile book review
 
JQuery mobile
JQuery mobileJQuery mobile
JQuery mobile
 
Building uis.with-react
Building uis.with-reactBuilding uis.with-react
Building uis.with-react
 
Lesson 09
Lesson 09Lesson 09
Lesson 09
 
Web components: the future has come
Web components: the future has comeWeb components: the future has come
Web components: the future has come
 
coursera-full-stack-web-development-specialization
coursera-full-stack-web-development-specializationcoursera-full-stack-web-development-specialization
coursera-full-stack-web-development-specialization
 
Introduction to yzs code generator
Introduction to yzs code generatorIntroduction to yzs code generator
Introduction to yzs code generator
 
What is jQuery?
What is jQuery?What is jQuery?
What is jQuery?
 

Viewers also liked

The vampire diaries
The vampire diariesThe vampire diaries
The vampire diaries
Maria Silva
 
PP FRP Scrubber
PP FRP ScrubberPP FRP Scrubber
PP FRP Scrubber
Hindustan Fibre Tech
 
куденееву о школе
куденееву о школекуденееву о школе
куденееву о школе
Ilya Ponomarev
 
Folleto promocional torre águila
Folleto promocional torre águilaFolleto promocional torre águila
Folleto promocional torre águila
magdanacarino
 
Dictat peix irisat 1
Dictat peix irisat 1Dictat peix irisat 1
Dictat peix irisat 1
evacanals73
 
Valuacion eqp.
Valuacion eqp.Valuacion eqp.
Valuacion eqp.
edd Apellidos
 
EDUCAÇÃO TEOLÓGICA - Como será o amanhã?
EDUCAÇÃO TEOLÓGICA - Como será o amanhã?EDUCAÇÃO TEOLÓGICA - Como será o amanhã?
EDUCAÇÃO TEOLÓGICA - Como será o amanhã?
Francisco A Salerno Neto
 
Thanks Letter (Abdullah Almughrabi)
Thanks Letter (Abdullah Almughrabi)Thanks Letter (Abdullah Almughrabi)
Thanks Letter (Abdullah Almughrabi)
abodmone
 
Huaewi Certificate
Huaewi CertificateHuaewi Certificate
Huaewi Certificate
naseerzain
 
Politica de Alianzas de UPyD
Politica de Alianzas de UPyDPolitica de Alianzas de UPyD
Politica de Alianzas de UPyD
Upyd Fuenlabrada
 
jadwal teknik fisika its ganjil
jadwal teknik fisika its ganjiljadwal teknik fisika its ganjil
jadwal teknik fisika its ganjil
nurmagupita
 
Internet
InternetInternet
Internet
iwnyk
 
Registro auxiliar de evaluación secundaria
Registro auxiliar de evaluación secundariaRegistro auxiliar de evaluación secundaria
Registro auxiliar de evaluación secundaria
Elizabeth Talledo
 
《蓮花海》(11) 法之寶藏-輪王七寶-敦珠佛學會
《蓮花海》(11) 法之寶藏-輪王七寶-敦珠佛學會《蓮花海》(11) 法之寶藏-輪王七寶-敦珠佛學會
《蓮花海》(11) 法之寶藏-輪王七寶-敦珠佛學會
DudjomBuddhistAssociation
 
Ponte sobre o Rio Negro
Ponte sobre o Rio NegroPonte sobre o Rio Negro
Ponte sobre o Rio Negro
Francisco A Salerno Neto
 
J alternative ongoing2 model1
J alternative ongoing2 model1J alternative ongoing2 model1
J alternative ongoing2 model1
Prinsit Brahmasakha
 
Anemia meganoblastica
Anemia meganoblasticaAnemia meganoblastica
Anemia meganoblastica
samuel martelo
 

Viewers also liked (20)

The vampire diaries
The vampire diariesThe vampire diaries
The vampire diaries
 
PP FRP Scrubber
PP FRP ScrubberPP FRP Scrubber
PP FRP Scrubber
 
куденееву о школе
куденееву о школекуденееву о школе
куденееву о школе
 
Folleto promocional torre águila
Folleto promocional torre águilaFolleto promocional torre águila
Folleto promocional torre águila
 
Dictat peix irisat 1
Dictat peix irisat 1Dictat peix irisat 1
Dictat peix irisat 1
 
Valuacion eqp.
Valuacion eqp.Valuacion eqp.
Valuacion eqp.
 
EDUCAÇÃO TEOLÓGICA - Como será o amanhã?
EDUCAÇÃO TEOLÓGICA - Como será o amanhã?EDUCAÇÃO TEOLÓGICA - Como será o amanhã?
EDUCAÇÃO TEOLÓGICA - Como será o amanhã?
 
Thanks Letter (Abdullah Almughrabi)
Thanks Letter (Abdullah Almughrabi)Thanks Letter (Abdullah Almughrabi)
Thanks Letter (Abdullah Almughrabi)
 
Huaewi Certificate
Huaewi CertificateHuaewi Certificate
Huaewi Certificate
 
7
77
7
 
Politica de Alianzas de UPyD
Politica de Alianzas de UPyDPolitica de Alianzas de UPyD
Politica de Alianzas de UPyD
 
jadwal teknik fisika its ganjil
jadwal teknik fisika its ganjiljadwal teknik fisika its ganjil
jadwal teknik fisika its ganjil
 
Internet
InternetInternet
Internet
 
Registro auxiliar de evaluación secundaria
Registro auxiliar de evaluación secundariaRegistro auxiliar de evaluación secundaria
Registro auxiliar de evaluación secundaria
 
Carnestoltes 2014
Carnestoltes 2014Carnestoltes 2014
Carnestoltes 2014
 
《蓮花海》(11) 法之寶藏-輪王七寶-敦珠佛學會
《蓮花海》(11) 法之寶藏-輪王七寶-敦珠佛學會《蓮花海》(11) 法之寶藏-輪王七寶-敦珠佛學會
《蓮花海》(11) 法之寶藏-輪王七寶-敦珠佛學會
 
Ponte sobre o Rio Negro
Ponte sobre o Rio NegroPonte sobre o Rio Negro
Ponte sobre o Rio Negro
 
J alternative ongoing2 model1
J alternative ongoing2 model1J alternative ongoing2 model1
J alternative ongoing2 model1
 
10
1010
10
 
Anemia meganoblastica
Anemia meganoblasticaAnemia meganoblastica
Anemia meganoblastica
 

Similar to Introduction to Web Components

Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
Omkarsoft Bangalore
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.js
Pragnesh Vaghela
 
IRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET- Polymer Javascript
IRJET- Polymer Javascript
IRJET Journal
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
Sunil Yadav
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
web intership ritesh.pptx
web intership ritesh.pptxweb intership ritesh.pptx
web intership ritesh.pptx
Jenaj2
 
Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015
Codemotion
 
Meteor + Polymer
Meteor + PolymerMeteor + Polymer
Meteor + Polymer
wolf4ood
 
Building reusable components as micro frontends with glimmer js and webcompo...
Building reusable components as micro frontends  with glimmer js and webcompo...Building reusable components as micro frontends  with glimmer js and webcompo...
Building reusable components as micro frontends with glimmer js and webcompo...
Andrei Sebastian Cîmpean
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
Anil Kumar
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
RajkumarJangid7
 
AJAX vs. jQuery What Are The Differences.pdf
AJAX vs. jQuery What Are The Differences.pdfAJAX vs. jQuery What Are The Differences.pdf
AJAX vs. jQuery What Are The Differences.pdf
Laura Miller
 
Web Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User ExperienceWeb Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User Experience
ChromeInfo Technologies
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
IRJET Journal
 
Angular js workshop
Angular js workshopAngular js workshop
Angular js workshop
Rolands Krumbergs
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020
Katy Slemon
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
Vineeth N Krishnan
 
Micro frontends
Micro frontendsMicro frontends
Micro frontends
Assaf Gannon
 
Why do we use react JS on the website_.pdf
Why do we use react JS on the website_.pdfWhy do we use react JS on the website_.pdf
Why do we use react JS on the website_.pdf
nearlearn
 
Top 10 Best Web Development Technologies
Top 10 Best Web Development TechnologiesTop 10 Best Web Development Technologies
Top 10 Best Web Development Technologies
AjayMishra302670
 

Similar to Introduction to Web Components (20)

Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.js
 
IRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET- Polymer Javascript
IRJET- Polymer Javascript
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
web intership ritesh.pptx
web intership ritesh.pptxweb intership ritesh.pptx
web intership ritesh.pptx
 
Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015
 
Meteor + Polymer
Meteor + PolymerMeteor + Polymer
Meteor + Polymer
 
Building reusable components as micro frontends with glimmer js and webcompo...
Building reusable components as micro frontends  with glimmer js and webcompo...Building reusable components as micro frontends  with glimmer js and webcompo...
Building reusable components as micro frontends with glimmer js and webcompo...
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
AJAX vs. jQuery What Are The Differences.pdf
AJAX vs. jQuery What Are The Differences.pdfAJAX vs. jQuery What Are The Differences.pdf
AJAX vs. jQuery What Are The Differences.pdf
 
Web Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User ExperienceWeb Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User Experience
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
 
Angular js workshop
Angular js workshopAngular js workshop
Angular js workshop
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Micro frontends
Micro frontendsMicro frontends
Micro frontends
 
Why do we use react JS on the website_.pdf
Why do we use react JS on the website_.pdfWhy do we use react JS on the website_.pdf
Why do we use react JS on the website_.pdf
 
Top 10 Best Web Development Technologies
Top 10 Best Web Development TechnologiesTop 10 Best Web Development Technologies
Top 10 Best Web Development Technologies
 

More from Narendran Solai Sridharan

Java module configuration
Java module configurationJava module configuration
Java module configuration
Narendran Solai Sridharan
 
Test NG Framework Complete Walk Through
Test NG Framework Complete Walk ThroughTest NG Framework Complete Walk Through
Test NG Framework Complete Walk Through
Narendran Solai Sridharan
 
Thinking tools for value innovation
Thinking tools for value innovationThinking tools for value innovation
Thinking tools for value innovation
Narendran Solai Sridharan
 
Domain driven design - Part I
Domain driven design - Part IDomain driven design - Part I
Domain driven design - Part I
Narendran Solai Sridharan
 
Raspberry pi and pi4j
Raspberry pi and pi4jRaspberry pi and pi4j
Raspberry pi and pi4j
Narendran Solai Sridharan
 
Functional Programming in Java
Functional Programming in JavaFunctional Programming in Java
Functional Programming in Java
Narendran Solai Sridharan
 
Http 2
Http 2Http 2
Introduction to value types
Introduction to value typesIntroduction to value types
Introduction to value types
Narendran Solai Sridharan
 
Upfront adoption & migration of applications to latest jdk
Upfront adoption & migration of applications to latest jdkUpfront adoption & migration of applications to latest jdk
Upfront adoption & migration of applications to latest jdk
Narendran Solai Sridharan
 

More from Narendran Solai Sridharan (9)

Java module configuration
Java module configurationJava module configuration
Java module configuration
 
Test NG Framework Complete Walk Through
Test NG Framework Complete Walk ThroughTest NG Framework Complete Walk Through
Test NG Framework Complete Walk Through
 
Thinking tools for value innovation
Thinking tools for value innovationThinking tools for value innovation
Thinking tools for value innovation
 
Domain driven design - Part I
Domain driven design - Part IDomain driven design - Part I
Domain driven design - Part I
 
Raspberry pi and pi4j
Raspberry pi and pi4jRaspberry pi and pi4j
Raspberry pi and pi4j
 
Functional Programming in Java
Functional Programming in JavaFunctional Programming in Java
Functional Programming in Java
 
Http 2
Http 2Http 2
Http 2
 
Introduction to value types
Introduction to value typesIntroduction to value types
Introduction to value types
 
Upfront adoption & migration of applications to latest jdk
Upfront adoption & migration of applications to latest jdkUpfront adoption & migration of applications to latest jdk
Upfront adoption & migration of applications to latest jdk
 

Recently uploaded

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 

Recently uploaded (20)

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 

Introduction to Web Components

  • 2. HTML and Web Development It gave rise to sharing Ideas & documents across Universities and eventually for all.
  • 3. Interactive HTML Opened Business on Internet across World Wide Web.
  • 4. AJAX, Dynamic HTML and JavaScript Made HTML Document More Interactive and Less Expensive
  • 5. 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.
  • 6. 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
  • 7. Responsive HTML & Bootstrap Raise of Mobile phones let to the development of Responsive HTML & Bootstrap CSS & JS Framework.
  • 8. 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. Templating 2. Two Way Binding 3. Routing for AJAX calls & History Management 4. MVC Support - Modularity with Componentization. 5. Dependency Injection 6. Scoping of properties & behaviors of Components
  • 9. HTML 5 Standard HTML 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
  • 10. 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.
  • 11. 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
  • 12. 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.
  • 13. 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
  • 14. 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.
  • 15. Web Components – Custom Elements Extends HTML Tags 1. 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
  • 16. Web Components – HTML Imports 1. Supports Reusing already loaded HTML Document 2. It Increases Modularity and maintenance of various Components. 3. With First Class Support for Custom Elements & Templates, it becomes essential.
  • 17. “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.