Web components - a whirlwind tour

50 %
50 %
Information about Web components - a whirlwind tour

Published on June 27, 2014

Author: martinnaumann

Source: slideshare.net

Web components A whirlwind tour

Ohai I'm @g33konaut These slides: bit.ly/webcomponents-intro Ebook: leanpub.com/webcomponents geekonaut.de github.com/avgp

Let's talk about HTML Lego ad from 1978

HTML is easy

1991: HTML 1.0 TITLE ISINDEX ANCHOR ISINDEX PLAINTEXT LISTING P H1, H2, ..., H6 ADDRESS UL, MENU, DIR

1993: HTML 2.0 + Forms + Images + Head/Body + Strict mode

1995: HTML 3.0 150 pages of specification Different browsers have their own extensions :(

1998: HTML 4.0 Three infamous modes: 1. Strict 2. Transitional 3. Frameset Tried to standardize most of the browser-specific elements

1998 - 2008 ...

The web evolved vs

The web gained power RIA, Web 2.0 and the first Smartphone Image: Spiegel

But HTML fell behind

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"); for(var i=0; i<items.length;i++) { items[i].style.display = (items[i].textContent.match(this.value) ? "block" : "none");

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

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

But then again... Source: @stevefaulkner

Let's talk about Web components Image CC-BY-SA 2.0 by Alan Chia, Source

Web components Standards: Template element Shadow DOM Custom elements HTML imports Go read the intro here

Build new HTML elements using HTML, CSS & Javascript

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>

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"); var root = container.createShadowRoot(); root.appendChild(tplContent);

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(); var tplContent = document.querySelector("template").content.cloneNode(true); this.root.appendChild(tplContent); };

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>

It's already in your browser. Sorta.

It's already in your browser. Sorta.

Browser support Test yourself: bit.ly/webcomptest Source: are-we-componentized-yet, captured 03.05.14

Useful stuff Polyfill & frameworks Polymer X-Tags Try it Brick CustomElements.io Mozilla AppMaker

Thank you! Questions? Slides: bit.ly/webcomponents-intro @g33konaut Blog @ ox86.tumblr.com

Add a comment

Related pages

Web Components: A Whirlwind Tour - YouTube

Want to watch this again later? Sign in to add this video to a playlist. A ~90 second tour of Web Components covering custom elements, templates ...
Read more

Yo Polymer – A Whirlwind Tour Of Web Component Tooling ...

A whirlwind tour of Web Components, Polymer and front-end tooling for them.
Read more

Martin Naumann - Web components - A whirlwind tour thru ...

This is a talk from Barcelona FutureJS 2014 (http://futurejs.org). Web components are an interesting set of standard proposals, promising to ...
Read more

AddyOsmani.com - A whirlwind tour of Web Components with ...

In this quick video, I walk through using Web Components with Polymer covering: custom elements, templates, Shadow DOM and HTML Imports. Note: You might ...
Read more

JSF Programming: A Whirlwind Tour - coreservlets.com

... JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MV C, RESTful Web ... Whirlwind Tour ... data tables, composite components, property ...
Read more

A Whirlwind Tour of the Microsoft. NET Framework 4

... A Whirlwind Tour of the Microsoft .NET ... enables greater reuse of applications and components. ... Tour of the Microsoft. NET Framework 4
Read more

Google I/O 2014 - Videos

Polymer: making Web Components accessible. Alice Boxhall. I hear you like realtime memes. Brian Cairns. Making money on Google Play. Brahim Elbouchikhi ...
Read more

Yo Polymer - A Whirlwind Tour Of Web Component Tooling ...

Yo Polymer - A Whirlwind Tour Of Web Component Tooling at updates.html5rocks.com ...
Read more

Home - Whirlwind

Whirlwind USA is a manufacturer of electrical equipment used by ... Search. About Us; Catalog; Support; Factory Tour; Custom Shop; News; Orders / Contact ...
Read more