Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    From $11.99/month after trial. Cancel anytime.

    Enterprise React Development with UmiJS: Learn efficient techniques and best practices to design and develop modern frontend web applications
    Enterprise React Development with UmiJS: Learn efficient techniques and best practices to design and develop modern frontend web applications
    Enterprise React Development with UmiJS: Learn efficient techniques and best practices to design and develop modern frontend web applications
    Ebook326 pages1 hour

    Enterprise React Development with UmiJS: Learn efficient techniques and best practices to design and develop modern frontend web applications

    By Douglas Alves Venancio

    ()

    Read preview

    About this ebook

    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.

    LanguageEnglish
    PublisherPackt Publishing
    Release dateMay 23, 2022
    ISBN9781803248080
    Enterprise React Development with UmiJS: Learn efficient techniques and best practices to design and develop modern frontend web applications

    Related to Enterprise React Development with UmiJS

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • UNLIMITED

      Discover Easy-to -build Desktop Apps

      Oct 22, 2019

      Electron is actually a browser packaged with node.js and a few APIs. Because it’s built on top of the Chromium browser, you have everything available from there to add to your application. GitHub developed it as part of the Atom editor; it was open-s

      7 min read

    • UNLIMITED

      Contributing For Non - Coders

      Jan 10, 2023

      Contributing For Non - Coders
      9 min read

    • UNLIMITED

      Three Low-code Options

      Nov 12, 2020

      Counting Intel, Vodafone and VW among its customers, OutSystems helps businesses create cloudbased, on-premises and hybrid applications for mobile and web. Its development environment is predominantly drag-and-drop, with views for processes, data and

      3 min read

    • UNLIMITED

      Assessing Ease Of Use

      Jul 28, 2020

      Assessing Ease Of Use
      3 min read

    • UNLIMITED

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    • UNLIMITED

      Code An Admin Back-end In Django

      Dec 13, 2022

      Credit: www.djangoproject.com OUR EXPERT Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://

      6 min read

    • UNLIMITED

      Doctor

      Nov 5, 2024

      Doctor
      6 min read

    • UNLIMITED

      1Password 8

      Mar 21, 2022

      1Password 8
      2 min read

    • UNLIMITED

      Code A Cataloguing Application In Python

      Nov 15, 2022

      Credit: www.djangoproject.com Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://github.com/mat

      8 min read

    • UNLIMITED

      1Password 8

      Nov 9, 2021

      1Password 8
      2 min read

    • UNLIMITED

      RapidWeaver Classic

      Aug 23, 2022

      RapidWeaver Classic
      3 min read

    • UNLIMITED

      Build A Club On The Next-gen Web

      Aug 23, 2022

      OUR EXPERT Onthe current web there are a few, enormous companies that dominate your activities and collect your data. For many of us this is a worrying development that we need to do something about. One technical solution is to develop a new versio

      9 min read

    • UNLIMITED

      A.i. Coding

      Aug 22, 2023

      A.i. Coding
      16 min read

    • UNLIMITED

      Awesome Apps For Less

      Oct 11, 2022

      Awesome Apps For Less
      3 min read

    • UNLIMITED

      1Password 8

      Feb 8, 2022

      1Password 8
      2 min read

    • UNLIMITED

      Web App Security

      Jun 29, 2021

      Web App Security
      8 min read

    • UNLIMITED

      Visual Studio Code 1.74

      Mar 7, 2023

      Visual Studio Code 1.74
      2 min read

    • UNLIMITED

      Password Managers

      Feb 6, 2024

      Password Managers
      14 min read

    • UNLIMITED

      Opinion

      Aug 20, 2024

      Italo Vignoli is one of the founders of LibreOffice and the Document Foundation. “Think about the personal and confidential information in your office suite documents; it’s essential your office suite respects user privacy. LibreOffice does not ask y

      3 min read

    • UNLIMITED

      Automotive Grade Linux

      Nov 16, 2021

      Automotive Grade Linux
      9 min read

    • UNLIMITED

      How To Create Your Own Android Apps Without Coding

      Oct 21, 2019

      THIS ANDROID HOW-TO explores new territory for many readers, but we really wanted to answer the questions: Can you create a mobile device app without becoming a programmer? Is it affordable, and is it worth the effort? It all started when an app-buil

      4 min read

    Related categories

    Reviews for Enterprise React Development with UmiJS

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Enterprise React Development with UmiJS - Douglas Alves Venancio

      Cover.jpg

      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

      Enjoying the preview?
      Page 1 of 1