3 New technologies that are changing the face of front-end web development: Part 1 – Web Components

new-technologies-that-are-changing-the-face-of-front-end-web-development-part-1–web-components

Keeping up with the latest trends in the world of web programming can be daunting – it seems as though there’s a constant stream of new standards, libraries, and techniques being blogged about and touted as the next big thing. The reality is that most of these are still under heavy development, and aren’t quite ready to be used for general purpose sites that need to be accessed by users on a variety of platforms.

However, that doesn’t mean we should all keep using the same jQuery plugins and standard CSS layouts from 2011. 2015 is the year that some of the most highly anticipated new standards will reach maturity, and will finally be ready for the mainstream. These new technologies already have wide cross-browser support, many tools and libraries, and strong developer communities.

In this series of posts I want to discuss three of these new technologies that have been gaining traction for a while, and, now that they are usable for many new web development projects, have the potential to revolutionize the way we build websites.

Part 1: Web Components

Building custom widgets that could be reused and added to any website used to be a difficult proposition. Adding these third-party widgets involved pasting in CSS and JavaScript from different sources, and often had unintended side effects on other parts of the site that could be difficult to debug.

Web components promise to change all that by allowing developers to create custom HTML elements using templates that encapsulate all the markup, styles, and logic in a way that is hidden from the rest of the CSS and JavaScript code and completely reusable.

For example, imagine a standard image slider (sometimes called a carousel) like the one pictured below:

The HTML for the slider in this example might look like this:

<div id="slider">

  <input type="radio" name="slider" id="slide1" selected="false" checked>

  <input type="radio" name="slider" id="slide2" selected="false">

  <input type="radio" name="slider" id="slide3" selected="false">

  <input type="radio" name="slider" id="slide4" selected="false">


  <div id="slides">

    <div id="overflow">

      <div class="inner">

        <img src="images/rock.jpg">
        <img src="images/grooves.jpg">
        <img src="images/arch.jpg">
        <img src="images/sunset.jpg">

      </div>

    </div>

  </div>


  <label for="slide1"></label>

  <label for="slide2"></label>

  <label for="slide3"></label>

  <label for="slide4"></label>

</div>

In addition to this markup, we would need to add a large amount of CSS to our external style sheet to get the slider working properly. Check out this fully functional demo.

With Web Components however, all this markup and CSS can be contained in a separate template file, leaving us with just our custom-defined <img-slider> tag and the import statement on our main HTML file:

<link rel="import" href="components/image_slider.html">
...
<img-slider>
  <img src="images/rock.jpg">
  <img src="images/grooves.jpg">
  <img src="images/arch.jpg">
  <img src="images/sunset.jpg">
</img-slider>

Much cleaner, isn’t it? And the best part is that this same template file can now be imported on any webpage, and the <img-slider> tag can be used without worrying about modifying the CSS files or dealing with unwanted side-effects. Check out a fully functional demo of this version, including the template syntax. The code for these examples comes from the excellent article on web components.

The code in the second example won’t run exactly as it’s displayed above, however. It requires a JavaScript library called Polymer to work properly. Polymer is a fantastic open source library from Google that abstracts away almost all of the low-level JavaScript needed to make web components work, and provides a much simpler and more intuitive experience for developers. What’s most exciting about Polymer though is the huge library of web components developed by Google and other developers that it gives you access to. Image sliders, responsive nav bars, even whole forms can be added to a page simply by importing a template and adding the custom HTML tag to the page.

The set of standards that makes up the web component spec is still working it’s way through the W3C, but already Chrome and Firefox have native support for templates. In addition, using the Polymer library will automatically give you cross-browser support for the latest versions of IE and Safari. Unfortunately, if supporting IE 8 or 9 is still a priority, web components probably aren’t the right choice for you.

Hopefully this post has inspired you to start thinking about ways you can modularize your websites into reusable components, and in the process simplify and speed up the development process. To learn more check out these excellent resources:

Photo shared from our Redpoint Education shoot. 

About the Author

Zach Bialecki is a web developer for Schoening Digital, specializing in building dynamic web apps and front end architecture. Zach is passionate about crafting elegant solutions to difficult problems using code, and is on a never-ending mission to find the perfect web framework.

Leave a comment

CONTACT
We like you already. How can we help?

Send us a note