Enterprise React Development with UmiJS E-Book

Douglas Alves Venancio

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 144

Veröffentlichungsjahr: 2022

Beschreibung

UmiJS is the Ant Group's underlying frontend development framework, an open source project for developing enterprise-class frontend applications. In this book, you'll get hands-on with single-page application development using UmiJS. By following practical step-by-step examples, you'll develop essential skills to build and publish your apps and create a modern user experience with responsive interfaces.
This book will help you learn the essential features of UmiJS and how to set up and build a project from scratch using React, Less, and TypeScript. You'll study Ant Design, a framework based on solid design concepts that provides a series of React components to accelerate interface development. Along the way, you'll see how to make requests and develop the frontend using simulated data while ensuring that your app has a high level of security and feedback. You'll also discover ways to improve your code quality and readability using formatting tools.
By the end of the book, you'll have learned how to use UmiJS to design user interfaces, as well as compile, test, and package your app locally, and deliver your app by deploying it to online services.

Leseprobe

Enterprise React Development with UmiJS

Learn efficient techniques and best practices to design and develop modern frontend web applications

Douglas Alves Venancio

BIRMINGHAM—MUMBAI

Enterprise React Development with UmiJS

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.

Associate Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Editor: Aamir Ahmed

Content Development Editor: Rakhi Patel

Technical Editor: Saurabh Kadave

Copy Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Hemangini Bari

Production Designer: Joshua Misquitta

Marketing Coordinater: Anamika Singh

First published: April 2022

Production reference: 1220422

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80323-896-8

www.packt.com

I want to dedicate my work to my parents, Terezinha and Donisete, and my sisters Jemima and Elisama, for being by my side in the worst and best moments of my life, and all people who believed in me and are my family in Christ.

– Douglas Alves

Contributors

About the author

Douglas Alves Venancio has a background in systems analysis and development. His passion is to help customers and the community solve problems. Over the past few years, he has mainly worked with digital products and innovation, delivering the best user experience possible with modern web applications. Currently, Douglas works at the largest hospital in Latin America, innovating in telemedicine and digital transformation.

I want to pay my special regards to the entire team who worked with me on the success of this book and to Raul Oliveira for his valuable feedback!

I'd also like to express my gratitude to Teena Evans, who invested in me early in my career.

Finally, I would also like to thank my colleagues at AX4B for their support during the time we were together and to Albert Einstein Hospital and my co-workers for their support and for being part of my professional growth.

About the reviewer

Raul Oliveira is a developer with experience in frontend, backend, and robotic process automation. He has assisted in system integrations and the requirements gathering process and has architected, prototyped, developed, tested, and implemented enterprise solutions. He has particular experience in using React, Ant Design, UmiJS, Angular, Node, Java, Amazon Web Services, and SQL and NoSQL databases, among others. A graduate of systems analysis and development, he is curious about everything that involves technology and is always willing to help others.

Table of Contents

Preface

Part 1: Configuring UmiJS and Creating User Interfaces

Chapter 1: Environment Setup and Introduction to UmiJS

Technical requirements

Setting up our environment and configuring UmiJS

Introduction to UmiJS and creating your first project

Installing the EditorConfig and Prettier extensions

Understanding the UmiJS folder structure and its main files

Adding config and locales folders

Runtime configuration

Exploring the Umi CLI and adding pages

Understanding routing and navigation in UmiJS

Understanding path parameters and query strings

Conventional routing

Navigating between pages

Using Umi UI

Adding Ant Design components

Summary

Chapter 2: Creating User Interfaces with Ant Design

Technical requirements

Introduction to the project and Ant Design

Introduction to Ant Design components

Setting up the layout and theme

Adding right-side content to the layout header

Creating the home page and setting up i18n

Setting up internationalization

Creating the Opportunities and Customers pages

Creating the Reports page

Summary

Chapter 3: Using Models, Services, and Mocking Data

Technical requirements

Defining response types and column types

Creating column definitions for ProTable

Creating the opportunity details page

Defining the activities table columns

Simulating data and API responses

Sending HTTP requests with Umi request

Using models for sharing states and logic

Summary

Part 2: Protecting, Testing, and Deploying Web Applications

Chapter 4: Error Handling, Authentication, and Route Protection

Technical requirements

Modifying the login page and defining the HTML template

Modifying the login page

Defining the default HTML template

Storing and globally accessing user information

Protecting application routes based on user roles

Using the useAccess hook

Handling HTTP error responses

Summary

Chapter 5: Code Style and Formatting Tools

Technical requirements

Understanding code style and consistency

Working with EditorConfig and Prettier

Working with EditorConfig

Working with Prettier

Configuring ESLint and Prettier

Summary

Chapter 6: Testing Front-End Applications

Technical requirements

Understanding software testing

Understanding integration testing

Understanding end-to-end testing

Writing tests with Jest

Understanding the describe method

Executing instructions before and after tests

Testing interfaces with Puppeteer

Testing the access and layout plugins

Testing the opportunity editing feature

Summary

Chapter 7: Single-Page Application Deployment

Technical requirements

Creating a mock server with Mockachino

Compiling the application and setting environment variables

Configuring the API URL environment variable

Hosting the application on AWS Amplify

Understanding more Amplify settings

Summary

Other Books You May Enjoy

Preface

UmiJS is a scalable JavaScript framework for building enterprise-level frontend applications. Umi uses React and is based on a routing system that allows you to make fast and responsive applications.

In this book, we will build a frontend web application for a customer relationship management (CRM) system. Starting with your environment setup, I will introduce you to the main features of UmiJS and how a project is structured. After that, we will explore Ant Design, a design system with a vast library of React components for quickly building modern and responsive user interfaces that deeply integrate with Umi.

You will also learn an approach based on models and services to handle HTTP requests and responses and control an application's state in complex scenarios.

After learning to work with Umi, you will explore how to improve code quality by implementing a consistent code style and using formatting tools such as Prettier and EditorConfig. You will also learn how to design and implement tests for frontend applications.

Finally, you will host your CRM frontend application on AWS Amplify, an out-of-the-box platform for frontend developers to build full-stack applications using several AWS services.

Who this book is for

This book is for React developers who are new to UmiJS and building large web applications. I assume you already know React and the basics of designing web applications.

What this book covers

Chapter 1, Environment Setup and Introduction to UmiJS, is where you will install all the tools you need to follow the exercises in this book and learn the main features of UmiJS.

Chapter 2, Creating User Interfaces with Ant Design, is where you will explore the Ant Design system and create interfaces using its React components library.

Chapter 3, Using Models, Services, and Mocking Data, is where you will learn an approach based on models and services to handle requests, manage application state, and simulate data using mock files.

Chapter 4, Error Handling, Authentication, and Route Protection, is where you will implement error handling, security controls, and authorization on your application.

Chapter 5, Code Style and Formatting Tools, is where we will discuss code style and configure Prettier and EditorConfig to automatically format and enforce a consistent code style in your project.

Chapter 6, Testing Front-End Applications, is where we will discuss software testing and implement some tests for your application using Puppeteer.

Chapter 7, Single-Page Application Deployment, is where you will prepare your application for deployment and host it on AWS Amplify.

To get the most out of this book

To complete these book exercises, you only need a computer with a modern operating system (such as Windows 10/11, macOS 10.15, or Ubuntu 20.04). I will give you instructions on how to install the other required software in Chapter 1, Environment Setup and Introduction to UmiJS.

It's important to mention that you will need a free GitHub account to access the code examples and to complete Chapter 7, Single-Page Application Deployment.

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.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Enterprise-React-Development-with-UmiJs. 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!

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: "In this example, we used the describe method to create a group for two tests related to math problems."

A block of code is set as follows:

export default {

'home.recents': 'Recent opportunities',

'greetings.hello': 'Hello',

'greetings.welcome': 'welcome',

};

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

async function login(page: Page) {

await page.goto('http://localhost:8000');

await page.waitForNavigation();

await page.type('#username', '[email protected]');

await page.type('#password', 'user');

await page.click('#loginbtn');

}

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

yarn add -D puppeteer

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "The Opportunities page allows users to browse and register a new sale opportunity."

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 Enterprise React Development with UmiJS, we'd love to hear your thoughts! Please click here to go straight to the Amazon review page 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.

Part 1: Configuring UmiJS and Creating User Interfaces

This section aims to introduce readers to UmiJS and explain its main features through practical examples. In this section, readers will create an Umi project from scratch, build interfaces, and manage the application state by implementing services and models.

This section comprises the following chapters:

Chapter 1, Environment Setup and Introduction to UmiJSChapter 2, Creating User Interfaces with Ant DesignChapter 3, Using Models, Services, and Mocking Data

Chapter 1: Environment Setup and Introduction to UmiJS

UmiJS is Ant Financial's underlying frontend framework and an open source project for developing enterprise-class frontend applications. It's a robust framework you can combine with Ant Design to provide everything you need to build a modern user experience.

In this chapter, you will learn how to install and configure a project using UmiJS and Visual Studio Code (VSCode). You'll also understand the folder structure and main files of UmiJS. Then, you'll learn how to set fast navigation between pages using umi history and finally discover Umi UI, a visual option to interact with UmiJS and add components to your project.

We'll cover the following main topics:

Setting up our environment and configuring UmiJSUnderstanding the UmiJS folder structure and its main filesExploring the Umi CLI and adding pagesUnderstanding routing and navigation in UmiJSUsing Umi UI

By the end of this chapter, you'll have learned everything you need to get started with developing your project and you will also know about the fundamental behavior of an UmiJS project and its configurations.

Technical requirements

To complete this chapter's exercises, you just need a computer with any OS (I recommend Ubuntu 20.04 or higher).

You can find the complete project in the Chapter01 folder in the GitHub repository available at the following link:

https://github.com/PacktPublishing/Enterprise-React-Development-with-UmiJs

Setting up our environment and configuring UmiJS

In this section, we'll install and configure VSCode, the EditorConfig extension, and the Prettier extension, and create our first UmiJS project.

Let's begin by installing a source code editor. You can use any editor that supports JavaScript and TypeScript, but I will use VSCode extensively in this book. It's a free editor with an integrated terminal and internal Git control that natively supports JavaScript, TypeScript, Node.js, and many extensions for other languages.

VSCode is available as a Snap package, and you can install it on Ubuntu by running the following command:

$ sudo snap install code ––classic

For Mac users, you can install it using Homebrew on macOS by running the following command:

$ brew install --cask visual-studio-code

If you are using Chocolatey on Windows, you can run the following command:

> choco install vscode

Alternatively, you can download the installer available at https://code.visualstudio.com/.

Important Note

You can find instructions on installing Homebrew on macOS at https://brew.sh/ and installing Chocolatey on Windows at https://chocolatey.org/install. If you are a Windows user, you can install Ubuntu in Windows Subsystem for Linux (WSL) and set up your project using common Linux commands. You can read more about WSL at https://docs.microsoft.com/en-us/windows/wsl/install.

Next, we need to install the dependencies required to develop with UmiJS. First, let's install Node.js by typing and running the following commands in the terminal:

$ sudo apt update

$ sudo apt install nodejs -y

The first command updates the mirrors, and the second command installs Node.js with the -y flag, which skips user confirmation to install.

You can install Node.js using Homebrew on macOS by running the following command:

$ brew install node

If you are using Chocolatey on Windows, you can run the following command:

> choco install nodejs

Alternatively, you can download the installer available at https://nodejs.org/en/.

Node.js has a default package manager named npm, but we will extensively use Yarn instead of npm in this book, so I recommend installing it. You can do that by running the following command in the terminal:

$ npm install -g yarn

This command will install Yarn globally in your system.

With that, we are ready to get started with UmiJS. But first, let's understand UmiJS a bit more and what kinds of problems it can solve.

Introduction to UmiJS and creating your first project

UmiJS is a framework for developing enterprise-class frontend applications. This means Umi provides a set of tools for solving everyday problems faced when building large business applications that need to deliver a modern user experience and must be easy to maintain and modify.

With Umi, you can quickly develop an application with internationalization, permissions, and beautiful interfaces taking advantage of Umi's deep integration with Ant Design.

Another significant advantage of Umi is that there are a variety of published plugins you can add to your project as you need. You can also extend it by developing your own plugins to meet specific solutions.

Now that you know more about Umi, let's create your first project by following these steps:

Create a new folder for the project and open it in the terminal:

$ mkdir umi-app; cd umi-app

Create a new project using the umi-app template:

$ yarn create @umijs/umi-app

Install the project dependencies by running the following command:

$ yarn

Start the project by running the following command:

$ yarn start

We now have a project set up! You can open it by typing http://localhost:8000 in the browser and see the result.

Let's do the final configurations to simplify our work by adding code formatting.

Installing the EditorConfig and Prettier extensions

One of the tools UmiJS provides by default in the umi-app template is EditorConfig, a file format that editors read to define the code style across IDEs and text editors. You'll learn more about code style in Chapter 5, Code Style and Formatting Tools