WARNINGthis is a tech talk

@yaviner

Building BlocksWeb Components and the Future of HTML

@yaviner

aka cool stuff you should be thinking about

Introductions…briefly

Rutgers Alum (’14, RBS)

Some startups, hackathons

UI Developer for iCIMS

Likes geeky things, whiteboards

@yaviner

Enough of that.

@yaviner

We’re going to talk about web components.

@yaviner

SOME WEB HISTORYGive me some context, bro

@yaviner

@yaviner

The horror!

Bloated HTML

Difficult to read, maintain

Wrong-semantic meaning (without even mentioning accessibility…)

@yaviner

But it kind of made sense… at the time

Finicky browsers

Immature standards

We needed predictable results

@yaviner

SO WHAT DID WE DO ABOUT IT?

“but I’ve never seen a table based design” – You, 2014

@yaviner

<div>

@yaviner

<span>

@yaviner

CSS

@yaviner

CSS3

@yaviner

@yaviner

But that was like a decade of tables, what gives?

HTML’s authors envisioned an Internet of information, not an Internet of entertainment and interactivity. CSS wasn’t supported in most

browsers until around version 5.

@yaviner

We (developers, browsers) realized that content and

presentation were meant to be separate.

@yaviner

HTML is most appropriate as a declarative language

@yaviner

HTML5 Introduced:

<article> - A block of grouped, related information.

<section> - Logical separation of groups of information.

<video> - A video! This needs playback!

@yaviner

If we commoditize this idea and apply it broadly, we can refer to these elements as components.

@yaviner

What if I need to build an app?

@yaviner

Current HTML for a Hangout(mmm…soupy)

@yaviner

<div> is a limited-meaning tag. Without an ID, it’s nothing but a visual separator.

@yaviner

What if we could write it like this?

@yaviner@yaviner

@yaviner

What if our HTML was just a series of components?

@yaviner

The idea isn’t new.

@yaviner

@yaviner

All built on the principles of web components.

@yaviner

But frameworks bring costs, and so their plugins are not “free” like “<input type=“date”> is free.

@yaviner

The most famous client side projects are fated to die.

- Zeno Rocha

@yaviner

Just as CSS heralded in the era of “Web 2.0”, these frameworks have been nudging us toward native

web components for years.

@yaviner

So what are web components?

@yaviner

They empower us to natively define and extend HTML.

@yaviner

And share it with others.

@yaviner

HOW?

@yaviner

Shadow DOM -> Encapsulation

@yaviner

HTML Templates -> Inert, Re-usable DOM.

@yaviner

Custom Elements -> Semantics, Extensions

@yaviner

HTML Imports -> Import an entire component with one line

@yaviner

All of this is regular DOM.

@yaviner

SOME EXAMPLES

@yaviner

What you really wanted

<video is=“camera”>

eduardolundgren.github.io/video-camera-element@yaviner

<table is=“datatable”>

@yaviner

<youtube-video id=“dQw4w9WgXcQ”>

@yaviner

<google-maps>

eduardolundgren.github.io/google-maps-element@yaviner

<twitter-button>

zenorocha.github.io/twitter-button@yaviner

I heard you like frameworks

@yaviner

No, I’m not including xzibit here

Polymer is an opinionated framework on top of Web Components.It’s backing muscle includes Google and others.

@yaviner

X-Tags is another cool one

The brains? Mozilla

@yaviner

@yaviner

@yaviner

But the ultimate goal of these frameworks is to become redundant.

@yaviner

The most famous client side projects are fated to die.

- Zeno Rocha

@yaviner

What about <insert-existing-JS-framework>?

@yaviner

Angular and Ember will both support (and export!) native web components in their next iteration.

@yaviner

Where can I learn more?

@yaviner

Sites:webcomponents.orgpolymer-project.org

x-tags.orgcustomelements.io

People:Eric Bidelman @ebidel

Zeno Rocha @zenorocha

@yaviner

GO FORTH AND BUILD

@yaviner

Thank you!Questions?

@yaviner