One of the pleasures of being a professional software developer is the never ending learning of new technologies and concepts.
The software development landscape is truly moving at a breakneck pace. When I first began my professional software developer career, it didn’t seem so fast paced.
Now with the advent of the internet, things just seem to move at the speed of light. Every day, I seem to read about a new programming language, or development tool or new framework.
One of the hot new frameworks that seems to be making waves is Facebook’s ReactJS.
It’s so fast and responsive that Netflix uses React as it’s primary UI framework for their main TV interface. I’m a big fan and user of Netflix, and whether I’m on my tablet, my smartphone, my laptop or on an actual TV screen, the interface always seems fluid and fast.
So fast, it feels like a native software application, but of course, we know it’s a plain old HTML application powered by the power of the React libraries.
The problem that still exists today with building HTML software applications, is the time it takes for a web browser to translate allrelated tags from a web page, into the actual visible website we see inside a web browser.
This process of translating HTML code to the actual visible page is called ‘rendering the DOM’.
The DOM, or Document Object Model, is an object graph representation of each of the HTML elements of a page.
While you may see a website as a bunch of text, images, hyperlinks and other visual elements, a web browser sees the page as a bunch of object representations of each of those visual elements.
Once downloaded, the web browser needs to retranslate, or RENDER the HTML’s Document Object Model to their corresponding visible HTML elements.
The rendering process was and always has been the time consuming and resource intensive process for a web browser loading a page.
During the early years of web browsers and the internet, there was simply no way to get around this.
Web applications like Gmail and Google Maps heavily use AJAX technology. If you watch closely, when you move around in Google Maps, you’ll see that the web browser never completely “refreshes” itself. Whenever you scroll around in a Google map, behind the scenes, AJAX only refreshes the pieces of the map that actually need to change.
The same sort of behavior happens with Google’s gmail application. You’ll never see any full page refreshes, after the initial page load into your browser.
It FEELS like a traditional client desktop application like Microsoft Word or Excel.
While AJAX works very well, it’s really a workaround for dealing with the problem of rendering a full web page.
This is how ReactJS came into existence.
Instead of bypassing a full page render, the way AJAX technology does, the React framework tackles it head on.
In fact, the most important method inside the ReactJS framework is called, surprise surprise! render()
What this simple hello world example is doing, is inserting a header tag into the DOM div element named ‘root’.
Behind the scenes, ReactJS builds what is called a “virtual DOM”….it’s a mirrored copy of the real DOM of a web page, but in memory.
When a web browser encounters a ReactJS powered page, the React framework compares the virtual DOM to the actual DOM of a web page.
It then compares the differences between what may have changed between the virtual DOM and the real DOM, whenever something changes on the page…say you enter some data in an html