Web app frontend research

Framework

Choosing a framework

To achieve consistency in the solutions and interfaces produced by all teams involved in the development of the UCLH Peach project our client insisted on us using Electrode.io, which is a platform running on Node.js using React, Redux and a number of other components. With Electrode, one could create universal React applications, which means that if the client would happen to have JavaScript disabled the pages can be rendered server-side and served as static content. Electrode was designed to be easily deployed to the cloud which is very convenient for Peach projects since most of them are hosted on Azure. It also handles some performance optimisations through caching and various security improvements, such as protection from cross-sits request forgery.

Unfortunately, due to the vast amount of tools incorporated into Electrode it has quite a steep learning curve, and due to very limited amount of documentation available it's hard to understand exactly how it works without having a lot of prior experience with separate elements like Babel or Redux. Additionally, it requires extensive knowledge of JavaScript and some background in transpiling of various versions of JavaScript. Since Electrode is primarily React-based, we decided to use React alone during the experimentation phase of our project. Then, having accumulated enough knowledge we'd begin implementing the whole of Electrode into our final solution.

What is React?

React[2] is a JavaScript framework that allows developers to build complex web applications using simple components, which can be used as building blocks for the interface. Additionally, React aims to optimise performance by introducing the concept of a virtual Document Object Model (DOM).[3] This means that all logic is handled using JavaScript, and then, only if necessary, elements of the actual DOM visible to the user get updated, in contrast to obsolete approach of triggering costly DOM updates on any JavaScript event.

The fact that React encourages splitting the interface into small, atomic components increases the reusability of code and hence decreases code duplication, which makes it easier to update and maintain complex applications. Additionally, React makes it very easy to test the application not only because every single component can be unit tested separately, but also because virtual DOM can be easily simulated and doesn't requir the actual DOM to be present during tests.[4] Additionally, React development is primarily based on JSX and ECMAScript 6 (ES6) syntax, which introduce a lot of useful features to traditional JavaScript such as proper class notation and modules support. Although React has a relatively steep learning curve compared to other popular frameworks such as Angular 2 it advantages vastly outweigh trade-offs associated with its usage.

Tools and languages

React development involves the usage of several tools and languages. Although React development can be done in ES5, the traditional version of JavaScript supported by all modern browsers, developing using JSX Harmony and ES6 flavours makes the code easier to read, introduces new concepts that make code shorter and easier to maintain. For example, with JSX one could add XML/HTML code directly into the JavaScript files eliminating the need for any external HTML files to server as templates.[5] Additionally, we considered TypeScript by Microsoft as one of the potential languages since it introduces explicit types and makes collaborative development easier.[6]

One trade-off of using non-standard flavours of JavaScript is that they have to be transpiled into ES5 by various compilers. Some of the most popular tools used for this purpose are Babel, Webpack, Gulp and numerous others. Electrode in particular relies on Gulp for automation of many tasks, so we decided to incorporate in our development to make the future transition to Electrode smoother.

We briefly considered Stormpath[7] as a possible solution for the user authorisation component of our application but after establishing our requirements we've agreed that most of the business logic will be leveraged by the backend API, so we moved on to research ways to develop the frontend of our application on React while fetching all of the data, including user details, from the backend API. While studying how React can work with Redux[8] (tool that introduces explicit global states into React applications and relies on pure functions), we've found various solutions that make fetching data from external APIs possible without breaking the logic used by Redux. One of such solutions is Redux Saga.[9]

Considering the sheer amount of content there is to consume when it comes to web development, we decided to incorporate new tools and knowledge into our development as we were progressing with our experiments as opposed to establishing a complete toolchain in the beginning.