SlideShare una empresa de Scribd logo
1 de 28
Descargar para leer sin conexión
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 1/28
Web components
A whirlwind tour
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 2/28
¡Hola!
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 3/28
What I do
Centralway
@geekonaut
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 4/28
I am from Zurich
Which isn't as boring as you may think...
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 5/28
...take that, Winter!
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 6/28
Buggy method, tho
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 7/28
Anyway...
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 8/28
Let's talk about Web components
Image CC-BY-SA 2.0 by Alan Chia, Source
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 9/28
Let's talk about HTML
Lego ad from 1978
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 10/28
We need to move forward quickly
vs
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 11/28
A sample: Filterable list
<div class="filterList">
<label for="filterTerm">Search for: </label>
<input id="filterTerm">
<ul>
<li>Chuck Norris doesn't call the wrong number. You answer the wrong phone.</li>
<li>Chuck Norris has been to Mars; that's why there are no signs of life.</li>
<li>Chuck Norris refers to himself in fourth person.?</li>
<li>Chuck Norris once leaned against a tower in Pisa, Italy.</li>
<li>To keep is his mind sharp Chuck Norris plays Tic‑Tac‑Toe versus himself. He wins every time.</li>
<li>Light is so fast, because it tries to escape Chuck Norris (but that obviously fails)</li>
<li>The average room bears 73658 ways for Chuck Norris to kill you, including just the room itself.</li>
</ul>
</div>
<script>
document.getElementById("filterTerm").addEventListener("keyup", function() {
var items = document.querySelectorAll(".filterList li");
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 12/28
How to go on from here?
1. Keep it a Javascript hack
2. Try to implement it directly in the browser's codebases
3. Try to get it standardized
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 13/28
How to go on from here?
1. Keep it a Javascript hack
2. Try to implement it directly in the browser's codebases
3. Try to get it standardized
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 14/28
But then again...
Source: @stevefaulkner
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 15/28
Web components Standards:
Template element
Shadow DOM
Custom elements
HTML imports
Go read the intro here
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 16/28
Build new HTML elements
using HTML, CSS & Javascript
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 17/28
Template elements
<template>
<script>
console.log("Hi!");
</script>
<h1></h1>
</template>
<button id="add">Make a headline</button>
<script>
document.getElementById("add").addEventListener("click", function() {
var tplContent = document.querySelector("template").content;
tplContent.querySelector("h1").textContent = window.prompt("Headline");
document.body.appendChild(tplContent.cloneNode(true));
});
</script>
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 18/28
Shadow DOM
<template>
<script>
console.log("Hi!");
</script>
<h1></h1>
</template>
<button id="add">Make a headline</button>
<button id="test">Test for headlines</button>
<script>
document.getElementById("add").addEventListener("click", function() {
var tplContent = document.querySelector("template").content.cloneNode(true);
tplContent.querySelector("h1").textContent = window.prompt("Headline");
var container = document.createElement("div");
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 19/28
Custom elements
<template>
<script>
console.log("Hi.");
</script>
<h1></h1>
</template>
<button id="add">Make a headline</button>
<button id="test">Test for headlines</button>
<script>
var elemPrototype = Object.create(HTMLElement.prototype);
elemPrototype.createdCallback = function() {
console.log("Created element");
this.root = this.createShadowRoot();
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 20/28
HTML imports
<link rel="import" href="filterlist.html">
<filter‑list>
<li>Chuck Norris doesn't call the wrong number. You answer the wrong phone.</li>
<li>Chuck Norris has been to Mars; that's why there are no signs of life.</li>
<li>Chuck Norris refers to himself in fourth person.?</li>
<li>Chuck Norris once leaned against a tower in Pisa, Italy.</li>
<li>To keep is his mind sharp Chuck Norris plays Tic‑Tac‑Toe versus himself. He wins every time.</li>
<li>Light is so fast, because it tries to escape Chuck Norris (but that obviously fails)</li>
<li>The average room bears 73658 ways for Chuck Norris to kill you, including just the room itself.</li>
</filter‑list>
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 21/28
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 22/28
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 23/28
It's already in your browser.
Sorta.
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 24/28
It's already in your browser.
Sorta.
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 25/28
Browser support
Source: are-we-componentized-yet, captured 03.05.14
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 26/28
Useful stuff
Polyfill & frameworks
Polymer
X-Tags
Try it
Brick
CustomElements.io
Mozilla AppMaker
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 27/28
Thank you!
Questions?
Slides: avgp.github.io/futurejs2014
@geekonaut
Blog @ ox86.tumblr.com
Thx to Centralway!
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 28/28

Más contenido relacionado

La actualidad más candente

Plone 6 / Volto Dexterity Content Types - Schema & Layout
Plone 6 / Volto Dexterity Content Types - Schema & LayoutPlone 6 / Volto Dexterity Content Types - Schema & Layout
Plone 6 / Volto Dexterity Content Types - Schema & LayoutAlin Voinea
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentAizat Faiz
 
Introduction to rg\injection
Introduction to rg\injectionIntroduction to rg\injection
Introduction to rg\injectionBastian Hofmann
 
How to build testable UIs
How to build testable UIsHow to build testable UIs
How to build testable UIsShi Ling Tai
 
How to create OpenSocial Apps in 45 minutes
How to create OpenSocial Apps in 45 minutesHow to create OpenSocial Apps in 45 minutes
How to create OpenSocial Apps in 45 minutesBastian Hofmann
 
J Query - Your First Steps
J Query - Your First StepsJ Query - Your First Steps
J Query - Your First StepsBronson Quick
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsLuís Bastião Silva
 
Story Driven Development With Cucumber
Story Driven Development With CucumberStory Driven Development With Cucumber
Story Driven Development With CucumberSean Cribbs
 
Spa, isomorphic and back to the server our journey with js @ frontend con po...
Spa, isomorphic and back to the server  our journey with js @ frontend con po...Spa, isomorphic and back to the server  our journey with js @ frontend con po...
Spa, isomorphic and back to the server our journey with js @ frontend con po...Alessandro Nadalin
 
Magento 2 Community Project - Moving from LESS to SASS
Magento 2 Community Project - Moving from LESS to SASSMagento 2 Community Project - Moving from LESS to SASS
Magento 2 Community Project - Moving from LESS to SASSBartek Igielski
 
Web Components: Web back to future.
Web Components: Web back to future.Web Components: Web back to future.
Web Components: Web back to future.GlobalLogic Ukraine
 
BDD - Writing better scenario
BDD - Writing better scenarioBDD - Writing better scenario
BDD - Writing better scenarioArnauld Loyer
 
Front-end Automated Testing
Front-end Automated TestingFront-end Automated Testing
Front-end Automated TestingRuben Teijeiro
 
Integrating WordPress With Web APIs
Integrating WordPress With Web APIsIntegrating WordPress With Web APIs
Integrating WordPress With Web APIsrandyhoyt
 

La actualidad más candente (19)

Plone 6 / Volto Dexterity Content Types - Schema & Layout
Plone 6 / Volto Dexterity Content Types - Schema & LayoutPlone 6 / Volto Dexterity Content Types - Schema & Layout
Plone 6 / Volto Dexterity Content Types - Schema & Layout
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin Development
 
Oscon 20080724
Oscon 20080724Oscon 20080724
Oscon 20080724
 
Introduction to rg\injection
Introduction to rg\injectionIntroduction to rg\injection
Introduction to rg\injection
 
How to build testable UIs
How to build testable UIsHow to build testable UIs
How to build testable UIs
 
How to create OpenSocial Apps in 45 minutes
How to create OpenSocial Apps in 45 minutesHow to create OpenSocial Apps in 45 minutes
How to create OpenSocial Apps in 45 minutes
 
J Query - Your First Steps
J Query - Your First StepsJ Query - Your First Steps
J Query - Your First Steps
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.js
 
Story Driven Development With Cucumber
Story Driven Development With CucumberStory Driven Development With Cucumber
Story Driven Development With Cucumber
 
Spa, isomorphic and back to the server our journey with js @ frontend con po...
Spa, isomorphic and back to the server  our journey with js @ frontend con po...Spa, isomorphic and back to the server  our journey with js @ frontend con po...
Spa, isomorphic and back to the server our journey with js @ frontend con po...
 
Fast by Default
Fast by DefaultFast by Default
Fast by Default
 
Magento 2 Community Project - Moving from LESS to SASS
Magento 2 Community Project - Moving from LESS to SASSMagento 2 Community Project - Moving from LESS to SASS
Magento 2 Community Project - Moving from LESS to SASS
 
EPiServer Web Parts
EPiServer Web PartsEPiServer Web Parts
EPiServer Web Parts
 
Web Components: Web back to future.
Web Components: Web back to future.Web Components: Web back to future.
Web Components: Web back to future.
 
BDD - Writing better scenario
BDD - Writing better scenarioBDD - Writing better scenario
BDD - Writing better scenario
 
Front-end Automated Testing
Front-end Automated TestingFront-end Automated Testing
Front-end Automated Testing
 
Routes
RoutesRoutes
Routes
 
Banquet 51
Banquet 51Banquet 51
Banquet 51
 
Integrating WordPress With Web APIs
Integrating WordPress With Web APIsIntegrating WordPress With Web APIs
Integrating WordPress With Web APIs
 

Destacado

evolucion de la tecnologia
evolucion de la tecnologiaevolucion de la tecnologia
evolucion de la tecnologiaduvan1234
 
Mobile app development: Going hybrid
Mobile app development: Going hybridMobile app development: Going hybrid
Mobile app development: Going hybridMartin Naumann
 
My periodic table project
My periodic table projectMy periodic table project
My periodic table projectMatthew_Och
 
Characterization of a dielectric barrier discharge (DBD) for waste gas treatment
Characterization of a dielectric barrier discharge (DBD) for waste gas treatmentCharacterization of a dielectric barrier discharge (DBD) for waste gas treatment
Characterization of a dielectric barrier discharge (DBD) for waste gas treatmentDevansh Sharma
 
Air Quality Monitoring in Stuttgart
Air Quality Monitoring in StuttgartAir Quality Monitoring in Stuttgart
Air Quality Monitoring in StuttgartDevansh Sharma
 

Destacado (7)

evolucion de la tecnologia
evolucion de la tecnologiaevolucion de la tecnologia
evolucion de la tecnologia
 
Imperialism
ImperialismImperialism
Imperialism
 
The future is hybrid
The future is hybridThe future is hybrid
The future is hybrid
 
Mobile app development: Going hybrid
Mobile app development: Going hybridMobile app development: Going hybrid
Mobile app development: Going hybrid
 
My periodic table project
My periodic table projectMy periodic table project
My periodic table project
 
Characterization of a dielectric barrier discharge (DBD) for waste gas treatment
Characterization of a dielectric barrier discharge (DBD) for waste gas treatmentCharacterization of a dielectric barrier discharge (DBD) for waste gas treatment
Characterization of a dielectric barrier discharge (DBD) for waste gas treatment
 
Air Quality Monitoring in Stuttgart
Air Quality Monitoring in StuttgartAir Quality Monitoring in Stuttgart
Air Quality Monitoring in Stuttgart
 

Similar a Future js - A whirlwind tour of web components

Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Matt Raible
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Matt Raible
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017Matt Raible
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVCMaarten Balliauw
 
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Matt Raible
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightPeter Gfader
 
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?Tom Hombergs
 
Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019Matt Raible
 
Vuejs for Angular developers
Vuejs for Angular developersVuejs for Angular developers
Vuejs for Angular developersMikhail Kuznetcov
 
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp VictoriaWidgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp VictoriaJeff Richards
 
Mobile Web App development multiplatform using phonegap-cordova
Mobile Web App development multiplatform using phonegap-cordovaMobile Web App development multiplatform using phonegap-cordova
Mobile Web App development multiplatform using phonegap-cordovaKhirulnizam Abd Rahman
 
ASP.NET MVC introduction
ASP.NET MVC introductionASP.NET MVC introduction
ASP.NET MVC introductionTomi Juhola
 
Introduction To ASP.NET MVC
Introduction To ASP.NET MVCIntroduction To ASP.NET MVC
Introduction To ASP.NET MVCAlan Dean
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?Andy Davies
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTimothy Oxley
 
Rails 3 / Devise / Oauth2 / Mongoid: Installation Guide
Rails 3 / Devise / Oauth2 / Mongoid: Installation GuideRails 3 / Devise / Oauth2 / Mongoid: Installation Guide
Rails 3 / Devise / Oauth2 / Mongoid: Installation GuideSteven Evatt
 
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon
 

Similar a Future js - A whirlwind tour of web components (20)

Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and Silverlight
 
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?
 
Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019
 
Vuejs for Angular developers
Vuejs for Angular developersVuejs for Angular developers
Vuejs for Angular developers
 
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp VictoriaWidgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
 
Creating a New iSites Tool
Creating a New iSites ToolCreating a New iSites Tool
Creating a New iSites Tool
 
HTML5 Intro
HTML5 IntroHTML5 Intro
HTML5 Intro
 
Mobile Web App development multiplatform using phonegap-cordova
Mobile Web App development multiplatform using phonegap-cordovaMobile Web App development multiplatform using phonegap-cordova
Mobile Web App development multiplatform using phonegap-cordova
 
Killer page load performance
Killer page load performanceKiller page load performance
Killer page load performance
 
ASP.NET MVC introduction
ASP.NET MVC introductionASP.NET MVC introduction
ASP.NET MVC introduction
 
Introduction To ASP.NET MVC
Introduction To ASP.NET MVCIntroduction To ASP.NET MVC
Introduction To ASP.NET MVC
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
 
Rails 3 / Devise / Oauth2 / Mongoid: Installation Guide
Rails 3 / Devise / Oauth2 / Mongoid: Installation GuideRails 3 / Devise / Oauth2 / Mongoid: Installation Guide
Rails 3 / Devise / Oauth2 / Mongoid: Installation Guide
 
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScript
 

Último

Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 

Último (12)

Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 

Future js - A whirlwind tour of web components

  • 1. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 1/28 Web components A whirlwind tour
  • 2. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 2/28 ¡Hola!
  • 3. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 3/28 What I do Centralway @geekonaut
  • 4. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 4/28 I am from Zurich Which isn't as boring as you may think...
  • 5. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 5/28 ...take that, Winter!
  • 6. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 6/28 Buggy method, tho
  • 7. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 7/28 Anyway...
  • 8. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 8/28 Let's talk about Web components Image CC-BY-SA 2.0 by Alan Chia, Source
  • 9. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 9/28 Let's talk about HTML Lego ad from 1978
  • 10. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 10/28 We need to move forward quickly vs
  • 11. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 11/28 A sample: Filterable list <div class="filterList"> <label for="filterTerm">Search for: </label> <input id="filterTerm"> <ul> <li>Chuck Norris doesn't call the wrong number. You answer the wrong phone.</li> <li>Chuck Norris has been to Mars; that's why there are no signs of life.</li> <li>Chuck Norris refers to himself in fourth person.?</li> <li>Chuck Norris once leaned against a tower in Pisa, Italy.</li> <li>To keep is his mind sharp Chuck Norris plays Tic‑Tac‑Toe versus himself. He wins every time.</li> <li>Light is so fast, because it tries to escape Chuck Norris (but that obviously fails)</li> <li>The average room bears 73658 ways for Chuck Norris to kill you, including just the room itself.</li> </ul> </div> <script> document.getElementById("filterTerm").addEventListener("keyup", function() { var items = document.querySelectorAll(".filterList li");
  • 12. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 12/28 How to go on from here? 1. Keep it a Javascript hack 2. Try to implement it directly in the browser's codebases 3. Try to get it standardized
  • 13. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 13/28 How to go on from here? 1. Keep it a Javascript hack 2. Try to implement it directly in the browser's codebases 3. Try to get it standardized
  • 14. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 14/28 But then again... Source: @stevefaulkner
  • 15. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 15/28 Web components Standards: Template element Shadow DOM Custom elements HTML imports Go read the intro here
  • 16. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 16/28 Build new HTML elements using HTML, CSS & Javascript
  • 17. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 17/28 Template elements <template> <script> console.log("Hi!"); </script> <h1></h1> </template> <button id="add">Make a headline</button> <script> document.getElementById("add").addEventListener("click", function() { var tplContent = document.querySelector("template").content; tplContent.querySelector("h1").textContent = window.prompt("Headline"); document.body.appendChild(tplContent.cloneNode(true)); }); </script>
  • 18. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 18/28 Shadow DOM <template> <script> console.log("Hi!"); </script> <h1></h1> </template> <button id="add">Make a headline</button> <button id="test">Test for headlines</button> <script> document.getElementById("add").addEventListener("click", function() { var tplContent = document.querySelector("template").content.cloneNode(true); tplContent.querySelector("h1").textContent = window.prompt("Headline"); var container = document.createElement("div");
  • 19. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 19/28 Custom elements <template> <script> console.log("Hi."); </script> <h1></h1> </template> <button id="add">Make a headline</button> <button id="test">Test for headlines</button> <script> var elemPrototype = Object.create(HTMLElement.prototype); elemPrototype.createdCallback = function() { console.log("Created element"); this.root = this.createShadowRoot();
  • 20. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 20/28 HTML imports <link rel="import" href="filterlist.html"> <filter‑list> <li>Chuck Norris doesn't call the wrong number. You answer the wrong phone.</li> <li>Chuck Norris has been to Mars; that's why there are no signs of life.</li> <li>Chuck Norris refers to himself in fourth person.?</li> <li>Chuck Norris once leaned against a tower in Pisa, Italy.</li> <li>To keep is his mind sharp Chuck Norris plays Tic‑Tac‑Toe versus himself. He wins every time.</li> <li>Light is so fast, because it tries to escape Chuck Norris (but that obviously fails)</li> <li>The average room bears 73658 ways for Chuck Norris to kill you, including just the room itself.</li> </filter‑list>
  • 21. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 21/28
  • 22. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 22/28
  • 23. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 23/28 It's already in your browser. Sorta.
  • 24. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 24/28 It's already in your browser. Sorta.
  • 25. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 25/28 Browser support Source: are-we-componentized-yet, captured 03.05.14
  • 26. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 26/28 Useful stuff Polyfill & frameworks Polymer X-Tags Try it Brick CustomElements.io Mozilla AppMaker
  • 27. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 27/28 Thank you! Questions? Slides: avgp.github.io/futurejs2014 @geekonaut Blog @ ox86.tumblr.com Thx to Centralway!
  • 28. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 28/28