Web Components integration in BioJS


The new Web Components standards are a perfect fit for BioJS. They solve many of the major challenges that BioJS components face in a natural way and what is more important, in a native way. Both projects share the same design principles and philosophy.

The more exciting features that Web Components offers to the development of re-usable visual components in general and BioJS in particular are:

  • Interoperability: Sharing components independent of the UI framework of choice.
  • Declarative interface of the components: Custom elements allow a clean and easy way of using your component.
  • Shadow DOM allows true encapsulation of the BioJS components, one of the most critical features in the development of visual components. In combination with HTML templates gives a powerful tool to create them.
  • Unified and homogenic way to create custom elements, templates, component communication (via Polymer) and defining a component API.


In a first phase the student would need to explore what is the best strategy to introduce web components in BioJS. There are several aspects to have in mind while during this phase:

  • BioJS already has a significant amount of components registered (130 at the time of writing; Fig. 1) and backwards compatibility is a concern. Ideally BioJS should support components written both using web components standards and not.
  • The Web Components specifications is still a moving target. Significant parts of their APIs haven’t been agreed yet between different browser vendors. This imposes an overhead in maintaining any adopted solution.
  • Polymer is the most matured library built on top of Web Components to date (released version 1 in 2015) and the only one that can be considered production ready. It also provides a set of polyfills that leverages the use of Web Components in current browsers. As an extra benefit it offers an abstraction layer over web components standards making it an easier to target than the unstable specifications.

Once defined the best strategy we will need to implement the needed changes in the current registry to better support web components.

One of the main features of BioJS is the definition of gold standards in component development. Documenting how to use Web Components in the context of BioJS and helping to define these gold standards are also an important part of the project.

Fig. 1: Screenshot of the BioJS registry


  • Web components specifications are still a “moving target”. Any development using their APIs will need active and frequent maintenance over time. This would be alleviated if Polymer is used.
  • Any new technology adopted by BioJS will need the adoption of the developers contributing to BioJS with new components. Facilitating this adoption by writing documentation, participating in workshops and helping component developers will be also required.
  • Supporting live examples in the registry may also be a challenge

Involved toolkits or projects

Polymer may be a requirement for the project.

Needed skills

  • Solid programming skills in JavaScript is required
  • Experience or interest in learning Web Components principles is also desired
  • Working experience with Polymer is a plus.


Miguel Pignatelli (CTTV-EBI) and Leyla García (Uniprot-EBI)