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
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
- 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
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
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.