Rethinking State Management with React Agent

For over twenty years, REST systems have been the dominant way of transferring state between the client and the server. REST is built upon HTTP; in this paradigm, developers write POST, GET, and other requests on the client-side, and set-up endpoints on the server-side to respond to those requests. REST is similar to a game of catch because it involves a lot of back and forths where each person needs to be ready to catch the ball.

Since 2011, WebSockets have been slowly adopted. WebSockets maintain an open socket connection between the client and server. In a way, it’s similar to video chatting with someone because as soon as you’re connected, it’s super easy to send information.

It’s pretty inevitable that WebSockets will eventually be the preferred way to transfer information. Web applications are becoming more and more real-time based. A big advantage of WebSockets is that they allow a constant flow of data in both directions. That means the server can push data to the client using WebSockets, which, believe it or not, is not a feature of REST.

Another big advantage is sockets are faster than HTTP requests. Every HTTP request performs a three-way TCP handshake, so when you have multiple requests, which is typical, the cost can start adding up. In contrast, WebSockets perform an initial TCP handshake, and that’s it; WebSockets require much less overhead.

Enter React Agent.

React Agent anticipates this future by building its architecture on WebSockets, alongside some other nifty technologies like React and Redux.

Its core functionality is an easy means to communicate between the client and server. Our team has heard from developers who have been in the industry for 20+ years who are excited and looking forward to incorporating React Agent into their applications.

We’ve worked hard to keep the API simple and to the point. There are only six main methods to know.

React Agent’s core functionality is two-fold:

1. Instead of multiple endpoints on the server-side, React Agent reduces HTTP overhead with communication through a single endpoint for every client query, based on WebSockets. On the server-side, developers define actions that respond to client queries. These actions can be SQL queries or functions that call to any API.
2. React Agent follows suit on the modern practice of having state in a central store. The store refreshes on every update and is composed of pure functions with no side-effects. It uses React’s diffing algorithm for efficient rendering and Redux DevTools to enable time travel debugging.

Here’s a basic example of inserting a message into a database:

// client.js
run(‘setMessage’, { message: ‘Hello World’ })

// server.js
setMessage: {
    action: ‘INSERT INTO messages(text) VALUES(:message)’
}

To get started, check us out on GitHub.