Going Native with HTML5Web Components

Hi, I’m James York● I’m a developer / instructor at Grand Circus Detroit● I write HTML5 apps and teach JavaScript bootcamps● I work primarily with AngularJS but am interested in new

techGet in touch!

@kroysemajjames@grandcircus.co

The Current State of Web Development

My Old Team’s JavaScript Tech Stack

The current native toolset has not kept pace with the needs of modern web applications. As a result, we have come to rely on libraries and frameworks to make our lives easier as developers and get the functionality we need to make robust web applications.

Why Would You Do This?!

These are the issues these tools are trying to solve in one way or another and some of the current tools we use to solve them.

1. Undescriptive Markup 2. Style Conflicts 3. No Templates4. No Bundling 5. No StandardLet’s look at each of these individually

So What Are These problems?

HTML kind of sucks. What’s worse is the way most developers use HTML.

Even though there are more semantic elements available in HTML5, browser compatibility and lazy developers mean they usually aren’t taken advantage of.

There are workarounds such as class names and IDs but wouldn’t it be nice to just have whatever descriptive name you wanted for something? Oh yeah lots of frameworks have that, problem solved right? Bzzzt! No. We’ll talk about why in a second.

Undescriptive Markup

Undescriptive Markup

CSS kind of sucks. What’s worse is the way most developers use CSS.

When things live on the same page, you have to strike a balance between creating a unified look and reducing duplication among styles and selectors so they don’t conflict.

Again, we have workarounds like highly specific selectors or hacks like !important. But these can cause performance impacts and you really shouldn’t use !important.

Style Conflicts

There is currently no way to import HTML into a page without it immediately being parsed and placed somewhere on the document.

You guessed it, there’s a workaround for that. You can import script with foreign types like ‘text/html’ or absolutely position them way off the page. There are whole libraries built around templating and most of the major frameworks have some kind of templating solution.

No Templates

Once you start using a framework or tool, you have to import all of its assets separately. Consider Bootstrap. You need at least 3 separate references (JQuery, bootstrap.js, bootstrap.css) just to start using Bootstrap’s components. Couldn’t we make this a one-liner like a Java import or a C++ #include

You can use a package manager like Bower but that creates more overhead, more dependencies to manage who may have dependencies of their own. Now what do you do if those nested dependencies start to conflict or get out of sync (and they will).

No Bundling

This is similar to all of the other previous reasons but all of the hacky or framework-based solutions to the above problems are non-standardized. The skills you build learning one framework do not translate to any other framework.

No Standard

!== !==

Unfortunately the answer right now is, ‘grin and bear it.’ Modern web development jobs come with a kind of understanding that the state of things is a hot mess and that skill sets may be appropriately disparate. Most front end jobs ask for experience with a specific framework or ‘equivalent experience with another JS framework’. What does that mean?

So what’s a web dev to do?

But What If…?We could turn this…

But What If…?Into this...

But What If…?or maybe more realistically...

But What If…?or maybe even more realistically...

What are Web ComponentsWeb Components are a set of standards currently being produced by the W3C that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements.-via wikipedia

So there are a number of features provided by web components that address many of these concerns.

● Native Templates● Custom Elements● Shadow DOM● HTML Imports

We will look at each of these in turn

Sounds Hot… What’s included?

Isn’t there a framework for this?

Actually yes there are two (at least).

Google Polymer

X-tag by Mozilla

Isn’t there a framework for this?

Both Polymer and X-tag offer abstractions and useful extensions to the native web component standard.

So why not just skip straight to learning them?

“I’m a jQuery Developer”

The same reason you should learn

JavaScript before you learn

jQuery

I believe the key to truly understanding a library or framework is to understand what it’s doing for you underneath all the magic

Besides, what if something breaks?

Know the foundations

HTML5 adds the ability to add inert HTML templates to the page without them being parsed and displayed to the DOM.

The templates will remain inert until they are cloned and inserted into the DOM. All this stuff is easier to show than talk about. So let’s look at a ...

DEMO!

Templates

HTML5 also adds the ability to create custom HTML Element tags.

This works similarly to the way it works in a lot of frameworks such as Angular directives or Ember components. Again, show don’t tell...

DEMO!

Custom Elements

The Shadow DOM solves the issue of encapsulation on web pages. It has a spooky name but it’s actually something we’ve had in our browsers for a while and didn’t know it. Don’t believe me?

DEMO!

Shadow DOM

Now not only do we have things like the video and range input tags, we can now define our own Shadow DOMs and encapsulate our own mini-DOMs on the pages. This is the deepest well in the new web components spec so we will only hit this at the highest level. Even so...

DEMO!

Shadow DOM - A New Hope

Web components also make it easy to share other external web components as a one-line import. Guess what time it is...

DEMO!

HTML Imports

Awesome, When Can I Use them?Native browser support is still pretty terrible except on Chrome and Opera. Luckily, you can pretty much polyfill everything else all the way back to IE 10...

Awesome, When Can I Use them?

Great, how do I get some of that?

One way to polyfill all of the web components functionality is through webcomponents.js

This is a javascript library which includes polyfills for all of the native web components features we’ve just looked at.

Check out webcomponents.js on github for more

That all seems really hard… :(Toughen up, buttercup! Nothing worth doing is easy.

That all seems really hard… :(But you may be right. Vanilla JS in the browser is kind of a headache and it’s still missing some stuff that would be nice like data-binding and easier dynamic templating.

Once you’re comfortable with the basics I’d suggest looking into a framework like Google Polymer or X-tag.

What’s important is to know the underpinning technology when someone goes wrong (it will, I promise).

Now what?

Now you know enough to try some stuff out and make something cool!

A few more resources:● HTML5 Rocks● Component Kitchen

Thanks! (Q & A, if there’s time)

I was James York

email: james@grandcircus.coTwitter: @kroysemajgithub: kroysemaj

...you get the idea