The best tools for developing digital projects with ‘web components’

Digital project development and design has always shifted toward new standards over the course of time. Which is why industry professionals are always learning and training in new skills. In the new mobile era, the world of web platforms and applications changes fast. The standard that is set to dominate the digital present and future are web components, a new style that was brilliantly illustrated by developer Carlos Azaustre at BBVAOpen4U.

Web components allow web and mobile applications to be developed using small sets comprised of the usual elements: HTML, JavaScript and CSS. Each of these fragments is called a component and is independent from the rest: they are like parts of an engine. They can form a part of a whole, and separately can be used in other developments. They are reusable. They are also standardized, as they originated at Google and have the blessing of the W3C.

There are several tools that can help you get started developing with web components.

Polymer Project

Polymer is a set of lightweight libraries that allow programmers to get the most out of applications built using web components, chiefly because it allows the use of Polyfills. What are Polyfills? They are fragments of code that get new HTML5 functionalities working on all browsers. Users often don’t have the latest versions of the most popular browsers installed, whether it be Internet Explorer, Mozilla Firefox or Google Chrome. Using Polyfills means users will still enjoy the full features of a website even in older browsers.

The ultimate goal is not only to create small capsules or blocks of code comprised of HTML, Java Script and CSS that can be used on several projects at once (known as Custom Elements). Polymer also aims to support programming in code that is cleaner and easier to render on any version of any browser. Which will also eventually have a significant impact on load times for projects. 

Furthermore, Polymer includes two features that are very appealing to developers: 

– Support for HTML Imports: this allows scripts, style sheets and web sources to be loaded to an HTML document simply and in groups. This article from ‘webcomponents.org’ provides a perfect overview of how to import one HTML document within another.

For example, an HTML document called component.html may contain a number of custom elements such as a script and style sheet (CSS): 

<link rel=”stylesheet” href=”css/style.css”>

<script src=”js/script.js”></script>

This code fragment may be included in another common source HTML documents such as index.html, with the HTML Imports function:

<link rel=”import” href=”component.html”>

– Shadow DOM: Polymer also has a feature called Shady DOM, supporting the development of custom elements that can be included in the Shadow DOM, without this mixing or interfering with other parts of the code when rendered by the browser. The Shadow DOM was previously a part of the DOM that was only accessible to browser developers to establish complex components such as video and audio. Now Polymer provides some access to this encapsulated segment of the DOM within the DOM itself. A useful tutorial is available here. 

X-Tag

X-Tag is an open source JavaScript library created by Daniel Buchner, then at Mozilla and now with Microsoft, which allows the development of web components based on the W3C standard. X-Tag might be described as the Polymer that has been backed by the company now overseen by Satya Nadella.

Polymer and X-Tag are very similar, but there is one important difference. The library created by Google is compatible with features available on most modern browsers, such as Custom Elements, Shadow DOM and HTML Imports, while the X-Tag library only offers aspects related with custom elements using APIs. To include other web components features, such as Shadow DOM, developers need to use other polyfills combined with X-Tag. Why so? Because X-Tag creators believe that to build web components all you really need to use is custom elements.

To establish Custom Elements screens with X-Tag, said library offers the xtag.register() method, which probably stands out from the rest, allowing programmers to define the object content within the DOM. Here is a tutorial. 

xtag.register(‘my-element’, {
  content: function () {/*
    <p>Hello there</p>
    <div>
      <p>This is a multi-line template</p>
    </div>
  */}
});

X-Tag is compatible with all browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Chrome Android, Safari (for OS X and iOS), Opera and Edge. 

AngularJS / Ember JS / BackboneJS

At BBVAOpen4U we have specifically discussed AngularJS, EmberJS and BackboneJS. All are development frameworks or libraries in JavaScript and are based on the Model-View-Controller paradigm for developing user interfaces or front-ends. And all include aspects for creating custom elements within the DOM, such as fragments of independent code that can be reused in other applications.

The use of directives by AngularJS offered a great starting point for the web components concept. AngularJS directives allow an HTML document to be extended via the creation of the encapsulated, independent and reusable code fragments. Finally, tags with new attributes are included, which are subsequently recognized by the browser. This offers benefits such as cleaner and simplified JQuery code, as well as easier application design and development, making the process similar to building with a Meccano set.

As for EmberJS, in order to define Custom Elements a JavaScript library called Handlebars.js is used. The process is very simple. Here is a very comprehensive tutorial from the creators of EmberJS. First you create a custom element, such as a components/blog-post template. 

<script type=”text/x-handlebars” id=”components/blog-post”>
  <h1>Blog Post</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</script>

Then you take that custom component to the original HTML template: 

<h1>My Blog</h1>

{{#each post in model}}
  {{blog-post}}
{{/each}}

BackboneJS also allows independent modules to be built to provide a structure for interfaces on various projects. Marionette.js is often used to include this feature. This is a complementary development to BackboneJS, which makes for much faster use of web components. Here is a good guide to development with Marionette. 

If you want to try BBVA’s APIs, test them here.