Twitter Is Never Wrong
If it’s good enough for Twitter, it should be good enough for you. The “it” in this case is React.js, and you might be thinking: is this at all related to #freebritney?
The short answer is: sorta.
Because if you go on Twitter and start posting to #freebritney, there’s a good chance that your tweets will be seen to the world thanks to the magic of React.js, which is the Web development framework Twitter employs to make sure the app runs smoothly. There are currently 187 million users of Twitter, so that app needs to operate very efficiently.
React.js makes it possible to #freebritney. But how?
First Things First
React.js was first developed at Facebook by Jordan Walke and was introduced in 2013, but it’s not proprietary. It’s actually open-source. That is an important distinction because React has a large cadre of devotees who maintain thousands of Github forums where you can find solutions to just about anything. This ecosystem is highly interactive and a rich resource of support.
What is unique about React is how it allows developers to deploy all the cool things we love to do online–leave comments, watch videos, tag pictures—without the website grinding to a halt. React involves front-end or client-side development because it focuses on what the user sees and does with an app. The dynamic part of any web page, any animation or transition, likely has JavaScript code as its source. The static part of a website is written in HTML. The marriage of these two foundational programming languages is part of the genius of React.
JSX
When users interact with an app, some parts change (dynamic) and some parts don’t (static). But how could you speed up the reload of the parts that change while not touching the parts that don’t? React’s solution is JSX, a version of JavaScript that is an extension (hence the acronym) into elements of HTML. If you have a solid knowledge of JS, learning JSX isn’t an onerous task, which is why so many developers have hopped on the React bandwagon.
A key to React is the plethora of libraries or repositories of pre-written code, that can be re-used and re-used, negating the annoyance of reinventing the wheel. React especially centers on user interactions, such as on-screen menus, search bars, and buttons, that had to be hand-coded in JS, which added to development costs and often led to buggy performance. But JSX freed up developers to go big on UI, even at the enterprise level–those 187 million Twitter users barely ever experience a glitch, thanks to JSX. But why?
Virtual DOM
If you google “virtual DOM,” you might get some interesting results. But the virtual DOM sits at the heart of why React.js has proven to be so beloved by developers.
If you’re living in a world without React and JSX, chances are that web pages will update the “document object model” (DOM) in HTML The DOM is a tree model where each object (part of the web site) is a branch of the tree (aka document). In a static web page, this update is no biggie. But web pages or apps are NOT static, and from a development standpoint, that was a problem.
React’s solution was to invent a virtual DOM, a facsimile of the real DOM, that JSX could scan for any changes the user made and just update those parts of the DOM. So let’s say you posted something about #freebritney on Twitter. Instead of the entire app reloading, React just uses enough computing power and time to update your tweet. When you multiply this time and energy savings by 187 million, you get an idea of how efficient React makes popular apps like Twitter–and Facebook, Instagram, and PayPal.
Why Use React?
Why use React.js? One word: speed.
React allows for complex UI to load lightning fast. But it also is applicable to single-page apps as well. It is scalable up or down because the basic premise of the virtual DOM doesn’t change.
Speed matters because page-loading speed is part of how Google ranks web pages. The slower your page loads, the lower it will be listed. And multiple studies have shown that bounce rate correlates with loading speed. The faster a page loads, the greater the chance that a user will stick around (hence, one metric of performance is “stickiness”). If you rely on e-commerce for revenue, then loading speeds are crucial for the success of your business.
Another reason to use React is that there is a huge amount of support that comes with it. Large corporations have put resources behind it, and so it sits at the cutting edge and is constantly updated and improved. There are thousands of developers who use it, and so getting answers isn’t difficult. We’ve done hundreds of projects with React and we’d be happy to show you the full power of JSX and how it can improve the core components of your business.
