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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Let’s take a look at this process.
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,
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.
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.
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.
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 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 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.
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.
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, 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 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.
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.
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.
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.
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.
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.
Mastering the DAX ( Data Analysis Expressions) language is crucial for harnessing the full potential of Power BI. As more businesses adopt Power BI for data analysis, understanding best practices and how to optimize DAX becomes even more critical.