going native with html5 web components

Going Native with HTML5Web Components

The Current State of Web Development

My 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 get make our lives easier as developers and get the functionality we need to make robust web apps.

Why Would You Do This?!

These are the issues these tools are trying to solve in one way or another.

1. Undescriptive Markup2. Style Conflicts3. No Templates4. No Bundling5. No Standard

Let’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 a thing? 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. More hacks, more hacks, more hacks.

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.

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 this is the state of things is a hot mess and that skill sets may be appropriately disparate.

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 reviewed 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.

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

Let’s take a quick look at each of these.

Sounds Hot… What’s included?

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 add 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?