AhmadArdity / Pixabay
React (also known as React.js or ReactJs) is a powerful JavaScript library that uses server-side rendering (SSR) with a unique twist—one that allows it to provide a flexible, performance-oriented, componentized solution for the “V” in MVC (Model View Controller). If you’re looking for instant page loads, or the ability to handle long lists of dynamic content changing within the view, React may be the JavaScript library for you.
Read on to learn more about React and its role in the world of front-end web development.
THE REACTIVE REVOLUTION
Harken back to a simpler time, when the World Wide Web was young—PHP ruled the back-end, and the client-side was little more than a window to content stored in static HTML pages housed on humming servers. The web was nowhere near as dynamic or as interactive as it is today, but the path between server request and an immediately viewable webpage was simple, direct, and even theoretically faster (if it weren’t for the obvious technological limitations of the time), thanks to SSR.
Fast forward to the present, and the client-side has since experienced a renaissance—dynamic front-ends, interactive content, and sleek desktop-like user experiences have become the norm. But all of this advancement did not come without a cost: added complexity. Bloated client-side implementations led to loading screens, blank white pages and other lags in performance while waiting for the browser to download the JavaScript needed to render a page, something that was once a simple output from the server. The inherent limitations of client-side rendering (CSR) were starting to show at the seams.
Enter React, an isomorphic JavaScript library released by Facebook in 2013, that allowed developers to use SSR to build modern web apps. One of the reasons developers had started to drift away from SSR was that it was necessary to have to load the entire web page every time something changed within the view. React introduced a workaround called the Virtual DOM that allowed developers to take advantage of the inherent performance advantage of SSR, without having to update the entire view every time a user made a small change to the UI.
SERVER-SIDE RENDERING (SSR)
The beautiful thing about SSR is that the app is able to pre-render the initial state of a view before showing it to the user. When a user loads a webpage, they get to see it as the designers and developers intended, without having to wait for their browser to download the JavaScript necessary to render the page. SSR is also great for search engine optimization (SEO), since most search engines have an easier time crawling and understanding pre-rendered HTML views.
THE VIRTUAL DOM
The Virtual DOM works by modeling two copies of the DOM, the original and an updated version that reflects changes received from the view. React takes note of the differences and outputs the DOM operations necessary to only update the parts of the UI that actually changed. In this way, React overcomes a previous shortcoming of SSR, where it was necessary to recreate the entire updated view.
JSX FILES
React goes against the traditional grain of separating form (HTML) and function (JavaScript), instead opting to prioritize encapsulation by mixing JavaScript and HTML into a single JSX file. This makes sense considering the component-oriented future of the web—the convenience of having all the JavaScript and HTML needed to define a single UI element like a slider neatly packaged into a reusable component is worth the switch.
REACT NATIVE
React Native brings the power of React to mobile app development. Unlike other JavaScript mobile development frameworks like Cordova or Ionic, React Native allows you to write UI components in JavaScript that compile to native code for iOS and Android—that means you can create mobile apps that perform and function as if you built them in native Java (for Android) and Objective-C or Swift (iOS). Better still, because React treats the view layer as a pure output of state, switching from web to mobile is often as easy as swapping React tags for React Native tags, making it possible to build projects where you only had to write once for iOS, Android, and the web.
FLUX
Earlier, we called React the “V” in MVC, mostly to help newcomers familiar with front-end web development concepts to understand how they might integrate this awesome library into their web projects. But if your goal is to embrace the “componentized” future of web development, Facebook develops all its apps using an application architecture called Flux that’s better suited for React. The Flux programming pattern places an emphasis on unidirectional data flow and consists of three parts: the dispatcher, the stores, and the views.
- Stores are similar to the models in MVC, except they manage the application state for a particular domain within the application.
- The Dispatcher is a simple single registry of callbacks to the stores within the application. It also manages the dependencies between stores.
- Views are the same as the view in MVC, except in the context of React and Flux, also include Controller-Views, which listen for change events and retrieve application state from stores as required.
Basically, all data in the application flows through the dispatcher, which acts as a central hub. This data is tracked as Actions, which are provided to the dispatcher in an action creator method, often as a result of a user interacting with the view. The dispatcher invokes the registered callback, effectively dispatching the action to all stores that have registered with that callback. The stores in turn relay that change event to the controller-views to alert them of the change. The controller-views listen for events, retrieve data from the appropriate stores as required and re-render themselves and all their children in the component tree accordingly.
If you’re interested in learning more about Flux, check out this article from Facebook itself. You may also want to checkout Redux, a library that lets you code in Flux, but simplifies things by providing a single store.
SHOULD YOU USE REACT FOR YOUR PROJECT?
React is a powerful UI library that brings the power of SSR, isomorphic JavaScript, and component-based web development to modern dynamic web applications. It really shines when you need to render large lists of dynamic, data-heavy, content within a single view a la Facebook or Instagram.
Consider using React if…
- You’re already a fan of ClojureScript and the Om Project.
- You’re looking for a performance boost for the V in MVC for your app.
- You like the concept of Flux and unidirectional data flow.
- You don’t mind learning a new technology that’s already become a major part of front-end web development.
- You embrace the componentized future of web development.
React’s emphasis on component-based web development means it is well encapsulated and plays well with other technology stacks. Still, if you’re interested in how it stacks up against other popular front-end technologies, check out some of our comparison articles:
Get more work done, faster with freelance help. Post a job today and get started!