Going native with html5 web components

Going Native
with HTML5
Web 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 Markup
2. Style Conflicts
3. No Templates
4. No Bundling
5. 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

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…?
or maybe more realistically...

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

What are Web Components
Web 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...

Going native with html5 web components

Recommended

More Related Content

What's hot (20)

Similar to Going native with html5 web components (20)

Recently uploaded (20)

Going native with html5 web components