Image for post
Image for post
Photo by laura buron on Unsplash

Introduce an opinionated react front end architecture

Abstract

  • react.js is just a view (+ some controller logic) in classical MVC

React is a library, not a framework

Its known react is just a library. If we would map it to the most known design pattern MVC then it would be the V(iew) + some ability to trigger controller actions, who can exist on the view itself.

If we add redux to the stack we usually follow the official flux architecture.

So framework wise we cover the MVC functionality and unfortunately this is still not the complete picture. To make an example this are the parts of the logic that are not mentioned in the flux architecture. The structure for the rest of logic is open for the team to decide.

  • logging logic with addition reporting to some external bug tracking tool

So we see there are many areas left out of the flux architecture, since its goal is to organise the react view part itself and not more.

In case its left undefined where all the other logic parts go, developers will randomly make their architectural decisions. In the most cases it will result in an uncoordinated architecture, not centrally handled concerns and many specific assumptions.

So what is the solution? Obviously to cover the rest of the stack and to answer the questions, that seem unclear.

After I started working with the javascript, this issue was one of the first big problems in my eyes. Coming from the java back end development, I would say that any undefined logic group should go into a specific module. In general the service object pattern fits, that seems to be known to some people. In the same way many spring applications structure their logic.

So I integrated the following react-redux architecture that is based on best practices from a spring back end.

Image for post
Image for post
Extended flux architecture

Core new points of this architecture

  • we have a services layer, that is used top down from the react components, I will describe a service in a separate article in more detail

The result

  • with this extended architecture we can clearly assign new types of logic to the services layer. We cover the client site to the end and developers have a clear framework to structure the code

I used this stack in two projects right away and made the best experience with it. During this time I brought at least 4 new developers on board into this projects. My colleagues we productive after 1–2 days inside the code base. Besides a react router integration we had no other architectural choices to make.

The core simplification comes clearly form the rest middleware and the services layer, wich I will present in the following articles.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store