React for fast and solid JavaScript applications

Where are we today without JavaScript? Without this programming language, you can navigate only from page to page with a browser. On the other hand, with JavaScript, a single webpage can contain a complete web application (for example, see Gmail). JavaScript is the only programming language that is understood natively by your browser, and therefore plays a crucial role in bringing the web to life. As a result, JavaScript has been strong in growth: more and more JavaScript is written in comparison to other languages.

Since JavaScript is usually strongly linked to both the server side and the HTML / CSS front of a website, it is very difficult to replace a piece of JavaScript code. Differences between browsers, limited instrumentation and language constraints do not make it easier for developers. For these reasons, the maintenance cost of JavaScript code can increase quickly.

JavaScript frameworks like Backbone.js, AngularJS and Ember.js

To make it easier for developers and to reduce the cost of developing websites and applications, JavaScript frameworks have been developed over the past years. All of them provide a standardized structure and method that significantly simplifies working with, and maintaining JavaScript code.

With the advent of these frameworks, web applications became complicated, which in many cases also caused performance problems. Compared with a desktop application, a web application has less resources (processor & memory usage) at its disposal. Due to the still more limited resources of mobile Internet devices, performance problems are the strongest.

React: the ultimate solution by and for Facebook

The web application of Facebook is not unknown to most people, and as we all know, it is also very complex. It is therefore no surprise that Facebook was just looking for a way to write her JavaScript code so that it performs well and is well-maintained.

Therefore, Facebook developed React and in 2013 it released an open source license. Well-known brands such as Netflix, Yahoo, Airbnb and Khan Academy, but of course Facebook developers themselves, saw the benefits of this new technology almost immediately, making React rapidly increasing popularity.

What makes React so interesting?

Why is React so popular? What does it do better or different than existing JavaScript frameworks?
Through the following four points, I try to answer these questions based on my experiences.

1. React offers a clear structure, thus offers reusable code.

A React-based web application is constructed out of so-called components. Components consist of a mix of, among other things, HTML and JavaScript code, but also (possibly) other Components.

It’s easy to offer a React component as a loose JavaScript library. Many components are already offered: What you can (re)use in this way, you do not have to write yourself!

2. React does not try to do too much.

React is limited to display and interaction only. Many frameworks do much more than this, which makes them considerably more difficult. As React is limited to display and interaction, it also makes it easy to use in an existing application, or even in collaboration with another framework!

3. React addresses some important browser performance issues.

JavaScript itself is not so slow, but if JavaScript changes are made in the page that shows the browser, significant delays occur. The browser must rebuild (rerender) the page after modification, and it will slow down.

React uses a smart trick, called VirtualDOM, to minimize changes to the page. Especially with complex web applications, the difference is very noticeable.

4. React also runs on the server-side

Originally, JavaScript is a browser language. But fortunately, it is also possible to run JavaScript code on a webserver today. React was the first JavaScript framework that allows you to use the same code both on the server and in the browser.

The main advantage of this is that a page can be retransmitted on the server beforehand. This causes this page to be displayed much faster on the visitor’s screen than a page to be built into the browser. An additional advantage is that the page can be cached on the server, making it even faster.

KreyNation ♥ React!

At KreyNation our development used to be PHP oriented but we have fully converted this to Node.js & React (depending on project specifics). It has taken an important place in our toolbox. It helps us keep an overview and allows us to reuse existing components. But React’s most important advantage is the performance of the JavaScript code we write, with an advantage where mobile users (which are the fastest growing user segments) are most likely to notice.

(new website coming soon)