Book Image

Enterprise React Development with UmiJS

By : Douglas Alves Venancio
Book Image

Enterprise React Development with UmiJS

By: Douglas Alves Venancio

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Enterprise React Development with UmiJS
Douglas Alves Venancio
May, 2022 | 198 pages
No titles found
Table of Contents (11 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Share your thoughts
1
Part 1: Configuring UmiJS and Creating User Interfaces
Part 1: Configuring UmiJS and Creating User Interfaces
Free Chapter
2
Chapter 1: Environment Setup and Introduction to UmiJS
Chapter 1: Environment Setup and Introduction to UmiJS
Technical requirements
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
Summary
3
Chapter 2: Creating User Interfaces with Ant Design
Chapter 2: Creating User Interfaces with Ant Design
Technical requirements
Introduction to the project and Ant Design
Setting up the layout and theme
Creating the home page and setting up i18n
Creating the Opportunities and Customers pages
Creating the Reports page
Summary
4
Chapter 3: Using Models, Services, and Mocking Data
Chapter 3: Using Models, Services, and Mocking Data
Technical requirements
Defining response types and column types
Creating the opportunity details page
Simulating data and API responses
Sending HTTP requests with Umi request
Using models for sharing states and logic
Summary
5
Part 2: Protecting, Testing, and Deploying Web Applications
Part 2: Protecting, Testing, and Deploying Web Applications
6
Chapter 4: Error Handling, Authentication, and Route Protection
Chapter 4: Error Handling, Authentication, and Route Protection
Technical requirements
Modifying the login page and defining the HTML template
Storing and globally accessing user information
Protecting application routes based on user roles
Handling HTTP error responses
Summary
7
Chapter 5: Code Style and Formatting Tools
Chapter 5: Code Style and Formatting Tools
Technical requirements
Understanding code style and consistency
Working with EditorConfig and Prettier
Configuring ESLint and Prettier
Summary
8
Chapter 6: Testing Front-End Applications
Chapter 6: Testing Front-End Applications
Technical requirements
Understanding software testing
Writing tests with Jest
Testing interfaces with Puppeteer
Summary
9
Chapter 7: Single-Page Application Deployment
Chapter 7: Single-Page Application Deployment
Technical requirements
Creating a mock server with Mockachino
Compiling the application and setting environment variables
Hosting the application on AWS Amplify
Summary
Why subscribe?
10
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share your thoughts

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.

Previous Section
Next Section