SlideShare a Scribd company logo
Web Components 
Jeff Tapper 
Digital Primates 
@jefftapper / @digitalprimates
Who am I? 
• Senior Consultant at Digital Primates 
– Building next generation client applications 
• Developing Internet applications for 19 years 
• Author of 12 books on Internet technologies
Who are you?
What are Web Components? 
Web Components are an attempt to let 
you write custom components that can be 
used like this: 
<body> 
Sales:<br> 
<my-super-cool-chart id="coolChart"> 
</ my-super-cool-chart > 
</body>

Recommended for you

Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3

This document provides an overview and demonstration of Bootstrap, an open-source front-end framework for developing responsive, mobile-first web sites and applications. It discusses Bootstrap's support for responsive design using LESS, its grid system, and included UI components like buttons, forms, navigation, and more. The document also demonstrates how to get started with a basic Bootstrap template and use its grid system, breakpoints, containers and columns. Finally, it mentions some tools for working with Bootstrap and provides details on Font Awesome, an icon library that is often used along with Bootstrap.

bootstrap 3bootstrapbootstrap for beginner
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016

Flexbox is a modern layout method in CSS that allows for flexible and responsive page layouts. It addresses shortcomings of older methods like floats, tables, and inline blocks by allowing for full control over alignment, order, and distribution of space between items. Flexbox makes it easy to create complex responsive layouts that were previously difficult to achieve without hacks. While not a silver bullet, flexbox excels at component-based and content-driven page layouts. Tools like autoprefixer and fallbacks help provide support for older browsers.

#cssday2016#css#flex-box
CSS
CSSCSS
CSS

This document provides an overview of Cascading Style Sheets (CSS) including what CSS is, how to write CSS code, and the different ways to include CSS in an HTML document. CSS allows separation of document content from page layout and visual design. CSS code uses selectors, properties, and values to style HTML elements. Styles can be included inline, internally in the <head> using <style> tags, or externally in a .css file linked via the <link> tag. Inheritance rules determine which styles take precedence.

What is Polymer? 
A library built on top of Web Components. 
Allows us to use Web Components today in modern browsers 
which don’t yet support Web Components 
3 main pieces 
• A set of polyfills 
• Web application framework 
• Set of UI components
What are we covering? 
Web Components, specifically: 
What in the world are web components? 
What problem are they trying to solve? 
How do they work? 
Can I actually use these things? 
What does it mean to my app/development process?
Life on the Edge 
Web Components are beyond leading edge. 
As of this moment, they do not work in their entirety in any 
browser 
A good portion of the functionality is available in Chrome 
Canary if you turn on all of the experimental WebKit and 
JavaScript features
So, is it real? 
Even though Web Components are not fully supported in 
any browser, and are only partially supported in some 
browsers, Polymer and Polyfills allow use in many 
modern browsers today

Recommended for you

Html media
Html mediaHtml media
Html media

This Presentation is based on the different HTML media elements. This will clear all your all doubts on these tags or elements.

iframe-tagmedia-elementsaudiao-tag
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries

Media queries allow CSS styles to be applied conditionally based on characteristics of the device viewing the content, like screen width. They provide a way to target specific devices and change layouts without changing the HTML. The document discusses the syntax of media queries, including using media types, features, expressions, and keywords. It provides examples of using media queries to load different style sheets or apply different CSS rules for different screen widths.

cssmedia queriescss3
File server
File serverFile server
File server

A file server is a computer that centrally stores and manages files so that other computers on a network can access them. It acts as a dedicated system like a network attached storage device to offer fast data access and higher storage capacity than a non-dedicated server. A file server for 250+ users requiring 20TB of storage for files accessed for read, write, and rewrite through fiber-connected switches would need a powerful CPU, large RAM, multiple SAS or SSD disks in a RAID 5 configuration, multiple NICs, and a RAID controller.

server
Where can I use this today?
So why do I care? 
A few minor reasons you may like the idea, first: 
Encapsulation 
• Manageable Reuse 
• Hiding complexity and implementation 
• Dealing with duplicated IDs 
• Dealing with CSS scoping / propagation 
Ease of Distribution 
Appropriate technology choices 
• Markup in markup, not in code
How does it work? 
Web Components are a series of editors draft 
specifications: 
• Shadow DOM 
– http://w3c.github.io/webcomponents/spec/shadow/ 
• Custom Elements 
– http://w3c.github.io/webcomponents/spec/custom/ 
• HTML Imports 
– http://w3c.github.io/webcomponents/spec/imports/
Example Application 
• Let’s look at a sample application built using a 
series of Web Components 
• Combination of custom components, and 
those provided by the polymer-project

Recommended for you

What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)

What is HTML? HTML stands for "Hypertext Markup Language". A standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages. Hypertext Markup Language is the standard markup language for creating the Web pages and Web Applications. With Cascading Style Sheets (CSS) & JavaScript for creating World Wide Web pages. HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. HTML is relatively easy to learn & it consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser.

hypertext markup languagehtmlhtml5
Static and Dynamic webpage
Static and Dynamic webpageStatic and Dynamic webpage
Static and Dynamic webpage

The document discusses the basics of HTML, which is used to design webpages through tags and attributes, and defines dynamic HTML (DHTML) as combining HTML, JavaScript, CSS, and scripting to make webpages interactive and able to change based on user inputs. Static webpages only use HTML and CSS and cannot dynamically change, while dynamic pages use client-side or server-side scripting to alter the content displayed to users.

htmlserver-side scriptingdhtml
Dom
DomDom
Dom

The presentation provides an introduction to the Document Object Model (DOM) and how it allows JavaScript to access and modify HTML documents. It discusses how the DOM presents an HTML document as a tree structure, and how JavaScript can then restructure the document by adding, removing, or changing elements. It also gives examples of how DOM properties and methods allow accessing and manipulating specific nodes, such as changing the background color of the document body.

Templates 
The concept of templates is prolific and nearly self-explanatory. 
Their use takes a bit more effort: 
Inactive DOM Fragment 
Easily Clone-able 
Easily Change-able
Built In Templates 
You define them with the template element 
<template id="productTemplate"> 
<div> 
<img src=""> 
<div class="name"></div> 
<div class="description"></div> 
</div> 
</template> 
This is parsed but it’s not active. It’s not rendered.
Shadow DOM 
Shadow DOM is at the heart of the whole component 
concepts 
It’s encapsulation 
Its used by the browsers today to implement their own 
controls 
Ultimately its about hiding implementation details and 
exposing an interface
Shadow DOM 
The name and the technical explanation 
sometimes get in the way of the concept. 
Put simply, the user sees this: 
Photo by Photo by: Mark Kaelin/TechRepublic

Recommended for you

Intro to Wordpress
Intro to WordpressIntro to Wordpress
Intro to Wordpress

This document provides an introduction and overview of WordPress for personal site design. It discusses what WordPress is, who uses it, why it's a good option, and how to install, customize, and manage a WordPress site. Key points covered include that WordPress is an open-source content management system and blogging platform, it has a user-friendly interface, and comes with many plugins and themes to expand functionality.

Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS

The document provides an overview of HTML and CSS, covering topics such as the structure of an HTML document, HTML tags, CSS, and how to create a basic webpage. It discusses what HTML and CSS are, why they are needed, popular HTML tags, and gives examples of adding CSS to an HTML document. It also provides a hands-on tutorial showing how to build a simple website covering HTML basics and using CSS for styling.

web designsyed samipresentation
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js

HTML is a markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements, and JavaScript can be used to program behaviors and interactions in web pages. jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, as well as event handling, animations, and Ajax interactions for rapid web development.

Shadow DOM 
The browser sees this: 
Photo by Photo by: Mark Kaelin/TechRepublic
Shadow Host/Root
Rendering
Styles 
The Shadow also forms a boundary. Styles don’t cross 
unless you let them. So you to keep control of this area

Recommended for you

Introduction to Web Hosting.
Introduction to Web Hosting.Introduction to Web Hosting.
Introduction to Web Hosting.

This document provides an introduction to web hosting and different hosting plan options. It discusses why having a website and hosting it is important for business online presence, lead generation, and reach. It then describes several hosting plan types including shared hosting, dedicated hosting, VPS hosting, cloud hosting, and reseller hosting. The document concludes by offering tips for choosing a hosting provider, such as considering disk space, technical support availability, hardware, user interface, email capabilities, flexibility to scale, and cost.

webweb hostinginternet
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf

This document provides an introduction to HTML and CSS. It defines HTML as a markup language used to structure web pages with tags, and CSS as a style sheet language used to describe how HTML elements are displayed. It lists common HTML elements like headings, paragraphs, and divs that can be block or inline, and describes how CSS can be applied internally, inline, or via external stylesheets to control things like colors, fonts, and layout. Key differences between HTML and CSS are also outlined, with HTML for structure and CSS for presentation.

CSS
CSSCSS
CSS

CSS (Cascading Style Sheets) allows styling and layout of HTML documents by separating the presentation from the content, making it possible to change the look of an entire website by editing one CSS file. CSS uses selectors to apply specific styles to HTML elements via declarations that set properties like color, font, size and more. Styles are defined in CSS files and can be applied to HTML documents via internal, external, and inline styling methods.

css idcsslists
Styles 
This, by default, goes both ways… meaning we aren’t 
worried about collisions. 
Outside styles don’t 
affect shadow content 
Styles defined in here 
are scoped locally
HTML Imports 
• HTML imports are about importing and sharing HTML 
content. 
• Why? Well, reuse, it facilitates the reuse of templates 
and provides us a fundamental need if we are going to 
share an encapsulated chunk we might call a 
component. 
• <link rel="import" href="goodies.html">
HTML Imports 
• Last word on this… 
• Imports aren’t supported pretty much anywhere yet, 
however, there are polyfills. 
• Imports are blocking. So, your page will act as though it 
needs this content before it can render.
Custom Elements 
• Elements are the key to putting this together. 
• Custom Elements are DOM elements that can be 
defined by a developer. 
• They are allowed to manage state and provide a 
scriptable interface. 
• In other words, they are the shell of what will become 
our component

Recommended for you

Html
HtmlHtml
Html

The document provides an introduction to HTML, covering topics such as what HTML is, how web pages work, common programs used to write HTML, how browsers display web pages, basic HTML tags, formatting of HTML documents, and more. Key points include: - HTML is the standard markup language used to create web pages - Web pages are stored on servers and viewed in browsers using HTTP - Popular programs for writing HTML include Notepad, Textpad, Dreamweaver - Browsers fetch and display pages using HTML tags to control formatting - Basic HTML tags include headings, paragraphs, line breaks, comments - Links, images, backgrounds, and other elements are added using tags

WEB HOSTING
WEB HOSTINGWEB HOSTING
WEB HOSTING

Web hosting involves companies that maintain servers to allow users to put websites on the internet. When choosing a web host, it is important to consider factors like data storage needs, technical support availability, uptime guarantees, security measures offered, and platform flexibility. Potential hosts should be contacted directly to assess customer service before signing up. Hidden fees, transfer limits, and lengthy contracts are things to watch out for.

web hosting
Intensivo 80h - Links Patrocinados
Intensivo 80h - Links PatrocinadosIntensivo 80h - Links Patrocinados
Intensivo 80h - Links Patrocinados

O documento resume um curso sobre links patrocinados no Google AdWords, abordando: 1) o mercado de e-commerce no Brasil; 2) o perfil do e-consumidor; 3) por que investir em mídia online; 4) mecanismos de busca na internet; 5) o que é Search Engine Marketing; 6) ferramentas do Google AdWords para anúncios em buscas, sites e redes sociais.

links patrocinados
Custom Elements 
• Defining a custom element like this: 
<polymer-element extends="button" name="fancy-button"> 
</polymer-element> 
• Allows you to use that custom element in your 
own markup: 
<div> 
<fancy-button></fancy-button> 
</div>
Custom Elements 
• You can use the concepts we previously discussed, 
templates, Shadow DOM, etc. from within a custom 
element. 
• Further, custom elements give you a set of Lifecycle 
callbacks so you can know things like when you are 
inserted into the DOM, removed and ready. 
• This means you can define the visual aspects of a 
custom element in mark up and the code in script.
Resources 
• http://www.w3.org/wiki/WebComponents/ 
• http://www.polymer-project.org/ 
• @polymer – officical twitter of the polymer 
project 
• @digitalprimates 
• @jefftapper

More Related Content

What's hot

Flexbox
FlexboxFlexbox
Flexbox
Netcetera
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
Rex Wang
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
Santhiya Grace
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
Lanh Le
 
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016
Davide Di Pumpo
 
CSS
CSSCSS
Html media
Html mediaHtml media
Html media
Webtech Learning
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Russ Weakley
 
File server
File serverFile server
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
Ahsan Rahim
 
Static and Dynamic webpage
Static and Dynamic webpageStatic and Dynamic webpage
Static and Dynamic webpage
Aishwarya Pallai
 
Dom
DomDom
Intro to Wordpress
Intro to WordpressIntro to Wordpress
Intro to Wordpress
Nicole C. Engard
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
Syed Sami
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Introduction to Web Hosting.
Introduction to Web Hosting.Introduction to Web Hosting.
Introduction to Web Hosting.
Cloudbells.com
 
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf
Kalyani Government Engineering College
 
CSS
CSSCSS
Html
HtmlHtml
WEB HOSTING
WEB HOSTINGWEB HOSTING
WEB HOSTING
webhostingguy
 

What's hot (20)

Flexbox
FlexboxFlexbox
Flexbox
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016
 
CSS
CSSCSS
CSS
 
Html media
Html mediaHtml media
Html media
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
File server
File serverFile server
File server
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
Static and Dynamic webpage
Static and Dynamic webpageStatic and Dynamic webpage
Static and Dynamic webpage
 
Dom
DomDom
Dom
 
Intro to Wordpress
Intro to WordpressIntro to Wordpress
Intro to Wordpress
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Introduction to Web Hosting.
Introduction to Web Hosting.Introduction to Web Hosting.
Introduction to Web Hosting.
 
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf
 
CSS
CSSCSS
CSS
 
Html
HtmlHtml
Html
 
WEB HOSTING
WEB HOSTINGWEB HOSTING
WEB HOSTING
 

Viewers also liked

Intensivo 80h - Links Patrocinados
Intensivo 80h - Links PatrocinadosIntensivo 80h - Links Patrocinados
Intensivo 80h - Links Patrocinados
Escola do Marketing Digital
 
Website Design & Web History Presentation Add By Upul Chanaka
Website Design & Web History Presentation Add By Upul ChanakaWebsite Design & Web History Presentation Add By Upul Chanaka
Website Design & Web History Presentation Add By Upul Chanaka
Upul Chanaka
 
Publishing Your Family History to the Web - Version 3
Publishing Your Family History to the Web - Version 3Publishing Your Family History to the Web - Version 3
Publishing Your Family History to the Web - Version 3
Teresa Pask
 
Cloud Services with Doteasy.com
Cloud Services with Doteasy.comCloud Services with Doteasy.com
Cloud Services with Doteasy.com
Doteasy
 
A concept for a web browser
A concept for a web browserA concept for a web browser
A concept for a web browser
Mphasis
 
Context And Concept Of Web Services
Context And Concept Of Web ServicesContext And Concept Of Web Services
Context And Concept Of Web Services
Fatih Taşkın
 
Internet infrastructure
Internet infrastructureInternet infrastructure
Internet infrastructure
Amos Mpungu
 
Sensex Sep 2015
Sensex Sep 2015Sensex Sep 2015
Sensex Sep 2015
Ujwal Tamminedi
 
Emerging payment technologies
Emerging payment technologiesEmerging payment technologies
Emerging payment technologies
Ujwal Tamminedi
 
The Web: history - now - future
The Web: history - now - futureThe Web: history - now - future
The Web: history - now - future
Knowledge Hives
 
Internet infrastructure and the history of the world wide web presentation, f...
Internet infrastructure and the history of the world wide web presentation, f...Internet infrastructure and the history of the world wide web presentation, f...
Internet infrastructure and the history of the world wide web presentation, f...
Graham Garner
 
Web Workflow
Web WorkflowWeb Workflow
Web Workflow
Aaron Schaap
 
Hardware for a_soft_world_bkup
Hardware for a_soft_world_bkupHardware for a_soft_world_bkup
Hardware for a_soft_world_bkup
FITC
 
The Little Shop of TDD Horrors
The Little Shop of TDD HorrorsThe Little Shop of TDD Horrors
The Little Shop of TDD Horrors
FITC
 
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
FITC
 
Goofy, Goodfellas and a Gardener: The Masters of Experience Design.
Goofy, Goodfellas and a Gardener: The Masters of Experience Design.Goofy, Goodfellas and a Gardener: The Masters of Experience Design.
Goofy, Goodfellas and a Gardener: The Masters of Experience Design.
FITC
 
21st Century Crystal Ball
21st Century Crystal Ball21st Century Crystal Ball
21st Century Crystal Ball
FITC
 
Everydays
EverydaysEverydays
Everydays
FITC
 
The Future of Motion/Gesture Technology
The Future of Motion/Gesture TechnologyThe Future of Motion/Gesture Technology
The Future of Motion/Gesture Technology
FITC
 

Viewers also liked (19)

Intensivo 80h - Links Patrocinados
Intensivo 80h - Links PatrocinadosIntensivo 80h - Links Patrocinados
Intensivo 80h - Links Patrocinados
 
Website Design & Web History Presentation Add By Upul Chanaka
Website Design & Web History Presentation Add By Upul ChanakaWebsite Design & Web History Presentation Add By Upul Chanaka
Website Design & Web History Presentation Add By Upul Chanaka
 
Publishing Your Family History to the Web - Version 3
Publishing Your Family History to the Web - Version 3Publishing Your Family History to the Web - Version 3
Publishing Your Family History to the Web - Version 3
 
Cloud Services with Doteasy.com
Cloud Services with Doteasy.comCloud Services with Doteasy.com
Cloud Services with Doteasy.com
 
A concept for a web browser
A concept for a web browserA concept for a web browser
A concept for a web browser
 
Context And Concept Of Web Services
Context And Concept Of Web ServicesContext And Concept Of Web Services
Context And Concept Of Web Services
 
Internet infrastructure
Internet infrastructureInternet infrastructure
Internet infrastructure
 
Sensex Sep 2015
Sensex Sep 2015Sensex Sep 2015
Sensex Sep 2015
 
Emerging payment technologies
Emerging payment technologiesEmerging payment technologies
Emerging payment technologies
 
The Web: history - now - future
The Web: history - now - futureThe Web: history - now - future
The Web: history - now - future
 
Internet infrastructure and the history of the world wide web presentation, f...
Internet infrastructure and the history of the world wide web presentation, f...Internet infrastructure and the history of the world wide web presentation, f...
Internet infrastructure and the history of the world wide web presentation, f...
 
Web Workflow
Web WorkflowWeb Workflow
Web Workflow
 
Hardware for a_soft_world_bkup
Hardware for a_soft_world_bkupHardware for a_soft_world_bkup
Hardware for a_soft_world_bkup
 
The Little Shop of TDD Horrors
The Little Shop of TDD HorrorsThe Little Shop of TDD Horrors
The Little Shop of TDD Horrors
 
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
 
Goofy, Goodfellas and a Gardener: The Masters of Experience Design.
Goofy, Goodfellas and a Gardener: The Masters of Experience Design.Goofy, Goodfellas and a Gardener: The Masters of Experience Design.
Goofy, Goodfellas and a Gardener: The Masters of Experience Design.
 
21st Century Crystal Ball
21st Century Crystal Ball21st Century Crystal Ball
21st Century Crystal Ball
 
Everydays
EverydaysEverydays
Everydays
 
The Future of Motion/Gesture Technology
The Future of Motion/Gesture TechnologyThe Future of Motion/Gesture Technology
The Future of Motion/Gesture Technology
 

Similar to Web Components

Web Components
Web ComponentsWeb Components
Web Components
FITC
 
Reaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and PolymerReaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and Polymer
FITC
 
Web components, so close!
Web components, so close!Web components, so close!
Web components, so close!
Aleks Zinevych
 
Polymer 101
Polymer 101Polymer 101
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
Rich Bradshaw
 
Implementing Vanilla Web Components
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Components
sonumanoj
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
Marcos Labad
 
Manasa
ManasaManasa
1_Intro_toHTML.ppt
1_Intro_toHTML.ppt1_Intro_toHTML.ppt
1_Intro_toHTML.ppt
benjaminonum1
 
Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016
Marco Breveglieri
 
SDWest2005Goetsch
SDWest2005GoetschSDWest2005Goetsch
SDWest2005Goetsch
Mark Goetsch
 
Webcomponents TLV October 2014
Webcomponents TLV October 2014Webcomponents TLV October 2014
Webcomponents TLV October 2014
Dmitry Bakaleinik
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - Material
Thomas Daly
 
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSMicro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
KNOWARTH - Software Development Company
 
Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...
Marios Fakiolas
 
Introduction to Web Components & Polymer Workshop - JS Interactive
Introduction to Web Components & Polymer Workshop - JS InteractiveIntroduction to Web Components & Polymer Workshop - JS Interactive
Introduction to Web Components & Polymer Workshop - JS Interactive
John Riviello
 
Webcomponents v2
Webcomponents v2Webcomponents v2
Webcomponents v2
Dmitry Bakaleinik
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
Gil Fink
 
Angular Ivy- An Overview
Angular Ivy- An OverviewAngular Ivy- An Overview
Angular Ivy- An Overview
Jalpesh Vadgama
 
IRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET- Polymer Javascript
IRJET- Polymer Javascript
IRJET Journal
 

Similar to Web Components (20)

Web Components
Web ComponentsWeb Components
Web Components
 
Reaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and PolymerReaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and Polymer
 
Web components, so close!
Web components, so close!Web components, so close!
Web components, so close!
 
Polymer 101
Polymer 101Polymer 101
Polymer 101
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
Implementing Vanilla Web Components
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Components
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
 
Manasa
ManasaManasa
Manasa
 
1_Intro_toHTML.ppt
1_Intro_toHTML.ppt1_Intro_toHTML.ppt
1_Intro_toHTML.ppt
 
Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016
 
SDWest2005Goetsch
SDWest2005GoetschSDWest2005Goetsch
SDWest2005Goetsch
 
Webcomponents TLV October 2014
Webcomponents TLV October 2014Webcomponents TLV October 2014
Webcomponents TLV October 2014
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - Material
 
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSMicro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
 
Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...
 
Introduction to Web Components & Polymer Workshop - JS Interactive
Introduction to Web Components & Polymer Workshop - JS InteractiveIntroduction to Web Components & Polymer Workshop - JS Interactive
Introduction to Web Components & Polymer Workshop - JS Interactive
 
Webcomponents v2
Webcomponents v2Webcomponents v2
Webcomponents v2
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Angular Ivy- An Overview
Angular Ivy- An OverviewAngular Ivy- An Overview
Angular Ivy- An Overview
 
IRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET- Polymer Javascript
IRJET- Polymer Javascript
 

More from FITC

Cut it up
Cut it upCut it up
Cut it up
FITC
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
FITC
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
FITC
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
FITC
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
FITC
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
FITC
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
FITC
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
FITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
FITC
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
FITC
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
FITC
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
FITC
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
FITC
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
FITC
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
FITC
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
FITC
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
FITC
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
FITC
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
FITC
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
FITC
 

More from FITC (20)

Cut it up
Cut it upCut it up
Cut it up
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
 

Recently uploaded

Common Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdfCommon Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdf
Serva AppLabs
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
thomaskurtha9
 
2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage
Zsolt Nemeth
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
byubyu7
 
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
taqyea
 
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
taqyea
 
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
taqyea
 
seo proposal | Kiyado Innovations LLP pdf
seo proposal | Kiyado Innovations LLP  pdfseo proposal | Kiyado Innovations LLP  pdf
seo proposal | Kiyado Innovations LLP pdf
diyakiyado
 
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
taqyea
 
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
taqyea
 
University of Otago degree offer diploma Transcript
University of Otago degree offer diploma TranscriptUniversity of Otago degree offer diploma Transcript
University of Otago degree offer diploma Transcript
ubufe
 
Massey University degree offer diploma Transcript
Massey University degree offer diploma TranscriptMassey University degree offer diploma Transcript
Massey University degree offer diploma Transcript
ubufe
 
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
taqyea
 
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
taqyea
 
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
taqyea
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
taqyea
 
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
taqyea
 
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
taqyea
 
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptxSlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
NandakumarP24
 
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
taqyea
 

Recently uploaded (20)

Common Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdfCommon Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdf
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
 
2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
 
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
 
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
 
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
 
seo proposal | Kiyado Innovations LLP pdf
seo proposal | Kiyado Innovations LLP  pdfseo proposal | Kiyado Innovations LLP  pdf
seo proposal | Kiyado Innovations LLP pdf
 
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
 
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
 
University of Otago degree offer diploma Transcript
University of Otago degree offer diploma TranscriptUniversity of Otago degree offer diploma Transcript
University of Otago degree offer diploma Transcript
 
Massey University degree offer diploma Transcript
Massey University degree offer diploma TranscriptMassey University degree offer diploma Transcript
Massey University degree offer diploma Transcript
 
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
 
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
 
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
 
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
 
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptxSlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
 
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
 

Web Components

  • 1. Web Components Jeff Tapper Digital Primates @jefftapper / @digitalprimates
  • 2. Who am I? • Senior Consultant at Digital Primates – Building next generation client applications • Developing Internet applications for 19 years • Author of 12 books on Internet technologies
  • 4. What are Web Components? Web Components are an attempt to let you write custom components that can be used like this: <body> Sales:<br> <my-super-cool-chart id="coolChart"> </ my-super-cool-chart > </body>
  • 5. What is Polymer? A library built on top of Web Components. Allows us to use Web Components today in modern browsers which don’t yet support Web Components 3 main pieces • A set of polyfills • Web application framework • Set of UI components
  • 6. What are we covering? Web Components, specifically: What in the world are web components? What problem are they trying to solve? How do they work? Can I actually use these things? What does it mean to my app/development process?
  • 7. Life on the Edge Web Components are beyond leading edge. As of this moment, they do not work in their entirety in any browser A good portion of the functionality is available in Chrome Canary if you turn on all of the experimental WebKit and JavaScript features
  • 8. So, is it real? Even though Web Components are not fully supported in any browser, and are only partially supported in some browsers, Polymer and Polyfills allow use in many modern browsers today
  • 9. Where can I use this today?
  • 10. So why do I care? A few minor reasons you may like the idea, first: Encapsulation • Manageable Reuse • Hiding complexity and implementation • Dealing with duplicated IDs • Dealing with CSS scoping / propagation Ease of Distribution Appropriate technology choices • Markup in markup, not in code
  • 11. How does it work? Web Components are a series of editors draft specifications: • Shadow DOM – http://w3c.github.io/webcomponents/spec/shadow/ • Custom Elements – http://w3c.github.io/webcomponents/spec/custom/ • HTML Imports – http://w3c.github.io/webcomponents/spec/imports/
  • 12. Example Application • Let’s look at a sample application built using a series of Web Components • Combination of custom components, and those provided by the polymer-project
  • 13. Templates The concept of templates is prolific and nearly self-explanatory. Their use takes a bit more effort: Inactive DOM Fragment Easily Clone-able Easily Change-able
  • 14. Built In Templates You define them with the template element <template id="productTemplate"> <div> <img src=""> <div class="name"></div> <div class="description"></div> </div> </template> This is parsed but it’s not active. It’s not rendered.
  • 15. Shadow DOM Shadow DOM is at the heart of the whole component concepts It’s encapsulation Its used by the browsers today to implement their own controls Ultimately its about hiding implementation details and exposing an interface
  • 16. Shadow DOM The name and the technical explanation sometimes get in the way of the concept. Put simply, the user sees this: Photo by Photo by: Mark Kaelin/TechRepublic
  • 17. Shadow DOM The browser sees this: Photo by Photo by: Mark Kaelin/TechRepublic
  • 20. Styles The Shadow also forms a boundary. Styles don’t cross unless you let them. So you to keep control of this area
  • 21. Styles This, by default, goes both ways… meaning we aren’t worried about collisions. Outside styles don’t affect shadow content Styles defined in here are scoped locally
  • 22. HTML Imports • HTML imports are about importing and sharing HTML content. • Why? Well, reuse, it facilitates the reuse of templates and provides us a fundamental need if we are going to share an encapsulated chunk we might call a component. • <link rel="import" href="goodies.html">
  • 23. HTML Imports • Last word on this… • Imports aren’t supported pretty much anywhere yet, however, there are polyfills. • Imports are blocking. So, your page will act as though it needs this content before it can render.
  • 24. Custom Elements • Elements are the key to putting this together. • Custom Elements are DOM elements that can be defined by a developer. • They are allowed to manage state and provide a scriptable interface. • In other words, they are the shell of what will become our component
  • 25. Custom Elements • Defining a custom element like this: <polymer-element extends="button" name="fancy-button"> </polymer-element> • Allows you to use that custom element in your own markup: <div> <fancy-button></fancy-button> </div>
  • 26. Custom Elements • You can use the concepts we previously discussed, templates, Shadow DOM, etc. from within a custom element. • Further, custom elements give you a set of Lifecycle callbacks so you can know things like when you are inserted into the DOM, removed and ready. • This means you can define the visual aspects of a custom element in mark up and the code in script.
  • 27. Resources • http://www.w3.org/wiki/WebComponents/ • http://www.polymer-project.org/ • @polymer – officical twitter of the polymer project • @digitalprimates • @jefftapper