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