introduce

Recently, I came into contact with a new React framework, which greatly reduced my development time and made it easy to learn and get started. But there isn’t much discussion on the forums about this framework. I’ll give you an overview of the framework and some tips on how to use it.

It is a new React development framework written by DVA developer Qian Yun. It is both a framework and a tool. It can be thought of simply as a performance-focused front-end framework of class Next-js. Reduce the amount of code developers need to write by facilitating development through conventions, automatic generation and parsing of code. Umi is a universal solution that applies to almost all web environments.

2. Advantages of UMI UMI is a class next. Js focused performance front-end framework, its advantages are:

  • Lots of performance optimizations built in
  • Multiterminal, seamless support for container and browser access
  • Webpack-like plugin mechanism
  • There is friendly support for ANTD and DVA. You need to know redux and React-Router when using the official scaffolding creation-React-app. UMI is a combination of the current market popular DVA status management tools and file routing way to develop the project. What is file-as-a-route? That is you in the page under the new file, UMI will automatically help you generate a matching route! Isn’t it very convenient, especially in multi-team development where you don’t have to worry about everyone’s route = route configuration?

“Umi has webpack-like flexible plug-in mechanism, he is a shelf,” the author said. The main UMI project, with less than 700 lines of code (629), lays down the skeleton, exposes the framework’s lifecycle hooks, and then enriches the functionality (including existing internal logic) through plug-ins. I prefer to describe it as a gundam toy, for just started players, according to the instructions, step by step to assemble their favorite toy. For Goplay, the official provides a skeleton that guarantees high mobility, and then you can DIY yourself, use materials and design methods at will. The same is true for UMI. For friends who just touch the front end, you can fulfill the company’s business needs well. For those of you who have a certain understanding of the front end, you can modify it at will, including configuration, compilation, development, templates, request methods, data flows, and so on. Almost everything you can think of in front end engineering allows you to customize. And as you work with these configurable items step by step, you get a step by step understanding of front-end engineering.

4. The performance of the umi To project performance, UMI also did a lot of optimization, including size, execution efficiency, and the first screen load time, user experience, etc, but these for developers is no perception, say that sometimes you can upgrade the plugin version, you of the whole project was optimized, you don’t need any extra operation. “You just write the business code, I’ll take care of the performance, and as UMI iterates, I guarantee your application will get faster and faster,” he says. To put it simply, UMI did out of the box, for developers and front-end beginners is very friendly.

In the next article, I will explain how to use UMI