Название: Large Scale Apps with React and TypeScript
Автор: Damiano Fusco
Издательство: Leanpub
Год: 2023-01-30
Страниц: 288
Язык: английский
Формат: pdf (true), epub
Размер: 10.2 MB

Build Large and Scalable front-ends that leverage component isolation, a centralized state manager, internationalization, localization, Custom Component Libraries, API-client code that easily can switch between mocked data and live data and more.

When we refer to “large scale apps”, we mean applications that have a large code base, a large number of users, and a wide range of functionality. These applications typically require efficient and scalable code that can handle high traffic and large amounts of data.

React is a popular jаvascript library for building user interfaces. It offers several benefits for developers, such as:
• Declarative code structure: React uses a declarative syntax, making it easier for developers to understand how the UI should react to changes in data.
• Reusable components: React’s component-based architecture allows for building reusable UI components, making it easier to maintain and scale the codebase.
• Virtual DOM: React uses a virtual DOM, which optimizes updates and rendering, resulting in improved performance compared to directly manipulating the actual DOM.
• Server-side rendering: React allows for server-side rendering, improving the initial load time and making it easier to optimize search engine optimization (SEO).
• Large community: React has a large and active community, which means developers have access to a wealth of resources, including tutorials, libraries, and support.

Vite is a modern build tool for jаvascript projects that aims to provide fast and efficient builds. It offers several benefits, including:
• Faster build times and development experience compared to traditional bundlers.
• Lower initial load times, as only the essential code is loaded
• Improved build size, as Vite only includes the necessary code
• Lightweight and optimized for modern web development.

The primary aim of this book is to guide you through the process of building a scalable React application by following best practices for project structure, file organization, naming conventions, state management, type checking with TypeScript, and compositional approaches using hooks. Throughout the chapters, we will grow our simple project into a robust, large-scale application that is easy to expand and maintain, showcasing how patterns, conventions, and strategies can lay a solid foundation and keep the code organized and uncluttered. We will build a TypeScript API client that can seamlessly switch between serving static mock data and communicating with a live API, allowing for front-end development to commence even before the back-end API is fully functional. Additionally, we will delve into topics such as internationalization, localization, and advanced techniques, to round out our comprehensive guide to building a scalable React application.

Build Large and Scalable front-ends with a large organized code base that is easy to expand and maintain using technique like:

Development of UI components in isolation using an API client that can easily serve live data or mocked data
Centralized state manager
Create Custom Component Libraries
Internationalization and Localization for language translation and number/dates formatting according to a specific culture
TypeScript type-checking at development time to decrease run-time bugs or errors
Directory structure, file, and code naming conventions
Unit tests for models and components
Container Components
Composition architecture (hooks)
And more

The audience for this book is from beginners with some experience in MV* applications, to intermediate developers. The format is similar to a cookbook, but instead of individual recipes we’ll go through creating a project and keep enhancing, refactoring, and make it better as we move forward to more advanced chapters to show different patterns, architectures, and technologies. Some of the patterns illustrated here are not specific to React, but can applied in any application written in TypeScript or jаvascript.

Prerequisites:
This book assumes that you are familiar with the terminal (command prompt on Windows), have already worked with the Node.js and NPM (Node Package Manager), know how to install packages, and are familiar with the package.json file. It also assumes you are familiar with jаvascript, HTML, CSS and in particular with HTML DOM elements properties and events. It will also help if you have some preliminary knowledge of TypeScript1 as we won’t get into details about the language itself or all of its features but mostly illustrate how to enforce type checking at development time with it.