Implementation Details

Why a Component Library?

Previously this was packaged into one single component, with multiple child components. So, the application exported a single component called IIIFPlayer with the other components as its children. The issue we faced with this was that, one couldn't simply use the player itself without bringing in the other child components into their application. Hence, the application was re-structured into a component library. So that, it exports multiple components, which can be imported into a host application as required. It gives the user the choice to only import the components they need, as well the liberty to place these components according to their preferences on the web page.

Technology

ReactJS

This component library is written using ReactJS, a free and open-source front-end JavaScript library for building user interfaces and UI components. One of the main reasons for using ReactJS is its use of virtual DOM when re-rendering the page, which makes the process fast and efficient.

VideoJS

The IIIFPalayer component uses VideoJS underneath the ReactJS component. VideoJS is an open source HTML5 player framework, made available via NPM. It exports an HTML5 player with basic player functionality. There is a lot of plugins out there, that can be integrated via NPM to add additional functionality to the basic player. And VideoJS is designed in a way, that it makes it easier build custom components and integrate them into the player.

State Management

State management provides a single source of truth and helps the components to communicat, with each other. The most common way to implement this is by using React Redux.

Since one of the goals of this component library was to make it as light-weight as possible, and one step towards achieving that was to use third party libraries as less as possible. And recently React Contexts were introduced, which also provides mechanism to share state between components even when they are not directly connected. The important thing is this is built into ReactJS, hence do not require a third-party library.

And with its ability to trigger a re-render on updates, it was very feasible to replace Redux’s functionality with contexts. Once these consuming components are wrapped under a context provider/providers, the consumers can access and update the data (i.e. state) in the context, which acts as the single source of truth. And the subscribing consumers will re-render when state changes in the context. One other advantage is that, this reduces complex code considerably making it easier to understand the code and maintain.