Ricky Browning on Jan 14, 2016 10:16:02 AM

Web Components: The Future of the Web

RickyBrowningPhoto.jpgThere has been a lot of brouhaha in the software development community about Web Components and the huge potential applications with the modern web. At NaviNet, we have kept a very close eye on Web Components as we continuously evolve our user interface (UI). Both our UI and Research team have had hands on experience with Web Components and in particular the Polymer library , so we would like to share some of our experiences. In this first post of our two-part series on Web Components, we’ll cover:

  1. What are Web Components?
  2. What technologies make up Web Components?

What are Web Components?

Web Components are a collection of new web standards/technologies that will allow us (developers) to create reusable UI components. The proposed Web Component standards are still largely in draft form, but this doesn't mean they can't be used.  Google is a large driving force behind these technologies and Chrome even supports all of the standards. Besides Google, adoption of Web Components by other browsers is at different levels of maturity. Check out WebComponents.org to see a matrix at the current adoption levels. The expectation is that most browsers will implement Custom Elements, HTML Imports, Templates and Shadow DOM soon but Web Components are a future tech so it’s worth some serious thought if you have a 'generous' browser support policy.

WebComponentslogo_512x512.pngOne of the big selling points of Web Components is the ability to build re-usable components. The Polymer library of components shows which can all be used for many different purposes. At NaviNet, this has opened the door to embeddable widgets within our platform that has aided and improved integrations with our partners.  When making reusable Web Components, there are four new technologies used:

  1. HTML Templates
  2. Custom Elements
  3. Shadow DOM
  4. HTML Imports

1.  HTML Templates

templates_512x512.pngTemplates aren't a new concept and a number of solutions that already exist including Handlebars.js  and jsRender.  Many of these solutions use `<script>` tags to store their templates which isn't ideal. However, Web Components introduces the new `<template>` tag which can be used to store an HTML template. A `<template>` is never rendered on the screen so the user won't see it unless we use the template to populate an item. Let’s take a quick look at how to use HTML Templates. The code below defines a simple template.

We can then use our template and inject its content into a particular element:

Couple of things to note in regards to HTML templates: the `<template>` element does not provide any data binding out of the box and any `<script>`, `<img>` or `<style>` elements will be executed/fetched/applied once the template has been appended.

 

2.  Custom Elements

custom-elements_128x128.pngThe ability to define a custom element allows us to create any element we need that the standard HTML elements don't provide. This should lead to much nicer mark ups as we aren't relying on `<div>` elements to give us the structure that we need (No more div soup!). With custom elements we can:

  • Create new elements that meet our needs
  • Extend existing element functionality
  • Group similar functionality under the same element

When creating a Custom Element the name you give to that element must have at least one hyphen (-) for it to be valid.

 

When extending built in HTML elements use the `is` attribute to let the browser know you want to use an extended item.

 

Group functionality

Above are some very basic examples but what about combining a custom element with the template from before? To allow us to do this there are some life cycle callbacks we can hook into.

- `createdCallback` - triggered when an instance of the element is created

- `attachedCallback` - triggered when an instance of the element is inserted into the document

- `detachedCallback` - triggered when an instance of the element is removed from the document

So we can hook into the `createdCallback` and insert our template from the example before:

 

3.  Shadow DOM

shadow-dom_512x512.pngSo far we have seen how to use HTML Templates and Custom Elements to create reusable components but they can still be affected by other aspects of the page e.g. CSS styles, JavaScript. This is where Shadow DOM comes in. Shadow DOM provides a layer of encapsulation that allows developers to create components that won't be affected by other aspects of the page. Shadow DOM must be created under a shadow root. The shadow root is contained inside a shadow host. The contents of the shadow host are not displayed, instead the shadow DOM is displayed:

 

There are no shadows without light and the light DOM is considered any DOM element that is in the original page DOM. Shadow and light can interact through `<content>` tags. These allow the contents of the shadow host to be inserted into the shadow DOM:

Let's try a more complicated example using everything we've learned so far:

 

4.  HTML Imports

html-imports_512x512.pngWe’ve covered how to create reusable UI components, but they are still made up of three main components, the HTML, the JavaScript and the CSS, which means consuming them could be a pain. HTML imports get around that by allowing us to bundle all aspects of our components together into one simple import:

This looks similar to a style sheet import except for `rel="import"`. Any `<script>` tags in the import are executed as if they have the `defer` attribute. An HTML import may also contain more HTML imports as well so that components can be composed of other components. Let's continue using the example from before except extract it out to its own HTML file. This is my-element.html.

It is important to note that  the `importDoc` variable, is set to the current executing scripts `document` which allows us to search for the template. If we just used the `document` variable we would still be accessing the original pages document and therefore would not find the template. To consume our component would be something like:

 

The Future is Now

Ok maybe not right now, but we are close.  A lot of work has been done on web components including polyfills so everyone can make use of this technology now. These technologies are certainly a step in the right direction, even if they do not yet fill all the gaps. A number of libraries have already tried to fill some of the short comings including Polymer  and x-tags  but that’s for another post.

Join us for Part 2 when we'll discuss the hands on experience we have had with Polymer for work during our recent Customer Forum and we'll talk about what we enjoyed and some of the challenges we found.

*Web Component logos curtesy of WebComponents.org.

Like this post? Want to read more like it?

Subscribe Now

 

Tags: Standards

Subscribe to Blog

NaviNet, part of NantHealth, is America’s largest interactive healthcare network. Our flagship multi-payer provider website is built on deep payer integration and the innovative use of technology to deliver real bottom-line value for both payers and providers.