Building ReactJS web applications with SDL Tridion Sites

At DEPT®, we have a huge amount of experience building global, multilingual websites for our clients and we always like to review our processes to ensure we’re building things in the best way possible.

As many people who work with enterprise clients know, it’s really difficult to use the latest and greatest technologies and methodologies and integrate them well with enterprise CMS’s. It often takes a fair bit of internal investment from the development team to investigate new technologies, POC different approaches, and work to get these integrated in a stable way into both the products and processes we use.

The back story

When it comes to our web application builds, we’ve been running with a well-tested and honed process for our front end implementations for a number of years. Although we’ve been adding incremental improvements, the underlying technologies have remained the same:

Although this has always worked well, with the huge growth in SPA’s and JavaScript frameworks we were keen to see how we could get these integrated into our process, to ensure we weren’t falling behind the ‘curve’.

SDL’s introduction of its micro services platform, in particular the Content Service, as well as the rise in use of the DXA (Digital Experience Accelerator) framework in our builds, has given us a perfect opportunity to review and improve our build processes.

Issues with the handlebars.Js approach

While this approach has worked well for us over the years, we’ve always found small issues that we couldn’t shake off, no matter how we changed and improved the process.

The biggest issues with the approach are the duplication of effort and good old human error.

Building a static HTML site to demo to a client is an excellent way of showing our clients how the build is progressing, getting early access for our QA team to spot any issues at the HTML build stage, and to simply bring the design to life.

However, there will always be the need to take the static HTML build and integrate it into SDL Tridion Sites; a manual process which always risks introducing human error, as well as incompatibilities between the build and the content model in use.

How does ReactJS work with sdl tridion sites?

ReactJS is a view engine used as a clientside framework. It is written in JavaScript and has been developed by the team at Facebook.

ReactJS relies on content being supplied by defined APIs in order to generate the full page. For this, we are able to use the SDL Content Service micro service which exists in SDL (Tridion) Web 8 implementations and above.

By relying on our standard DXA implementation approach with DD4T templating in SDL Tridion, we are able to easily surface content from the CMS straight into the web application front-end, without the need for middleware of complex logic.

How does using ReactJS help?

Using ReactJS templating has allowed us to remove the need for a separate HTML demo site. Although the demo site still exists, our process is to now build the demo site using ReactJS templating, which talks directly to the SDL Content Service, meaning the demo site is built using real, curated SDL Tridion Sites content.

In addition, we’ve been able to utilise React.Net to build and run the ReactJS components as views from our controllers within the application code, which allows us to share the exact same code used in both the demo site and the application build; no more integration tasks between front end and back end and no more human error!