ReactJS – functional reactive and declarative UI programming to the rescue

ReactJS is a JavaScript open-source library for creating user interfaces. It’s maintained by Facebook, Instagram and the open-source community. It can be tempting to think that ReactJS is just another JavaScript library that operates with the DOM, along with Angular, Aurelia, Ember or Polymer, but in reality it addresses a wider spectrum of edge cases, not just web applications: native development (iOS and Android), TV interfaces (Netflix), non-browser environment (server-side rendering), canvas graphics with video-like smoothness and others. What this means is that instead of ReactJS talking only to the DOM API, it just as well can be communicating with the Graphics Layers or WebGL – good old computer graphics programming.

ReactJS rendering layers

So basically ReactJS  is just a generic component model working for a lot of programming models and is going beyond the borders of W3C WebComponents and web applications, towards native iOS or Android development or even rendering directly with WebGL for complex 3D scenarios. The beauty of it is that you only need JavaScript to achieve this.
“You can think of ReactJS as a small library orbiting around the DOM. However as ReactJS is integrating with more and more things, the picture kind of flips around” (credits to Sebastian Markbåge):

ReactJS Integration

We all know that working directly with the DOM is slow. Because performance is crucial, one of ReactJS’s foundation stones is the Virtual DOM which makes the server-side rendering possible and allows re-rendering the entire UI every time the data changes without being prohibitively expensive. This means that ReactJS apps can easily run at 60fps even on mobile devices. Behind the scenes, the Virtual DOM relies on an efficient diffing algorithm that compute the minimal set of DOM mutations before actually touching it. The diffing engine works kind of the same way as the one used by the source repositories to stores the different revisions of a source file. Remember: whenever applicable, an algorithm will always find the best solution, whereas a human is prone to making errors.

Another important aspect of ReactJS is how it keeps the model in sync with the UI. With the traditional imperative programming paradigm, the way that you would normally handle this would be to initially render the markup at time = 0 and then manually sync its representation every time a change occurs in the model (time = 1, time = 2 etc.). For example, if you are using only jQuery to do the updates, the code quickly becomes spaghetti. With ReactJS you declaratively describe the UI at any point in time, not just the initial render, and let the view do all the required mutations when needed. It’s that simple: whenever there’s a change in the state, the entire thing is re-rendered. This is called one-way reactive data flow and will see how well it fits with everything else, especially with Flux, in some other article.

Speaking about programming paradigms, functional programming becomes a first-class citizen with ReactJS  not only in theory but also in practice, which means that the components are represented as idempotent and composable functions. The tree-like data structure resulted in the diffing process between two subsequent function calls will be transparently translated into a list of DOM mutation operations which ultimately will be reflected into the DOM. This is a big leap toward transforming theoretical functional programming concepts into actual code.

Comments are closed.