Mastering React and its future: A Comprehensive Guide for The Virtual Forge Modern Web Development

At the Virtual Forge, our JavaScript Engineering team works with a wide range of technologies, but our preference for developing web and mobile applications is React.

Building intuitive user interfaces with speed and precision is central to modern web development.

That’s where React comes in. With its component-based architecture, React is the developer’s toolkit for crafting scalable and interactive UIs.  

We have created and implemented React applications around the globe, delivering beautiful high performance web experiences to thousands of users. In this blog post, we want to share why we choose to use React, and why we are confident in React having a strong and robust future ahead of it.

Key Takeaways

• React is a flexible JavaScript library developed by Facebook, now Meta, which is used for building user interfaces using components that represent parts of the UI. It caters to the modern web development methodologies, using JavaScript and JSX for writing React code.
• React applications be created using a number of cli based tools such a Vite, Next JS or Remix giving the developer free choice in which tooling they decide to use around React.
• React can be used to write partial additions to an already existing website or write full single page applications. With recent advances React can be used to write full stack web applications, removing the need for dependencies on alternative technologies.
• In addition to the core React library itself, there are evolving and new React frameworks available built around the latest updates to accelerate development tasks and provide opinionated best practices on how to take advantage of the advanced React features.

The JavaScript Landscape

Anyone who has an interest in JavaScript will know that it is a continual and rapidly evolving technology. 

Sometimes there doesn’t seem to be a week go by when there isn’t a “new kid on the block”, a JavaScript library or framework claiming to be the next best thing.

To some, this continual progression can seem daunting. To The Virtual Forge team, it is one of the most exciting aspects of JavaScript development. 

We love to try out the latest technologies, to assess their potential, to make sure we use the best possible tooling to deliver the highest quality products to our customers. But with such a rich JavaScript ecosystem, why do we choose to use React?

What is React?

React, a JavaScript library available for free use, was developed by Jordan Walke, a software engineer at Facebook, now Meta.

Simplifying the construction of user interfaces, React allows react developers to create interactive UIs with ease. To begin, developers “import react” into their projects.

React components, the fundamental building blocks of a React application, represent various parts of the user interface. These React elements simplify the process of using interactive components and creating complex UIs, making it a popular choice among react teams, including the React team responsible for its development.

The greatest strength of React lies in its flexibility, which enables developers to adapt it to their needs. From crafting small components to creating entire user interfaces, React is perfect for modern web development methodologies.

The React code is written using JavaScript and JSX, a syntax extension that lets you write HTML-like code within JavaScript.

The Evolution of React

Ever since its inception, React has revolutionised the realm of web development. It was open-sourced at JSConf US in May 2013. It quickly gained popularity in the JavaScript ecosystem.

In 2017, React introduced a novel collection of internal algorithms known as React Fiber. This new approach provided a more adaptable and effective way to manage rendering tasks, marking a significant advancement from the previous ‘Stack’ rendering system.

Choosing React: A Powerful JavaScript Library

React is by far one of the most popular libraries in use for front end web development, which may seem like the obvious reason for our team to choose it. However there are many other aspects which we take into consideration when choosing which technologies to use, and we’d like to share some of our reasoning for choosing React.

Meta

React, a brainchild of the tech giant, Meta, is crafted to build user interfaces, and is the technology used to develop many of their applications today, including Facebook.

Meta’s approach when developing React was not just to build another JavaScript library, but to build a library to solve real world development challenges within Meta. This is a very appealing aspect of React because it makes available an open source library that has been proven in production in one of the world's largest social media platforms.

This approach by Meta demonstrates their commitment to creating practical, real-world solutions that address the specific needs and challenges of modern web development. It's not just about creating another tool, but about providing a robust, reliable, and effective solution that has been tested and proven in one of the most demanding environments on the web.

This adds a layer of trust and reliability to React, knowing that it's not just another library, but a tool that has been crafted and honed to meet the exacting standards of one of the world's leading tech companies.

Today Meta has tens of thousands of React components powering their products, and having a company such as this dependent on those components brings another huge benefit - stability.

Stability

React is a very mature and stable technology, and has always had a very good reputation for backward compatibility.  

When a company, such as Meta, uses React to power their products at such a large scale, they need to ensure that updates introduce minimal breaking changes, and that new features are simple to adopt, generally being opt-in. 

React continually evolves, and as it does new features become available with very little disruption to existing code bases. This gives our team at the Virtual Forge the confidence in using it as a tool, as we need to ensure that our products are stable and maintainable, as we also adapt to our customers evolving requirements.

Community

As any developer knows, when building an application, challenges will arise along the way. And who better to help than ... other developers?

React has a huge community of developers, bloggers, YouTubers and more providing help and tutorials across all aspects of React' development process. In addition to this there is a huge range of libraries and tools built by third party developers to provide solutions to common themes.

Whether you’re looking for a high performance state management library, an advanced client side routing system, or a way to add silky smooth animations to your user interfaces, there are many well established and trusted React libraries to fulfill these needs.

We think this kind of community is invaluable. Having great tooling in a library such as React is of course a must, but a well established and engaged community is essential.

Responsibility

There are  many other very capable frameworks and libraries available, and by using one of those we would certainly be able to build high quality products for our customers. Our decision comes back again to the maturity and stability of React.

Our customers trust us to build the highest quality products for them, and React provides us with the tooling to do this.  

The initial build of a product however is not where the story ends. The code we write for our customers will be dependent on for a long time, new requirements will emerge resulting in new features to be added, and existing features to be modified.

To that end it is important for us to build on a platform that continually evolves, to provide us with the best and most modern tooling, but whilst doing so is conscious to support the existing applications built with it.  

For us React has demonstrated its ability to do this time and again.

All in all...

Given its popularity as a library for building user interfaces, React enjoys immense support within the JavaScript community. Its evolution from a simple library to a comprehensive UI development tool has brought about a significant transformation in the way developers build web applications.

Looking Forward

Since being open sourced in 2013, React has continued to grow in popularity introducing new features and programming paradigms, and recently after years of development React has introduced one of its largest new features, React Server Components.

Introducing React Server Components

React Server Components or RSCs are a new feature of React that take it from being a Front End library to Full Stack. 

This is a huge move forward for React with many new features, and warrants a separate post to investigate more thoroughly. However, in this article, we wanted to talk about why we use React, and why we feel it has a strong future ahead of it.

We believe RSCs are a big part of that future.

So let’s take a brief look at what RSC’s are and the benefits they bring to React, but before we do, first let’s look at how React is commonly used to build applications today.

Single Page Applications

Since its release one of the main uses of React has been to develop single page applications (SPA's).  An SPA is an application in which the JavaScript code is downloaded to your web browser and then executed.

Let’s take a look at this process.

1. When a user navigates to an SPA, the browser makes a request to a web server to download a single HTML page to your device. This HTML page doesn’t contain much at all, but the key thing is that it contains a link to the JavaScript code which the application needs to run.
2. A second request is then made from the web browser to the web server  to download the JavaScript needed to run the application.  At this point the application can start up, and the user can begin to interact with it
3. After the application starts it is highly likely that it will need more data from the server relevant to the application, so the application will make a request to obtain the data

That’s 3 separate requests to the server just to start the application and display its data.

The final stage in acquiring the necessary application data involves collaboration with React's companions. React alone is unable to accomplish this task and usually requires assistance from one of its allies, with a REST API being a common choice.

To understand why let’s take a look at the diagram below:

The React application runs in the web browser highlighted above in green. Steps 1 and 2 are shown,

1. Obtaining the initial HTML page
2. Downloading the required JavaScript

Finally step 3 is where we want to load our application data. 

Application data is generally stored in a database on a server, which is not accessible to our React application directly.  However our React application can communicate with the REST API, which in turn can communicate with the database to return the data.

The technology used to implement the REST API is not important to the React application. Tt could be a Node, .NET or a Java application. 

The main concern for the REST API is that it should connect to the database and return the relevant data to the React application.

This represents the conventional architecture of most web-based Single Page Applications (SPAs). Nevertheless, there is room for enhancement, and this is where React Server Components come into play.

Understanding React Server Components

Now that we’ve taken a look at how a traditional SPA in React is architected, let's take a look at how this changes with the introduction of React Server Components.

React Server Components (or RSCs) allow React to not only render client side in your web browser, but to render on the server as well.  

Developers can continue working with the React component model, but each of those components can be directed to run on the client or on the server depending on the developers preference.

This means that for a React component that renders on the server it now has additional capabilities. To better explain, let's revisit the previous diagram and change things up a little.

The first thing to notice is that React’s scope has increased and is now able to run in both the web browser and on the server, which means that React now has access to the database. 

In addition the requirement for the REST API has been removed. 

This new architecture brings with it numerous new features and advantages. Let’s take a look at a few of the advantages below.

Faster Page Loads

Due to React components being able to render on the server, this means those first 2 steps we talked about when describing the SPA disappear. There is no longer a need for a web browser to fetch a HTML page in order to locate the JavaScript links and then load the JavaScript.

Instead, the initial request React can access the database directly and then server render the component.

This results in a single network request from the browser when the user navigates to the application, resulting in a single response with a page containing the server rendered HTML, reducing the amount of network requests that need to be made.

Reduced Bundle Sizes

Developers do not need to download all of their JavaScript code to the browser, they can choose to render all, or parts of the application on the server. 

Servers are generally much more powerful than the browser running on the client device, and so it’s sensible to use this advantage. Developers can choose to render as little or as much as they wish on the server. 

In some circumstances, the entire application could be rendered on the server without any JavaScript being sent to the browser.

In addition to the developers own application code, large third party dependencies can also be potentially moved to the server that would previously impact the client bundle size.

In reality, zero JavaScript is not the objective. Developers will still want to send JavaScript to the browser to enrich applications for areas that require interactivity, but React puts developers in total control of which parts they want to be server or client rendered.

Data Fetching

In the original application diagram, step 3 was to make a REST API call to obtain data which was inaccessible to React directly. This is no longer required. 

Developers do not need to introduce an additional layer into the architecture. The database can be queried directly from the RSC.

By moving the data fetching to the server, closer to the datasource, it can reduce the time it takes to fetch data along with the number of network requests that need to be made.

As always with React developers have flexibility and choice, and may want to keep the REST APIs. They could be part of a larger micro service architecture, or a third party REST API that the developer is not in control of.

Security

RSCs allow developers to keep sensitive data and logic on the server, such as tokens and API keys, without the risk of exposing them to the client.  

Previously this was not possible as the JavaScript code would have needed to be downloaded to the web browser.

Frameworks

React itself remains a library to allow developers to build complex and scalable user interfaces, and now adds support for data fetching and many other features with this latest update. It remains flexible allowing developers to take advantage of these features and implement them however they desire.

As a developer, having this flexibility allows us to make our own decisions on how we implement these features, and as we do so, common practices, patterns and best practices emerge, and this has resulted in the introduction of some new, and improved existing React Frameworks.

Next JS

Next JS, a long standing React framework, has recently released version 14, which fully embraces React Server Components and builds the framework around their usage, adding more features on top of those provided by RSC, giving developers even more tools to rapidly build robust React applications.

Remix

Remix is a relatively new framework open sourced by Shopify which encourages developers to work with web standards, using React to build highly performant progressively enhanced web applications.  

Shopify themselves are actively building many of their new services, and moving existing services into Remix. 

Remix is an exciting addition to the React ecosystem, and one in which we plan to write about in the future.

React Server Components

With the introduction of React Server Components we’re excited for the future of React, and with large global brands such as Shopify open sourcing their own frameworks built on React, this shows we’re not alone in our confidence in React.

Summary

In this post we’ve taken a look at our reasoning for using React as our choice of development tool within the JavaScript engineering team at the Virtual Forge.  

We’ve made our decision based on the stability and flexibility React has provided since its release. 

In addition we’ve taken a brief look at some of the newest features of React, which continues to give us confidence in the longevity and continual evolution of React.

This is an exciting time for the React community as it opens up even more opportunities for developers to expand the scope of their React applications and easily adopt these new features into an already familiar model, while continuing to build on the stability that React has provided.

Build Intelligent Platforms With The Virtual Forge

Visit The Virtual Forge website for more content on data, development and technology. As a React development company, we also offer extensive development services, so if you’d like to learn more about building apps and solutions with React, feel free to get in touch with us.

At The Virtual Forge, we aim to build data-rich, intelligent platforms that solve real-world problems. We use a collaborative approach that lets us know what our clients need so that we can provide efficient and unique solutions for their business problems.

Frequently Asked Questions

What is React used for?

React is used for building web, mobile, and desktop applications, making it a versatile framework for cross-platform development. Whether you're creating a website, a mobile app, or a desktop application, React has you covered.

Is React still popular 2023?

Yes, React is undeniably still a top choice for web development in 2023 due to its simplicity, strong library support, intuitive UI capabilities, and community backing.

Is ReactJs a language?

No, ReactJS is not a language, it is a JavaScript library used for building user interfaces for single-page applications.