React.js Review. Why I chose to invest in this library


It was about 2 months ago when I made the decision to invest in a JavaScript library called React.js. It was seriously dark waters for me, as I come from a full stack development framework called IBM XPages, where everything from server-side logic, responsive design, client-side scripting, database management, security, etc. was managed by the framework to provide seamless integration and rapid application development.

The concern I face with a framework like this, is that I want my dev stack to be as modular and as portable as possible. If I develop an app for XPages, and then get asked to develop the same app for Node.js or asp.net, I want to have the pleasure of porting my front-end application to either of these platforms, with no modification required to the design. I.e. the only changes I would apply are the API calls my front-end app makes to the underlying server and data store, whatever it may be.

A quick overview of React.js

For those who don’t yet know, React.js is a JavaScript library for building user interfaces and was created by Facebook. Many confuse it for a full stack JavaScript framework like Angular, but that’s not the case.

React allows you to develop incredibly fast web pages, that literally make the user experience feel similar to that of a native mobile app. Thanks to libraries like JSX and Babel, as well as ES2015, you can create web components in JavaScript that once compiled output the HTML the user sees. Let’s try this again in case I didn’t make myself clear: You define your web page’s HTML in your JavaScript logic.

The biggest pro about React for me is its virtual DOM. React creates a virtual version of the web page you want to output to the browser. This means you don’t manipulate the standard DOM. Instead, you request changes via React’s virtual DOM, where React then compares the new output with the standard DOM, and only updates the HTML that needs to be updated. This makes for an insanely fast user experience.

How React.JS fits into MVC Architecture

Let me start out by providing a very simple overview of MVC. Firstly, MVC stands for Model View Controller. An architecture and standard for developing well structured full stack applications:

  • Model – refers to the modelling of data that will be used in your application. If you were developing an app to submit leave requests, the meta data that makes up your leave request form would be defined using Models
  • View – refers to the design that makes up your user interface. It would be your HTML Page and CSS, excluding any JavaScript logic (except when calling functions or referencing properties)
  • Controller – This handles the logic of your application. Queries, validations, client and server-side processing of data and logic, etc.

React.js only focuses on the “View” layer of MVC. It doesn’t care about server-side logic, or the reading and writing of data to a backend database. It only cares about the output of your HTML and how it’s managed and updated.

How is React.js different from normal web page design

First, as I mentioned earlier, with React.js your web page is split up into components. You design these components inside your JavaScript logic using JSX. Below is a simple example of a React component that creates an unordered list. React will take this logic and create the HTML page accordingly:

React.js Component Example

Second, React manages your HTML page using state and diffing. You don’t directly change the web page on the browser. Instead, you request to change the state parameters managed by React, and using diffing, React will modify the HTML page accordingly. This is what speeds up your web page.

How I came about my decision to use React.js

Let’s break this down shall we?

React.js is fast

This already was a big seller. Thanks to React’s virtual DOM and diffing, the user experience on your web page is extremely fast.

React.js is portable

Thanks to powerful libraries like Webpack and Gulp, all component logic, as well as the React.js libraries and dependencies, can be compressed and stored in a single JavaScript file. This makes it extremely portable and means you can run your UI/View layer on any platform.

A central place to design React.js Web Pages

I use Node.js and Atom to design my React user interfaces. So whether I’m developing an app for XPages, Node.JS or asp.net, all time spent on the UI is in a single dev environment. Because I interface with the respective server and data store using APIs and Web/REST Services, I can test my React.js application from start to finish on my local dev environment. It’s really that simple.

React.js adoption is growing consistently

According to Google Trends and various other analytics, React.js is steadily growing in popularity and use. That and the fact that React is supported and used by the likes of Facebook (who created React.js), Airbnb, Atlassian, Box, Docker, Dropbox, the list goes on and on.

React.js is standalone

This is very important. As i’ve mentioned above, React does not care about backend data stores, or the platform it’s running on. React is designed to run on its own in a web browser. In my case, i’ve designed React applications that exist on cloud runtimes, where if one loses internet connectivity, my React application still runs without fault. Yes you can’t fetch new data from the server or submit data, but you can still create and save new records, access various areas of the application, as well as work with whatever data has been passed down to the user’s browser. This is because the data you create or modify offline, is managed in the state object of React. If you’re clever enough, you can easily build a queuing mechanism that, when the user is online again, your app can can post the locally created data to the server. And this is definitely not re-inventing the wheel…it’s rather easy to implement.

React.js is open source and free

Some of my projects are product-based and need to exist in the cloud. The fact that React.js is open source and has no licensing costs, plays a major role when it comes to the decision making involved for developing products.

React.js is just JavaScript

Now more than ever, you cannot go wrong investing in HTML, CSS and JavaScript. With React.js being JavaScript, means the learning curve is small, and the development community is HUGE! Being JavaScript also has a number of additional benefits if you’re developing on dev environments like Node.js, where server-side logic is written in JavaScript.

Leave a comment

Your email address will not be published. Required fields are marked *