ReactJS Review: Why I chose to invest in this library 5

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, 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, 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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

5 thoughts on “ReactJS Review: Why I chose to invest in this library

  • Timothy Briley

    This post makes it sound like you committed to using React.js. But in the 18 or so months since you posted this, you haven’t mentioned React again. What happened? Are you still using it?

    • John Jardin Post author

      Hi Timothy. Yeah I use it extensively and is the basis for pretty much all my UI development.

      Most of my development work however is focused around integration, cloud, AI and DevOps, which explains why I don’t blog as much on ReactJS. That being said, my soon to be presentation at IBMThink in Vegas in March will include a React app running inside a container in a Kubernetes cluster, acting as the primary UI for all my services.

      Trust me…I’m still React all the way and haven’t been persuaded to explore a better alternative.

  • Divya

    Thanks for the article. I work as a React and Angular trainer at an institute called Kamal Technologies. Now people have been asking me for Vue JS coaching too. So I’m planning to extend my skill sets beyond React and Angular to Vue JS too.

    Can you please suggest me where to start learning and provide me any brief introduction about Vue JS, like you have done for React here?

    Thanks in advance,