The Holy Light of React and Nodejs Combo
**Dink Dink Dink**
Person 1: Hello Sir, do you want to accept React as your main front-end language.
Person 2: Well…umm I don’t know. I am already using angular.
Has this ever happened to you? Well, I have experienced it!; Not the part where the person comes at my door and asks me to accept React as my front-end Language, but something like that.
It all started when I was trying to create a smart way to control traffic lights on a small scale replica of a traffic junction. In my project, I managed the opening and closing of traffic lights using my Angular front-end. On the other hand, my back-end served all the front-end data and managed the traffic lights, was written purely in C++.
As time went on and I started to introduce new features, like the inclusion of sensors and other modules; my project got bigger and bigger. This growth made it harder to maintain and even harder for new people to understand my code flow. Then came the Holy light of React and Node.js
In this article, I will discuss why I remodeled my architecture; From an outdated Angular front-end, and a C++ backend, to a more progressive React front-end, and Node.js Back-end.
First, we will talk about what these two technologies are, namely Angular and React. Angular is an open-source front-end framework based on Typescript. Angular uses Model View-ViewModel (MVVM) architecture pattern, which allows the separation between the UI control and Business logic.
React, on the other hand, is a Javascript library that allows user interfaces can be built. React utilizes components whose logic is written in Javascript. This also allows the user to update and render the right component when the data changes.
As my project base became more innovative and bigger it became pretty obvious that Angular wouldn’t cater to my growing needs, thus I decided to shift to React to handle my front-end logic.
Some of the reason’s include :
1) Componentization
Reacts offers a simple way of developing components. This is because React libraries come with functional programming, where component definitions are declarative. This allows React apps to be written in a user-specified way and not make it fixed. Additionally, this componentization also allowed React codes to be more readable and logically structured
2) DOM (Document Object Model)
Another reason for choosing React is speed, which is of the essence This is because it utilizes Virtual DOM which is considered faster than real DOM.
3) Data Biding
Finally, the reason why I choose React is due to the fact it employs the use of one-way data binding. This means that UI elements can be changed only after changing the model state. This has some key advantages:
- Because we have more control over our data it is less error-prone
- As we know where the data is coming from it is easier to debug. This matters if the codebase is substantially massive.
Because of these reasons, I decided that React would be the optimum choice for the future code base development of my project.
Now moving on to the issue of why I transitioned from Node.js to C++.
After deciding to shift the code-base to React I needed a fast and reliable way to communicate with the webservers of the Back-End. With the recent growth and innovations in Node.js, a javascript runtime environment, it became apparent that I also needed to hop on this train. So what I did was, instead of C++ handling all the front-end business data and device services data, I broke it into two separate layers.
The first layer being, Node.js, which acts as a bridge between the front-end and the device services i.e handles all the system-data flow. The second layer was C++, which handles all the device services. This new back-end architecture allowed the code-base to be more readable and manageable, thus increasing the efficiency of the overall project.
In conclusion, a combination of React and Node.js has found a way into my heart and soul, as it caters to my ever-growing needs.
