SlideShare a Scribd company logo
1 of 7
Web Components
The Reusable Web
Web Components enable Web application authors to
define widgets with a level of visual richness and
interactivity not possible with CSS alone, and ease of
composition and reuse not possible with script libraries
today.”
“
Lack of encapsulation leads to anger, anger
leads to hate, hate leads to...suffering
<iframe /><iframe />
HTML Templates
Shadow DOM
Custom Elements
HTML Imports
<signnow-signature api="sn-appliance.com/api">
<signed-date>1386872876149</signed-date>
<role-name>POTUS</role-name>
<signature-images>
<signature src="sn-appliance.com/sigs/barack1.jpg" />
<signature src="sn-appliance.com/sigs/barack2.jpg" selected />
</signature-images>
</signnow-signature>
The rabbit hole
webcomponentshift.com
http://www.youtube.com/watch?v=fqULJBBEVQE
html5rocks.com
polymer-project.org
css-tricks.com/modular-future-web-components

More Related Content

What's hot

Pros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppPros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppRavi Teja
 
Polymer vs other libraries (Devfest Ukraine 2015)
Polymer vs other libraries (Devfest Ukraine 2015)Polymer vs other libraries (Devfest Ukraine 2015)
Polymer vs other libraries (Devfest Ukraine 2015)jskvara
 
Building High-Performance applications with .NET 5 and Vue JS 3
Building High-Performance applications with .NET 5 and Vue JS 3Building High-Performance applications with .NET 5 and Vue JS 3
Building High-Performance applications with .NET 5 and Vue JS 3Alexandre Malavasi
 
Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR WebLiv Erickson
 
"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)Mike Brenner
 
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the BrowserScotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the BrowserLiv Erickson
 
Java Serverless Application Development using Microsoft Azure - DevJam 2021
Java Serverless Application Development using Microsoft Azure - DevJam 2021Java Serverless Application Development using Microsoft Azure - DevJam 2021
Java Serverless Application Development using Microsoft Azure - DevJam 2021shaunthomas999
 
Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web DevelopmentJonathan Snook
 
Client responsive design
Client   responsive designClient   responsive design
Client responsive designshmulik-tal
 
Jonathan Snook - Falling to pieces: the componentization of the web
Jonathan Snook - Falling to pieces: the componentization of the webJonathan Snook - Falling to pieces: the componentization of the web
Jonathan Snook - Falling to pieces: the componentization of the webTuring Fest
 
Introduction to web compoents
Introduction to web compoentsIntroduction to web compoents
Introduction to web compoentsRan Wahle
 
Introduce PlutoCMS
Introduce PlutoCMSIntroduce PlutoCMS
Introduce PlutoCMSxhan87
 
JSの知識だけでLINE Bot作ってみる! 20170327_we are_javascripters@5th
JSの知識だけでLINE Bot作ってみる! 20170327_we are_javascripters@5thJSの知識だけでLINE Bot作ってみる! 20170327_we are_javascripters@5th
JSの知識だけでLINE Bot作ってみる! 20170327_we are_javascripters@5th将一 深見
 
素晴らしきJSの世界とSEO 20170606 we are_javascripters@8th
素晴らしきJSの世界とSEO 20170606 we are_javascripters@8th素晴らしきJSの世界とSEO 20170606 we are_javascripters@8th
素晴らしきJSの世界とSEO 20170606 we are_javascripters@8th将一 深見
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
 

What's hot (19)

Killer page load performance
Killer page load performanceKiller page load performance
Killer page load performance
 
Pros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppPros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside App
 
Polymer vs other libraries (Devfest Ukraine 2015)
Polymer vs other libraries (Devfest Ukraine 2015)Polymer vs other libraries (Devfest Ukraine 2015)
Polymer vs other libraries (Devfest Ukraine 2015)
 
Building High-Performance applications with .NET 5 and Vue JS 3
Building High-Performance applications with .NET 5 and Vue JS 3Building High-Performance applications with .NET 5 and Vue JS 3
Building High-Performance applications with .NET 5 and Vue JS 3
 
Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR Web
 
"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)
 
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the BrowserScotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
 
RIAs
RIAsRIAs
RIAs
 
Java Serverless Application Development using Microsoft Azure - DevJam 2021
Java Serverless Application Development using Microsoft Azure - DevJam 2021Java Serverless Application Development using Microsoft Azure - DevJam 2021
Java Serverless Application Development using Microsoft Azure - DevJam 2021
 
Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web Development
 
Client responsive design
Client   responsive designClient   responsive design
Client responsive design
 
Jonathan Snook - Falling to pieces: the componentization of the web
Jonathan Snook - Falling to pieces: the componentization of the webJonathan Snook - Falling to pieces: the componentization of the web
Jonathan Snook - Falling to pieces: the componentization of the web
 
Mobile Web Design Code
Mobile Web Design CodeMobile Web Design Code
Mobile Web Design Code
 
Introduction to web compoents
Introduction to web compoentsIntroduction to web compoents
Introduction to web compoents
 
Introduce PlutoCMS
Introduce PlutoCMSIntroduce PlutoCMS
Introduce PlutoCMS
 
JSの知識だけでLINE Bot作ってみる! 20170327_we are_javascripters@5th
JSの知識だけでLINE Bot作ってみる! 20170327_we are_javascripters@5thJSの知識だけでLINE Bot作ってみる! 20170327_we are_javascripters@5th
JSの知識だけでLINE Bot作ってみる! 20170327_we are_javascripters@5th
 
素晴らしきJSの世界とSEO 20170606 we are_javascripters@8th
素晴らしきJSの世界とSEO 20170606 we are_javascripters@8th素晴らしきJSの世界とSEO 20170606 we are_javascripters@8th
素晴らしきJSの世界とSEO 20170606 we are_javascripters@8th
 
Angular pres
Angular presAngular pres
Angular pres
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
 

Similar to Web Components

A brave new web - A talk about Web Components
A brave new web - A talk about Web ComponentsA brave new web - A talk about Web Components
A brave new web - A talk about Web ComponentsMichiel De Mey
 
Faster Frontends
Faster FrontendsFaster Frontends
Faster FrontendsAndy Davies
 
web_components_workshop.pptx
web_components_workshop.pptxweb_components_workshop.pptx
web_components_workshop.pptxBurton Smith
 
Web Components: back to the future
Web Components: back to the futureWeb Components: back to the future
Web Components: back to the futureDA-14
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introductioncherukumilli2
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering PathRaphael Amorim
 
Polymer and web component
Polymer and web componentPolymer and web component
Polymer and web componentImam Raza
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgDr. Arif Wider
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Website performance optimisation
Website performance optimisationWebsite performance optimisation
Website performance optimisationWebstock
 
Solving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonaldSolving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonaldWey Wey Web
 
The Complementarity of React and Web Components
The Complementarity of React and Web ComponentsThe Complementarity of React and Web Components
The Complementarity of React and Web ComponentsAndrew Rota
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
Polymer
Polymer Polymer
Polymer jskvara
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pagesNilesh Bafna
 

Similar to Web Components (20)

A brave new web - A talk about Web Components
A brave new web - A talk about Web ComponentsA brave new web - A talk about Web Components
A brave new web - A talk about Web Components
 
Web components api + Vuejs
Web components api + VuejsWeb components api + Vuejs
Web components api + Vuejs
 
Faster Frontends
Faster FrontendsFaster Frontends
Faster Frontends
 
web_components_workshop.pptx
web_components_workshop.pptxweb_components_workshop.pptx
web_components_workshop.pptx
 
Web Components: back to the future
Web Components: back to the futureWeb Components: back to the future
Web Components: back to the future
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
 
Polymer and web component
Polymer and web componentPolymer and web component
Polymer and web component
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Website performance optimisation
Website performance optimisationWebsite performance optimisation
Website performance optimisation
 
Solving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonaldSolving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonald
 
Webworks
WebworksWebworks
Webworks
 
The Complementarity of React and Web Components
The Complementarity of React and Web ComponentsThe Complementarity of React and Web Components
The Complementarity of React and Web Components
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
Polymer
Polymer Polymer
Polymer
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 

More from Loc Nguyen

How to get started with freelancing
How to get started with freelancingHow to get started with freelancing
How to get started with freelancingLoc Nguyen
 
Up and Running with ReactJS
Up and Running with ReactJSUp and Running with ReactJS
Up and Running with ReactJSLoc Nguyen
 
Building an API in Node with HapiJS
Building an API in Node with HapiJSBuilding an API in Node with HapiJS
Building an API in Node with HapiJSLoc Nguyen
 
Dart and AngularDart
Dart and AngularDartDart and AngularDart
Dart and AngularDartLoc Nguyen
 
Mobile Web Apps with AngularJS and Ionic
Mobile Web Apps with AngularJS and IonicMobile Web Apps with AngularJS and Ionic
Mobile Web Apps with AngularJS and IonicLoc Nguyen
 
Introducing AngularJS
Introducing AngularJSIntroducing AngularJS
Introducing AngularJSLoc Nguyen
 
AngularJS for Java Developers
AngularJS for Java DevelopersAngularJS for Java Developers
AngularJS for Java DevelopersLoc Nguyen
 

More from Loc Nguyen (8)

How to get started with freelancing
How to get started with freelancingHow to get started with freelancing
How to get started with freelancing
 
Up and Running with ReactJS
Up and Running with ReactJSUp and Running with ReactJS
Up and Running with ReactJS
 
Building an API in Node with HapiJS
Building an API in Node with HapiJSBuilding an API in Node with HapiJS
Building an API in Node with HapiJS
 
Dart and AngularDart
Dart and AngularDartDart and AngularDart
Dart and AngularDart
 
Mobile Web Apps with AngularJS and Ionic
Mobile Web Apps with AngularJS and IonicMobile Web Apps with AngularJS and Ionic
Mobile Web Apps with AngularJS and Ionic
 
Introducing AngularJS
Introducing AngularJSIntroducing AngularJS
Introducing AngularJS
 
AngularJS for Java Developers
AngularJS for Java DevelopersAngularJS for Java Developers
AngularJS for Java Developers
 
UI-Router
UI-RouterUI-Router
UI-Router
 

Recently uploaded

INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETEINFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETEroselinkalist12
 
Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024hassan khalil
 
An experimental study in using natural admixture as an alternative for chemic...
An experimental study in using natural admixture as an alternative for chemic...An experimental study in using natural admixture as an alternative for chemic...
An experimental study in using natural admixture as an alternative for chemic...Chandu841456
 
Call Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile serviceCall Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile servicerehmti665
 
computer application and construction management
computer application and construction managementcomputer application and construction management
computer application and construction managementMariconPadriquez1
 
Class 1 | NFPA 72 | Overview Fire Alarm System
Class 1 | NFPA 72 | Overview Fire Alarm SystemClass 1 | NFPA 72 | Overview Fire Alarm System
Class 1 | NFPA 72 | Overview Fire Alarm Systemirfanmechengr
 
Instrumentation, measurement and control of bio process parameters ( Temperat...
Instrumentation, measurement and control of bio process parameters ( Temperat...Instrumentation, measurement and control of bio process parameters ( Temperat...
Instrumentation, measurement and control of bio process parameters ( Temperat...121011101441
 
Transport layer issues and challenges - Guide
Transport layer issues and challenges - GuideTransport layer issues and challenges - Guide
Transport layer issues and challenges - GuideGOPINATHS437943
 
Correctly Loading Incremental Data at Scale
Correctly Loading Incremental Data at ScaleCorrectly Loading Incremental Data at Scale
Correctly Loading Incremental Data at ScaleAlluxio, Inc.
 
Software and Systems Engineering Standards: Verification and Validation of Sy...
Software and Systems Engineering Standards: Verification and Validation of Sy...Software and Systems Engineering Standards: Verification and Validation of Sy...
Software and Systems Engineering Standards: Verification and Validation of Sy...VICTOR MAESTRE RAMIREZ
 
Sachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
Sachpazis Costas: Geotechnical Engineering: A student's Perspective IntroductionSachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
Sachpazis Costas: Geotechnical Engineering: A student's Perspective IntroductionDr.Costas Sachpazis
 
US Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of ActionUS Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of ActionMebane Rash
 
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdfCCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdfAsst.prof M.Gokilavani
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024Mark Billinghurst
 
Introduction to Machine Learning Unit-3 for II MECH
Introduction to Machine Learning Unit-3 for II MECHIntroduction to Machine Learning Unit-3 for II MECH
Introduction to Machine Learning Unit-3 for II MECHC Sai Kiran
 
Indian Dairy Industry Present Status and.ppt
Indian Dairy Industry Present Status and.pptIndian Dairy Industry Present Status and.ppt
Indian Dairy Industry Present Status and.pptMadan Karki
 
8251 universal synchronous asynchronous receiver transmitter
8251 universal synchronous asynchronous receiver transmitter8251 universal synchronous asynchronous receiver transmitter
8251 universal synchronous asynchronous receiver transmitterShivangiSharma879191
 

Recently uploaded (20)

INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETEINFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
 
Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024
 
An experimental study in using natural admixture as an alternative for chemic...
An experimental study in using natural admixture as an alternative for chemic...An experimental study in using natural admixture as an alternative for chemic...
An experimental study in using natural admixture as an alternative for chemic...
 
Call Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile serviceCall Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile service
 
computer application and construction management
computer application and construction managementcomputer application and construction management
computer application and construction management
 
Class 1 | NFPA 72 | Overview Fire Alarm System
Class 1 | NFPA 72 | Overview Fire Alarm SystemClass 1 | NFPA 72 | Overview Fire Alarm System
Class 1 | NFPA 72 | Overview Fire Alarm System
 
Instrumentation, measurement and control of bio process parameters ( Temperat...
Instrumentation, measurement and control of bio process parameters ( Temperat...Instrumentation, measurement and control of bio process parameters ( Temperat...
Instrumentation, measurement and control of bio process parameters ( Temperat...
 
Transport layer issues and challenges - Guide
Transport layer issues and challenges - GuideTransport layer issues and challenges - Guide
Transport layer issues and challenges - Guide
 
Design and analysis of solar grass cutter.pdf
Design and analysis of solar grass cutter.pdfDesign and analysis of solar grass cutter.pdf
Design and analysis of solar grass cutter.pdf
 
Correctly Loading Incremental Data at Scale
Correctly Loading Incremental Data at ScaleCorrectly Loading Incremental Data at Scale
Correctly Loading Incremental Data at Scale
 
Software and Systems Engineering Standards: Verification and Validation of Sy...
Software and Systems Engineering Standards: Verification and Validation of Sy...Software and Systems Engineering Standards: Verification and Validation of Sy...
Software and Systems Engineering Standards: Verification and Validation of Sy...
 
Sachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
Sachpazis Costas: Geotechnical Engineering: A student's Perspective IntroductionSachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
Sachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
 
US Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of ActionUS Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of Action
 
9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf
9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf
9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf
 
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdfCCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024
 
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptxExploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
 
Introduction to Machine Learning Unit-3 for II MECH
Introduction to Machine Learning Unit-3 for II MECHIntroduction to Machine Learning Unit-3 for II MECH
Introduction to Machine Learning Unit-3 for II MECH
 
Indian Dairy Industry Present Status and.ppt
Indian Dairy Industry Present Status and.pptIndian Dairy Industry Present Status and.ppt
Indian Dairy Industry Present Status and.ppt
 
8251 universal synchronous asynchronous receiver transmitter
8251 universal synchronous asynchronous receiver transmitter8251 universal synchronous asynchronous receiver transmitter
8251 universal synchronous asynchronous receiver transmitter
 

Web Components

Editor's Notes

  1. shadow dom example - <video> custom elements - angular