React Application Architecture for Production E-Book

Alan Alickovic

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 186

Veröffentlichungsjahr: 2023

Beschreibung

Building large-scale applications in production can be overwhelming with the amount of tooling choices and lack of cohesive resources. To address these challenges, this hands-on guide covers best practices and web application development examples to help you build enterprise-ready applications with React in no time.
Throughout the book, you’ll work through a real-life practical example that demonstrates all the concepts covered. You’ll learn to build modern frontend applications—built from scratch and ready for production. Starting with an overview of the React ecosystem, the book will guide you in identifying the tools available to solve complex development challenges. You’ll then advance to building APIs, components, and pages to form a complete frontend app. The book will also share best practices for testing, securing, and packaging your app in a structured way before finally deploying your app with scalability in mind.
By the end of the book, you’ll be able to efficiently build production-ready applications by following industry practices and expert tips.

Leseprobe

React Application Architecture for Production

Learn best practices and expert tips to deliver enterprise-ready React web apps

Alan Alickovic

BIRMINGHAM—MUMBAI

React Application Architecture for Production

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Editor: Aamir Ahmed

Content Development Editor: Abhishek Jadhav

Technical Editor: Simran Udasi

Copy Editor: Safis Editing

Project Coordinator: Aishwarya Mohan

Proofreader: Safis Editing

Indexer: Rekha Nair

Production Designer: Vijay Kamble

Marketing Coordinator: Anamika Singh

First published: December 2022

Production reference: 1011222

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80107-053-9

www.packt.com

To my younger self.

– Alan Alickovic

Contributors

About the author

Alan Alickovic is a software engineer, consultant, mentor, and open source enthusiast. During the years of his software engineering career, he has gained extensive experience in building applications of various scales for start-ups and large organizations in a variety of different industries. He also has plenty of experience in leading and mentoring engineers and helping them grow and progress in their careers.

A huge thanks to the awesome Packt team that worked with me on this book. Their support and guidance throughout the entire process were the key components in making this book possible.

A big thanks to all the reviewers that made an effort to go over the book and point out things that could be improved.

I would also like to thank all my awesome colleagues and the people I have worked with throughout my career, for the valuable lessons I learned from them and for making my job easier.

And finally, special thanks goes to my family and friends, for their unconditional patience and support.

About the reviewers

Pawel Czekaj has a bachelor’s degree in computer science. He has 12 years of experience as a frontend developer. Currently, he works as a principal software engineer at Ziflow Ltd. He has expertise in Angular, React.js, Amazon Web Services, Auth0, NestJS, and many other frameworks. He is currently working on enterprise-level proofing solutions built with Angular and Spring Boot.

Kirill Ezhemenskii is an experienced software engineer, a frontend and mobile developer, a solution architect, and the CTO at a healthcare company. He’s a functional programming advocate and an expert in the React stack, GraphQL and TypeScript. He’s also a React Native mentor.

Table of Contents

Preface

1

Understanding the Architecture of React Applications

Benefits of having a good application architecture

A good foundation for the project

Easier project management

Increased development speed and productivity

Cost-effectiveness

Better product quality

Exploring the architectural challenges of React applications

What are the challenges when building a React application?

Understanding architectural decisions when building React applications

Bad architectural decisions

Good architectural decisions

Planning our application

What are we building?

Application requirements

Data model overview

Exploring the technical decisions

Summary

2

Setup and Project Structure Overview

Technical requirements

Next.js application overview

Why Next.js?

Next.js application structure

TypeScript setup overview and usage

Why TypeScript?

TypeScript setup

Basic TypeScript usage

ESLint setup overview

Prettier setup overview

Pre-committing checks setup overview

Project structure overview

Features

Summary

3

Building and Documenting Components

Technical requirements

Chakra UI

Chakra UI setup

Building components

Button

InputField

Link

Storybook

Storybook configuration

Storybook scripts

Documenting components

Button stories

Exercises

Summary

4

Building and Configuring Pages

Technical requirements

Next.js routing

Next.js rendering strategies

Client-side rendering

Server-side rendering

Next.js SEO

Layouts

Wrapping JSX of every page with the layout component

Attaching the layout to the page component and using it to wrap the entire component

Building the pages

The public organization details page

The public job details page

The jobs page in the dashboard

The job details page in the dashboard

The create job page

404 page

Summary

5

Mocking the API

Technical requirements

Why is mocking useful?

Introduction to MSW

Configuration overview

Writing our first handler

Configuring data models

Configuring request handlers for API endpoints

API utils

Auth handlers

Jobs handlers

Organizations handlers

Summary

6

Integrating the API into the Application

Technical requirements

Configuring the API client

Configuring React Query

Why React Query?

Configuring React Query

Defining the API layer for the features

Jobs

Organizations

Consuming the API in the application

Public organization

Public job

Dashboard jobs

Dashboard job

Create job

Summary

7

Implementing User Authentication and Global Notifications

Technical requirements

Implementing the authentication system

Authentication system overview

Building authentication features

Protecting resources that require the user to be authenticated

Implementing notifications

Creating the store

Creating the UI

Integrating and using notifications

Summary

8

Testing

Technical requirements

Unit testing

Integration testing

Dashboard jobs page

Dashboard job page

Job creation page

Public organization page

Public job page

Login page

End-to-end testing

Dashboard flow

Public flow

Summary

9

Configuring CI/CD for Testing and Deployment

Technical requirements

What is CI/CD?

Using GitHub Actions

Workflows

Events

Jobs

Actions

Runners

Configuring the pipeline for testing

Code checks job

End-to-end testing job

Configuring the pipeline for deploying to Vercel

Having a Vercel account

Disabling GitHub integration for Vercel

Linking the project to Vercel

Providing environment variables to GitHub Actions

Creating the job that will deploy the application

Summary

10

Going Beyond

Feature improvements

Jobs feature improvements

Organization improvements

Adding job applications

Filtering and paginating lists of data

Adding user registration

Technical improvements

Server-side rendering and caching

React Query hydration for SSR

Using query key factories

Code scaffolding

Validating form inputs and API responses with Zod

Next.js 13

Appendix

GraphQL

Monorepos

Micro frontend architecture

Summary

Index

Other Books You May Enjoy

Preface

Building large-scale applications in production with React can be overwhelming with the number of choices and lack of cohesive resources. This hands-on guide is designed to share practices and examples to help address these challenges in building enterprise-ready applications with React.

This book provides a concrete and practical example, developed throughout, to demonstrate the concepts in the book. You will learn how to build modern frontend applications from scratch that are ready for production. Beginning with getting an overview of the React ecosystem, you will identify the tools available to solve complex development challenges. You will learn how to build mocked APIs, components, and pages that form a complete frontend app. The book will also share practices for testing, securing, and packaging your app in a structured way. Finally, you will learn how to deploy your app to production with scalability in mind.

By the end of the book, you will be able to efficiently build production-ready applications by following industry practices and expert tips.

Who this book is for

This book is for intermediate-level web developers that already have a good understanding of JavaScript, React, and web development in general and want to build large-scale React applications effectively. Besides experience with JavaScript and React, some experience with TypeScript will be beneficial.

What this book covers

Chapter 1, Understanding the Architecture of React Applications, teaches you how to think about applications from an architectural point of view. It starts by covering the importance of good architecture and its benefits. Then, it covers some bad and good practices in React applications. Finally, we will cover the planning of a real React application, which we will be building throughout the book.

Chapter 2, Setup and Project Structure Overview, covers all the tools and setup for the application that we will be building. It will introduce us to tools such as Next.js, TypeScript, ESLint, Prettier, Husky, and Lint Staged. Finally, it will cover the feature-based project structure for the project, which improves the code base organization.

Chapter 3, Building and Documenting Components, introduces us to Chakra UI, a great component library that we will be using as building blocks for our UI. We will cover setting it up, and then we will build the components that we can reuse all over the application to make the UI of the application more consistent. Finally, we will learn about documenting those components with Storybook.

Chapter 4, Building and Configuring Pages, covers Next.js in more depth. First, we will cover the basics, such as Next.js routing and the rendering strategies it supports. Then, we will learn how to handle shared layouts. Finally, we will apply those techniques by building the pages for our application.

Chapter 5, Mocking the API, dives deep into mocking the API that can be used for development and testing. It starts by explaining why it is useful. Then, it introduces the MSW library, which allows mocking API endpoints in an elegant way. Finally, we will apply what we have learned by implementing the endpoints for our application.

Chapter 6, Integrating the API into the Application, teaches us how to communicate with the backend API. We will learn how to configure the API client and React Query and use that to build the API layer for our application. Then, we will apply what we have learned by implementing the API calls for our application.

Chapter 7, Implementing User Authentication and Global Notifications, starts by teaching you how to implement the authentication for your application. Then, it demonstrates how to handle the global state by implementing the notifications system for our application.

Chapter 8, Testing, teaches you how to approach testing a React application. It covers unit testing with Jest, integration testing with Jest and React Testing Library, and end-to-end testing with Cypress.

Chapter 8, Configuring CI/CD for Testing and Deployment, covers the basics of a GitHub Actions pipeline. Then, we will learn how to configure the pipeline for code checking and testing. Finally, we will configure it for deployment to Vercel.

Chapter 10, Going Beyond, touches on some uncovered topics. Since the application is at the MVP stage, there is room for improvement, and this chapter covers some of those improvements. We will also learn about some technical improvements that would help the application scale even further.

To get the most out of this book

Previous experience with JavaScript and React and fundamental knowledge of web development will make it a lot easier to follow along with the content of the book. It is also desirable to have some experience with TypeScript and Next.js, but it should be possible to follow along without it since we will cover the basics in the book.

Software/hardware covered in the book

Operating system requirements

React 18

macOS, Windows, or Linux

Next.js 12

TypeScript 4.8

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

For more details and information about the setup and requirements, it is best to check the README file in the book’s GitHub repository.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/React-Application-Architecture-for-Production. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/DjfrW.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “Let’s create the .github/workflows/main.yml file and the initial code.”

A block of code is set as follows:

name: CI/CD on:   - push jobs: # add jobs here

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

jobs:   # previous jobs   e2e:     name: E2E Tests     runs-on: ubuntu-latest     steps:       - uses: actions/checkout@v3       - run: mv .env.example .env       - uses: cypress-io/github-action@v4         with:           build: npm run build           start: npm run start

Any command-line input or output is written as follows:

git clone https://github.com/PacktPublishing/React-Application-Architecture-for-Production.git

Bold: Indicates a new term, an important word, or words that you see on screen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “When the user clicks the Apply button, the email client is opened with the correctly set subject.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read React Application Architecture for Production, we’d love to hear your thoughts! Please select https://www.amazon.in/review/create-review/error?asin=1801070539 for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content..

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781801070539

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly

1

Understanding the Architecture of React Applications

React is an open source JavaScript library for building user interfaces created and maintained by Meta (Facebook).

It is probably the most popular library for building user interfaces nowadays. The reason for its popularity is that it is quite performant and has a small API, which makes it a simple yet very powerful tool for creating user interfaces.

It is component-based, which allows us to split large applications into smaller parts and work on them in isolation.

React is also great because its core API is decoupled from the platform, allowing projects such as React Native to exist outside the web platform.

One of React’s biggest strengths but also weaknesses is that it is very flexible. This has allowed its community to build great solutions. However, defining a good application architecture out of the box can be challenging.

Making the right architectural decisions is crucial for any application to succeed, especially once it needs changes or it grows in terms of size, the number of users, and the number of people working on it.

In this chapter, we will cover the following topics:

Benefits of having a good application architectureExploring the architectural challenges of React applicationsUnderstanding architectural decisions when building React applicationsPlanning our application

By the end of this chapter, we will learn to think a bit more from the architectural point of view when starting React application development.

Benefits of having a good application architecture

Every application uses some architecture, even without thinking about it. It might have been chosen randomly and might not be the right one for its needs and requirements, but still, every application does have an architecture.

That’s why being mindful of the proper architecture at the beginning is essential for every project. Let’s define a couple of reasons why:

A good foundation for the projectEasier project managementIncreased development speed and productivityCost-effectivenessBetter product quality

It is worth noting that all applications are prone to requirement changes, so it is not always possible to predict everything upfront. However, we should be mindful of the architecture from the start. We will discuss these reasons in detail in the following sections.

A good foundation for the project

Every building should be built on solid foundations to remain resilient to different conditions such as age, weather conditions, earthquakes, and other causes.

The same thing can apply to applications. Multiple factors cause various changes during a project’s lifetime, such as changes in requirements, organization, technologies, market, finance, and more. Being built on solid foundations will make it resilient to all those changes.

Easier project management

Having different components organized properly will make organizing and delegating tasks much easier, especially if a larger team is involved.

Good component decoupling will allow better splitting of work between teams and team members and faster iterations without team members being blocked by each other.

It also allows better estimates to be made regarding how much time is required for a feature to be completed.

Increased development speed and productivity

Having a good architecture defined allows developers to focus on the product they are building without overthinking the technical implementations since most of the technical decisions should have already been made.

Besides that, it will provide a smoother onboarding process for new developers, who can be productive quickly after familiarizing themselves with the overall architecture.

Cost-effectiveness

All the reasons mentioned in the previous sections indicate that the improvements a good architecture brings will reduce costs.

In most cases, the most expensive cost of every project is people and their work and time. Therefore, by allowing them to be more efficient, we can reduce some redundant costs a bad architecture could bring.

It will also allow better financial analysis and planning of pricing models for software products. It will make it easier to predict all the costs the platform requires to be functional.

Better product quality

Making all team members productive gives them time to focus and spend more time on important things, such as the business requirements and the needs of users, rather than spending most of the time fixing bugs and reducing technical debt.

Better product quality will also make our users more satisfied, which should be the end goal.

To exist, every piece of software needs to meet its requirements. We’ll see what these software requirements are in the following section.

Exploring the architectural challenges of React applications

In this section, we will focus on React and see what things are necessary to consider when building React applications and the main challenges most React developers face when building their applications.

What are the challenges when building a React application?

React is a great tool for building user interfaces. However, there are some challenging things we should think about when building an application. It is very flexible, which is both a good and a bad thing. It is good in the sense that we can define the architecture of different parts of the application without the library getting in our way.

By being so flexible, React has gathered a large community of developers worldwide, building different open-source solutions. There is a complete solution for literally any problem we might encounter during development. This makes the React ecosystem very rich.

However, that flexibility and ecosystem richness come with a cost.

Let’s take a look at the following React ecosystem overview diagram made by roadmap.sh:

Figure 1.1 – React developer roadmap by roadmap.sh

As shown in Figure 1.1, there is a lot to consider when building an application with React. Let’s also keep in mind that this diagram might show just the tip of the iceberg. Many different packages and solutions could be used to build the same application.

Some of the most frequent questions when starting with a new React application are as follows:

What project structure are we using?What rendering strategy are we using?What state management solution are we using?What styling solution are we using?What data fetching approach are we using?How are we going to handle user authentication?What testing strategies are we going to use?

These challenges are not limited to React – they are relevant to building frontend applications in general, regardless of which tools are being used. But since this book focuses on React, we will be approaching them from that perspective.

What project structure are we using?

Because React is very flexible and has a very small API, it is unopinionated about how we should structure our projects. Here is what Dan Abramov, one of the maintainers of React, says on this:

“Move files around until it feels right”

And that is a very good point. It will mostly depend on the nature of the application. For example, we wouldn’t organize a social network application and a text editor application in the same way because they have different needs and different problems to solve.

What rendering strategy are we using?

It depends on the nature of our application.

If we are building an