Have we got news for you!

Highlight: moving up the stack

Published: 15 July 2019

Martin Gay, Senior Software Developer at Highlight looks at some recent changes to our front-end framework

Highlight’s development team recently embarked upon a challenge to update some of our web tech stack. For the past 5 years, we’ve been using KnockoutJS to deliver web components to the browser. This has served us well and technically done the job, however, other frameworks that could give us performance improvements have entered the scene.

We looked at the three most popular frameworks: Angular, React and VueJS.

Issues under consideration were:

  • Popularity in the developer community
  • Adoption in business environments
  • Richness of functionality
  • How well it would integrate into our current source base
  • Time constraints
  • Varying levels of experience in the team

The easiest points to initially negotiate were popularity and adoption. A simple ‘Google Trends’ search in combination with the results of our latest Stack Overflow survey, showed some interesting results. KnockoutJS came fourth, VueJS was not well adopted despite positive feedback from developers and Angular and React were the front runners by far. At this point, we discarded VueJS.

Framework Popularity

Richness in functionality and integration were next up for debate. Both Angular and React had all of the required abilities to produce web components.

We had some experience of Angular within the team and discussed the prescriptive nature of the framework. If an entire application is controlled by Angular, a complete system that not only provided web components, but HTTP, routing, and the build process, it would be very attractive. However, Angular almost does too much for us, and getting Angular and KnockoutJS to work together, in our specific case just wouldn't be as productive as the alternative.

Despite the team having very little knowledge of React, articles online demonstrated easy integration with KnockoutJS, such that it allowed both technologies to live side-by-side. Being the most popular framework and potentially the easiest to integrate with our existing source base we decided to pursue React further.

React Code

We agreed some technical objectives before getting down to work and writing some code. Broadly, these were:

  • Can we integrate into the build pipeline?
  • Can we add a React web component under a KnockoutJS web component and vice versa?

We weren’t 100% sure this could be achieved or how long it would take. To our surprise, within an afternoon the build pipeline was solved, and we managed to write a ‘hello world’ React component which sat on the Home page of Highlight. The initial signs were looking good.

Over the next few days we:

  • Completed training courses in React
  • Mapped scenarios to test React in Highlight
  • Re-wrote the Line Health Events dialog
  • Looked at best practises
  • Wrote up standards we should follow

In conclusion, we’re happy with React; its technology, popularity, integration and support within the community. We have a bit of a learning curve, but we’ve set a time period where we will bed the framework into our source base. In our September release, the Terms and Conditions dialog will be the first React web component in Highlight. Moving forward, all new web components will be written using React and we’ll slowly replace KnockoutJS.

Terms and Conditions