SlideShare a Scribd company logo
1 of 122
LibertyJS - November 16, 2017
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll
Web Components:
The Future of Web Development is Here
© Comcast
© Comcast
© Comcast
© Comcast
© Comcast
© Comcast
Don’t all of today’s web
frameworks/libraries
provide “components”?
React
React is all about building reusable
components.
In fact, with React the only thing you do is build
components. Since they're so encapsulated,
components make code reuse, testing, and
separation of concerns easy.
Source: https://facebook.github.io/react/docs/why-react.html
© Comcast
© Comcast
Web Components: The Future of Web Development is Here13
Web Components: The Future of Web Development is Here14
How do we create a
component without
the framework?
#UseThePlatform
- Polymer Motto
Web Components
#UseThePlatform
What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll18
4 Specs
What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll19
Custom Elements
What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll20
Custom Elements
class HiMessage extends HTMLElement { }
customElements.define('hi-message', HiMessage);
<hi-message></hi-message>
What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll21
HTML Imports
What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll22
HTML Imports
• Means to import custom elements
- <link rel="import" href="../xc-tab/xc-tab.html">
• Built-in deduplication
• Componetize the HTML, CSS & JavaScript
• Will be replaced by ES6 Modules
- import "../xc-tab/xc-tab.js"
What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll23
Templates
What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll24
• Used to declare fragments of HTML
- <template id="tab">
<div class="tab-content"></div>
</template>
• The element itself renders nothing
• Can be cloned and inserted in the document via
JavaScript, which will render the content
Templates
What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll25
Shadow DOM
What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll26
•Allows you to take a DOM subtree and
hide it from the document scope
•Hides CSS styles as well
•Common examples from HTML5 include:
<select>, <video>, & <input type="date">
Shadow DOM
Can we even use
these things?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll28
Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll29
Sources: https://developers.google.com/web/fundamentals/getting-started/primers/customelements
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll31
Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll32
Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
Source: http://gs.statcounter.com/browser-version-partially-combined-market-share/all/united-states-of-america/#weekly-201740-201745-bar
Source: http://gs.statcounter.com/browser-version-partially-combined-market-share/all/united-states-of-america/#weekly-201740-201745-bar
81.2%
"Samsung Galaxy S7" by Kārlis Dambrāns is licensed under CC BY 2.0
Mobile Safari 10.1Chrome for
Android 54
"Samsung Galaxy S7" by Kārlis Dambrāns is licensed under CC BY 2.0
Mobile Safari 10.1Chrome for
Android 54
= nearly
100%
of mobile
How do we use a
component with
a framework?
© Comcast
© Comcast
Source:
https://www.github.com/Comcast/polaris
© Comcast
© Comcast
<script href="https://polaris.xfinity.com/polaris.js"></script>
<xc-header
tab="myaccount"
is-authed="[[isAuthed]]"
login-url="/login"
sign-out-url="/logout"
first-name="[[openidData.given_name]]"
user-name="[[openidData.preferred_username]]">
</xc-header>
<xc-footer></xc-footer>
Existing Frameworks
Applications
Web Platform
Web Components built with Polymer (or not)
Rob Dodson:
Custom Elements
Everywhere
https://custom-elements-everywhere.com
How do I use
Web Components?
“The Way of the Web” - Ben Issa, ING
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll46
Source: https://youtu.be/8ZTFEhPBJEE?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ
“Assemblers First, Craftspeople
Second”
- Ben Issa, 2016 Polymer Summit
Using Web Components
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll47
"Puzzle Pieces Jigsaw Piece Concept" is licensed under CC0 1.0 / Color adjusted from original
"Blacksmith Forging Smith Forger" is licensed under CC0 1.0 / Color adjusted from original
$ bower install ELEMENT_NAME --save
$ bower install iron-pages --save
$ bower install ELEMENT_NAME --save
$ bower install iron-pages --save
Using Web Components
• Import the component
- <link rel="import" href="../iron-pages/iron-
pages.html">
• Use your custom element as a normal HTML tag
- <iron-pages>
<div>Page 1 content</div>
<div>Page 2 content</div>
</iron-pages>
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll51
Google Polymer Project
Using Web Components
Polymer is NOT
• Material Design
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll55
Source: https://ebidel.github.io/material-playground/
Using Web Components
Polymer is NOT
• Material Design
•Required to use Web Components
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll57
Using Web Components
Polymer is NOT
• Material Design
•Required to use Web Components
• A framework
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll58
Using Web Components
Polymer is NOT
• Material Design
•Required to use Web Components
• A framework
• Heavy
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll59
Using Web Components
Framework/Library Sizes (with GZIP compression)
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll60
Source: http://minime.stephan-brumme.com
React’s size is react + react-dom from https://reactjs.org/blog/2017/09/26/react-v16.0.html
jQuery’s size is from https://code.jquery.com/jquery-3.2.1.min.js
Polymer’s size computed locally based on v2.0.0-rc.4 with just polymer-element.html, and also with the non-legacy imports from polymer.html
117.9kb 56.9kb 34.6kb 30.1kb 11.3kb -
17.7kb
34.8kb
v2.16.2 v1.6.6 v3.2.1 v2.5.3 v2.0.0-rc4v16.0.0
Why should I use
Polymer?
Primitives are
designed so we can
build libraries on
top of them.
Vanilla JS
class MyButton extends HTMLElement {
connectedCallback() {
if (super.connectedCallback)
super.connectedCallback();
this.addEventListener('click', this._click);
}
_click() {
alert('Hello');
}
}
customElements.define('my-button', MyButton);
Polymer
class MyButton extends Polymer.Element {
static get is() { return 'my-button'; }
ready() {
super.ready();
this.addEventListener('click', e => {this._click(e)});
}
_click() {
alert('Hello');
}
}
customElements.define(MyButton.is, MyButton);
Vanilla JS
connectedCallback() {
this.innerHTML = `
<button id='kickMe'>
Kick Me
</button>
`;
this.querySelector('#kickMe')
.addEventListener('click', this.handleClick.bind(this));
}
Polymer
<dom-module id="my-button">
<template>
<button on-click="handleClick">
Kick Me
</button>
</template>
</dom-module>
Vanilla JS
- Only a few components
Polymer
- Lots of components or a site
FYI - Other Libraries
Skate JS
X-Tag
< >XX-Tag
Source: https://github.com/webcomponents/gold-standard/wiki
How do I build a
Polymer Component?
Source: https://www.polymer-
project.org/2.0/docs/tools/polymer-cli
$ polymer help
Available Commands
analyze Writes analysis metadata in JSON format to standard out
build Builds an application-style project
help Shows this help message, or help for a specific command
init Initializes a Polymer project
install installs Bower dependencies,
optionally installing "variants"
lint Identifies potential errors in your code.
serve Runs the polyserve development server
test Runs web-component-tester
$ polymer help
Available Commands
analyze Writes analysis metadata in JSON format to standard out
build Builds an application-style project
help Shows this help message, or help for a specific command
init Initializes a Polymer project
install installs Bower dependencies,
optionally installing "variants"
lint Identifies potential errors in your code.
serve Runs the polyserve development server
test Runs web-component-tester
$ polymer init
? Which starter template would you like to use? (Use arrow keys)
❯ polymer-1-element - A simple Polymer 1.0 element template
polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo
$ polymer init
? Which starter template would you like to use? (Use arrow keys)
polymer-1-element - A simple Polymer 1.0 element template
❯ polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo
$ polymer init
? Which starter template would you like to use? polymer-2-element
info: Running template polymer-2-element...
? Element name my-element
? Brief description of the element My sample element
create bower.json
create demo/index.html
create index.html
create polymer.json
create README.md
create my-element.html
create test/my-element_test.html
Project generated!
Installing dependencies...
<!--
Material design:
[Tabs](https://www.google.com/design/s
pec/components/tabs.html)
`paper-tabs` makes it easy to explore
and switch between different views or
functional aspects of
an app, or to browse categorized data
sets.
Use `selected` property to get or set
the selected tab.
Example:
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
<!--
### Styling
The following custom properties and
mixins are available for styling:
Custom property | Description |
Default
----------------|-------------|-------
---
`--paper-tabs-selection-bar-color` |
Color for the selection bar | `--
paper-yellow-a100`
`--paper-tabs-selection-bar` | Mixin
applied to the selection bar | `{}`
`--paper-tabs` | Mixin applied to the
tabs | `{}`
`--paper-tabs-content` | Mixin applied
to the content container of tabs |
`{}`
`--paper-tabs-container` | Mixin
applied to the layout container of
/**
* If true, the tabs are aligned
to bottom (the selection bar
appears at the top).
*/
alignBottom: {
type: Boolean,
value: false
},
/**
* If true, tabs are
automatically selected when
focused using the
* keyboard.
*/
autoselect: {
type: Boolean,
value: false
},
Documenting Your Polymer Code
• Document with JSDoc syntax - usejsdoc.org
• Create a page that imports & includes iron-component-page
• Generate the docs and load your page:
$ npm i -g polymer-cli bower
$ polymer analyze > analysis.json
$ polymer serve --open
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll84
Additional Details: https://github.com/PolymerElements/iron-component-page
<test-fixture id="NoLabel">
a11ySuite('NoLabel');
How do I build a
Polymer Web App?
Source: https://www.polymer-project.org/2.0/docs/tools/polymer-cli
$ polymer init
? Which starter template would you like to use? (Use arrow keys)
❯ polymer-1-element - A simple Polymer 1.0 element template
polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo
$ polymer init
? Which starter template would you like to use? (Use arrow keys)
polymer-1-element - A simple Polymer 1.0 element template
polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
❯ polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo
Demo Time!!!
What are some
Best Practices?
Sharable ComponentsSharable Components
You Need a TeamYou Need a Team
© Comcast
TDD?
DDD!
D
D
D
Demo
Driven
Development
© Comcast
Use CORS
(Cross-Origin Resource Sharing)
Link: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Separate Your
Data from Your UI
Link: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Why?
1.Decouple State / UI
2.Unidirectional Flow
3.Loadable State
4.Community Tools
<xc-app>
index.html
LogicStore {}
component-name-event-name
<xc-app>
index.html
Logic
xc-people-unpause-all-devices
Native Event
Store {}
component-name-event-name
<xc-app>
index.html
Logic
xc-people-unpause-all-devices
Native Event
Store {} What’s
That?
component-name-event-name
<xc-app>
index.html
Logic
xc-people-unpause-all-devices
Native Event
Store {}
component-name-event-name
<xc-app>
index.html
Store {} Logic
xc-people-unpause-all-devices
Native Event
component-name-event-name
<xc-app>
index.html
Store {} Logic
xc-people-unpause-all-devices
Native Event
component-name-event-name
xc-people-unpause-all-devices
Native Event
Smart Parent
+
<xc-app>
index.html
LogicStore {}
component-name-event-name
xc-people-unpause-all-devices
Native Event
<xc-app>
index.html
LogicStore {}
component-name-event-name
xc-people-unpause-all-devices
Native Event
“How to use Redux in Polymer -- Polycasts #61” - Rob Dodson
Web Components: The Future of Web Development is Here116
Source: https://youtu.be/PahsgJn0sgU?list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo
Important Concepts to Understand
• Encapsulation
• Composition
• Separation of
Concerns
• Functional
Decomposition
"separated" by hansol is licensed under CC BY 2.0
Simplicity
Matters
-Rich Hickey
https://youtu.be/rI8tNMsozo0
"Rocky" by Stefan Ogrisek is licensed under CC BY 2.0 / Color adjusted from original
Simplicity
Creates
Opportunity
Useful Links
•WebComponents.org - webcomponents.org
•Polymer Website - polymer-project.org
•Polymer Slack - polymer-slack.herokuapp.com
•Polymer 2.x Cheat Sheet - https://meowni.ca/posts/polymer-2-cheatsheet/
•How to use Polymer with Webpack - http://robdodson.me/how-to-use-polymer-with-webpack/
•Hands-on with the Polymer 3.0 preview - https://www.polymer-project.org/blog/2017-08-23-
hands-on-30-preview
•Custom Elements Everywhere - https://custom-elements-everywhere.com/
•Polycasts on YouTube -
https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
•2017 Polymer Summit videos on YouTube -
https://www.youtube.com/playlist?list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi
•End-to-End Polymer Apps - 2017 Chrome Dev Summit video - https://youtu.be/Wu2GCRkDecI
•2017 Google I/O Polymer videos on YouTube -
https://www.youtube.com/playlist?list=PL_c6rbXV248du6m1VJABo32mP7sXWVb4m
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll120
Thank You!
Thank you!
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll

More Related Content

What's hot

One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type scriptGil Fink
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5Derek Bender
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portlanddmethvin
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
Workshop: Introduction to Web Components & Polymer
Workshop: Introduction to Web Components & Polymer Workshop: Introduction to Web Components & Polymer
Workshop: Introduction to Web Components & Polymer John Riviello
 
Web components: A simpler and faster react
Web components:  A simpler and faster reactWeb components:  A simpler and faster react
Web components: A simpler and faster reactChris Lorenzo
 
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Andy Davies
 
Engineering the New LinkedIn Profile
Engineering the New LinkedIn ProfileEngineering the New LinkedIn Profile
Engineering the New LinkedIn ProfileJosh Clemm
 
Write Once, Run Everywhere
Write Once, Run EverywhereWrite Once, Run Everywhere
Write Once, Run EverywhereMike North
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)Peter Lubbers
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Nir Elbaz
 
Web components - The Future is Here
Web components - The Future is HereWeb components - The Future is Here
Web components - The Future is HereGil Fink
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with IonicMorris Singer
 
2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.jsWebF
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Chris Danford
 

What's hot (20)

One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
Workshop: Introduction to Web Components & Polymer
Workshop: Introduction to Web Components & Polymer Workshop: Introduction to Web Components & Polymer
Workshop: Introduction to Web Components & Polymer
 
Web components: A simpler and faster react
Web components:  A simpler and faster reactWeb components:  A simpler and faster react
Web components: A simpler and faster react
 
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
 
Engineering the New LinkedIn Profile
Engineering the New LinkedIn ProfileEngineering the New LinkedIn Profile
Engineering the New LinkedIn Profile
 
Write Once, Run Everywhere
Write Once, Run EverywhereWrite Once, Run Everywhere
Write Once, Run Everywhere
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Swf search final
Swf search finalSwf search final
Swf search final
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Web components - The Future is Here
Web components - The Future is HereWeb components - The Future is Here
Web components - The Future is Here
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
 

Similar to Web Components: The Future of Web Development is Here

Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16John Riviello
 
Polymer-Powered Design Systems - DevFest Florida
Polymer-Powered Design Systems - DevFest FloridaPolymer-Powered Design Systems - DevFest Florida
Polymer-Powered Design Systems - DevFest FloridaJohn Riviello
 
Web Components
Web ComponentsWeb Components
Web ComponentsFITC
 
Web Components
Web ComponentsWeb Components
Web ComponentsFITC
 
Web2 And Java
Web2 And JavaWeb2 And Java
Web2 And Javasenejug
 
Web components Introduction
Web components IntroductionWeb components Introduction
Web components IntroductionEugenio Romano
 
IRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET Journal
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016jancbeck
 
Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1Henry S
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
 
Sitecore development approach evolution – destination helix
Sitecore development approach evolution – destination helixSitecore development approach evolution – destination helix
Sitecore development approach evolution – destination helixPeter Nazarov
 
Protection and Verification of Security Design Flaws
Protection and Verification of Security Design FlawsProtection and Verification of Security Design Flaws
Protection and Verification of Security Design FlawsHdiv Security
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Estelle Weyl
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedGil Fink
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven developmentGil Fink
 
Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Codemotion
 
Meteor + Polymer
Meteor + PolymerMeteor + Polymer
Meteor + Polymerwolf4ood
 

Similar to Web Components: The Future of Web Development is Here (20)

Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16
 
Web components api + Vuejs
Web components api + VuejsWeb components api + Vuejs
Web components api + Vuejs
 
Polymer-Powered Design Systems - DevFest Florida
Polymer-Powered Design Systems - DevFest FloridaPolymer-Powered Design Systems - DevFest Florida
Polymer-Powered Design Systems - DevFest Florida
 
Html5
Html5Html5
Html5
 
Web Components
Web ComponentsWeb Components
Web Components
 
Web Components
Web ComponentsWeb Components
Web Components
 
Web2 And Java
Web2 And JavaWeb2 And Java
Web2 And Java
 
Web components Introduction
Web components IntroductionWeb components Introduction
Web components Introduction
 
IRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET- Polymer Javascript
IRJET- Polymer Javascript
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016
 
Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
Sitecore development approach evolution – destination helix
Sitecore development approach evolution – destination helixSitecore development approach evolution – destination helix
Sitecore development approach evolution – destination helix
 
Protection and Verification of Security Design Flaws
Protection and Verification of Security Design FlawsProtection and Verification of Security Design Flaws
Protection and Verification of Security Design Flaws
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015
 
Meteor + Polymer
Meteor + PolymerMeteor + Polymer
Meteor + Polymer
 

Recently uploaded

Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxeditsforyah
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 

Recently uploaded (17)

Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptx
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 

Web Components: The Future of Web Development is Here