React Frameworks
Exploring Next.js, Remix, Gatsby, and Expo for Elevated React Development
Welcome back to another edition of the Reaction newsletter! If you are new to the newsletter, we’d like to welcome you. Here, you will learn everything you need to know about the React ecosystem. If you are already a subscriber, we appreciate your trust and enthusiasm for Reaction.
In this edition, we will start a three-part series about React Frameworks. In the first part, we will talk about the different frameworks, the problems they solve, and mention some cool techniques they have in common.
React Frameworks Part I - Introduction
In the exciting and rather chaotic world of web development, where new frameworks and libraries are released at a rapid pace, React has emerged as a powerhouse that enables developers to create dynamic and interactive user interfaces. Despite being on the market for more than a decade, it still holds the crown for popularity in front-end frameworks, even though it is not described as a framework. However, as applications grow in complexity, developers often find themselves juggling various tools and libraries to address different aspects of development.
React: A Library or a Framework?
Before we delve into the React frameworks, we need to understand the difference between a library and a framework, and why React needs a framework.
In general software development, the distinction between a library and framework lies in a term called "inversion of control." When you choose a library, you are in charge of the application's flow, deciding when and where to call the library. On the other hand, when you opt for a framework, the framework dictates the flow by providing designated places to plug in your code; it then calls the code you plugged in as necessary. Both libraries and frameworks are created by others to help solve common problems in a more concise manner.
The reason React is categorized as a library and not a framework is that it's not an all-inclusive solution. It lacks resources that a large-scale application would typically require, such as page routing, optimized data fetching, and the ability to generate static HTML and perform code splitting.
While some developers might consider this distinction trivial, it has tangible implications for the development process. Even Meta, the creator of React, labels it as a library for building user interfaces. Thus, becoming a proficient developer involves gaining a solid understanding of third-party React libraries.
Introducing React’s Meta Frameworks
Thankfully, there are frameworks built on top of React that offer more robust sets of built-in tools. These frameworks empower developers to expedite project development without relying heavily on third-party libraries.
React Meta Frameworks (no, they are unrelated to the company) are tools constructed atop React that address various pain points, potentially enhancing the developer experience and application performance. These frameworks offer features that most applications will eventually require.
Common Features Among Frameworks
Diverse rendering strategies: All React frameworks offer more than one rendering strategy. The most common strategies are Client Side Rendering (CSR), Server Side Rendering (SSR), and Static Site Generation (SSG). We will delve deeper into these strategies in part 2 of this series.
Built-in Routing: If you've been working with React, you're aware that React lacks an built-in, zero-configuration solution for routing. Frameworks solve this predicament right from the start using a popular pattern called file-based routing. With this method, you define routes following your folder and file structure.
Data Fetching: With a framework, you can shift from fetching data on the client side to fetching it from the server side. This involves rendering the page on the server and delivering the page content, including fetched data, within the HTML. This accelerates page loading speed and improves user experience.
Automated Code Splitting: Each component responsible for rendering a route is automatically split into its own JavaScript bundle during the build process. This results in less JavaScript code being sent to the client for loading.
Built-in CSS Support: These frameworks support various CSS techniques, including CSS Modules, Sass, PostCSS, and CSS-in-JS libraries.
TypeScript Support: These frameworks offer native TypeScript compatibility, which entails strong typing, streamlined debugging, and enhanced code quality.
SEO Optimization: They automatically generate meta tags, sitemaps, and images for social media sharing to optimize search engine rankings.
Prominent Frameworks
The React ecosystem boasts numerous frameworks, each offering distinct features and advantages. While we've mentioned two in our previous newsletters, we'll focus on the ones recommended by the React team for production-ready applications.
Next.js
Next.js stands as a full-stack React Framework renowned for its “verçatility”. It accommodates React apps of various sizes, ranging from static blogs to intricate dynamic applications. Next.js apps can be deployed on Node.js, serverless hosting, or even your custom server infrastructure. The fully static version of Next.js can be hosted on any static hosting service.
With over 4.5 million weekly downloads on NPM and more than 100 thousand stars on GitHub, Next.js holds a dominant position in the React framework landscape. It benefits from strong support from Vercel, a popular hosting platform.
Right from the start, Next.js introduced innovative features to the React ecosystem, including file-based routing and server-side rendering. The React core team has endorsed it as an excellent starting point for production-ready projects.
Next.js was initially released in October 2016 and currently resides on version 13.
Remix
Considered the dark horse among React frameworks, Remix also functions as a full-stack framework with nested routing capabilities. It enables breaking down apps into nested parts that can concurrently load data in response to user interactions.
Introduced in December 2020 by the team behind the widely used React library, React Router, Remix has garnered considerable attention and popularity among developers due to its unique approach to server-side rendering and data management, setting it apart from other frameworks. Their guiding philosophy revolves around embracing web standards rather than opposing them.
Remix provides a straightforward and flexible API for working with forms, complete with built-in validation and error handling. It boasts impressive speed, surpassing even Next.js. Remix adopts an alternative approach to handling static files, reducing the volume of data transmitted over the network, be it JavaScript, JSON, or CSS. Additionally, it boasts an appealing landing page.
In October 2022, Remix joined forces with Shopify to secure long-term support and backing. It currently stands at version 1.19 with more than 24 thousand stars on GitHub. It was introduced in 2021.
Gatsby
The oldest entry in this lineup, Gatsby, was introduced in 2015. It serves as a framework for swift CMS-based websites. Its expansive plugin ecosystem and GraphQL data layer simplify the integration of content, APIs, and services into a single website. While initially introduced as a static website generator, Gatsby 4 introduced the option to utilize Deferred Static Generation or SSR alongside SSG.
Gatsby natively supports a GraphQL data layer, making data fetching and management from various sources—such as APIs, CMSs, and databases—effortless. Developing progressive web apps that function offline and can be installed on mobile devices is also straightforward.
Gatsby once led the framework race, capitalizing on static file generation with React and using hydration to provide dynamic and interactive user experiences. Its plugin ecosystem and integrations were also extensive. However, as time progressed, Gatsby encountered challenges and criticism, including slow builds, resource-intensive operations, and a complex plugin ecosystem. With the rise of Next.js, Gatsby became a popular alternative.
Despite these challenges, Gatsby remains active. The framework's development team is actively addressing its issues and criticisms. Thanks to Netlify's acquisition of Gatsby in February 2023, they introduced their cloud infrastructure known as Gatsby Cloud.
Presently, Gatsby stands at version 5.11, boasting over 300 thousand weekly npm installs and more than 50 thousand GitHub stars.
Expo
Expo stands out as the sole React framework that enables the creation of not only web applications but also native Android and iOS applications, featuring truly native UI. It offers an SDK for React Native, simplifying the utilization of native components.
Although Expo lacks features such as distinct view rendering, automated code splitting, and optimized data fetching, it excels in cross-platform development, providing built-in components and libraries, live reloading, seamless deployment across platforms, and over-the-air (OTA) updates. In fact, you can incorporate Next.js into your Expo project for code sharing between mobile and web platforms.
If your tech stack includes React and you're planning to develop a native mobile application, Expo is highly recommended. Expo has revolutionized mobile app development, making it far less arduous. Expo Application Services (EAS) facilitates easy and user-friendly app development, deployment, and iteration.
Expo, owned by Expo (the company), made its debut in 2017. It boasts 22 thousand GitHub stars, nearly half a million downloads, and the current SDK version is 49.
We trust that you've found this edition of our React newsletter both enlightening and engaging. There are more frameworks to explore, such as Shopify’s Hydrogen (covered in a previous Edition) and Astro.
What to expect next?
Stay tuned to our next copy as we’ll take a deep dive into one of the frameworks. We will include plenty of code examples to examine. If you found this newsletter informative and valuable, consider sharing it with fellow developers.
Thanks for the support and happy React coding!