Alves Enterprise React Development with UmiJS

Learn efficient techniques and best practices to design and develop modern frontend web applications
1. Auflage 2024
ISBN: 978-1-80324-808-0
Verlag: De Gruyter
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Englisch, 198 Seiten

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.

Autoren/Hrsg.

Alves, Douglas

Fachgebiete

• Mathematik | Informatik EDV | Informatik Programmierung | Softwareentwicklung Webprogrammierung
• Mathematik | Informatik EDV | Informatik Digital Lifestyle Internet, E-Mail, Social Media

Inhaltsverzeichnis

Table of Contents - Environment Setup and Introduction to UmiJS
- Creating User Interfaces with Ant Design
- Using Models, Services, and Mocking Data
- Error Handling, Authentication, and Route Protection
- Code Style and Formatting Tools
- Testing Frontend Applications
- Single-Page Application Deployment

Leseproben

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 UmiJS
• Understanding the UmiJS folder structure and its main files
• Exploring the Umi CLI and adding pages
• Understanding routing and navigation in UmiJS
• Using 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:

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

   $ mkdir umi-app; cd umi-app

2. Create a new project using the umi-app template:

   $ yarn create @umijs/umi-app

3. Install the project dependencies by running the following command:

   $ yarn

4. 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 , . Some editors and IDEs offer native support to EditorConfig, while in other cases, such as VSCode, you need to install a plugin, so let's install it by following these steps:

1. Open VSCode and press + . This shortcut will open the following field at the top:

Figure 1.1 – VSCode quick open

1. Type the following command and press to install the official extension for EditorConfig support:

   ext install EditorConfig.EditorConfig

The umi-app template comes preinstalled with Prettier, which is preconfigured for formatting the code. You can use it by running the yarn prettier command. Still, a better option is to let VSCode format it for you when you save changes or paste code blocks.

For that, we need to install the Prettier extension and configure it as the default code formatter. To install and configure the Prettier extension, follow these steps:

1. Press + and type the following command, then press to install the official extension for Prettier support:

   ext install esbenp.prettier-vscode

2. Next, press + to open the VSCode preferences, and in the search field, type formatter and press .
3. Under Editor: Default Formatter, select Prettier - Code formatter.
4. Check the Editor: Format On Paste and Editor: Format On Save options, as shown in the following screenshot:

Figure 1.2 – VSCode editor configuration

In this section, we learned how to configure our environment, learned more about UmiJS, and created our first project. Now, let's take a closer look at the project structure.

Understanding the UmiJS folder structure and its main files

In this section, you will understand the UmiJS folder structure, and you will add some essential configurations to files and folders.

The project we create based on the umi-app template generates a set of folders with responsibilities for different parts of the project. Let's see what each one does:

• mock: In this folder, we store our simulated endpoints definitions to generate a mock API that we can interact with while developing the frontend.
• src: This is the source folder where all our components are located.
• src/.umi: This folder is automatically generated by UmiJS every time the project is compiled and contains its internal configurations.
• src/pages: The React components responsible for rendering the pages in response to configured routes are located in this folder.

These are the folders included with the umi-app template, but there are other essential folders in a UmiJS...

Über Autor(innen)

Alves Douglas :

Douglas 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 with modern web applications.