A,

Umi (Chinese name: five meters) is my current focus and is in full development, several months from writing the first line of code. But gossip and emails revealed that many people were not ready to understand what UMI was and what it was capable of, so when they got tired of writing code, they started talking about UMI.

Is UMI a tool? Is. But it’s not just. My positioning for UMI is the development framework, which currently includes tools + routing, but does not include data and views. Umi [tools + routing] + DVA [data] + ANTD (-mobile)[view] In addition, UMI is currently based on React and does not support Vue and other frameworks or frameless development.

At present, in fact, the energy is limited.

 

Second,

Webpack + webpack-dev-server + Babel + PostCSS +… If you use react-router, you’ll be done.

This was the way it was used a generation ago, with tools being tools and libraries being libraries. More recently, we’ve seen that tools and libraries can actually be mashed together, and tools are part of the framework. Reduce the amount of code developers have to write through conventions, automatic code generation and parsing. So did Next. Js, so did Umi, Compilers are the New Frameworks.

 

Three,

So, why do we have a routing layer?

The route is the page, and the page is the unit that makes up the application. Taking over the routing layer means more possibilities to control the generation, switching, destruction and so on of each page. The more things a framework can do, the more meaningful it is to exist.

Such as:

  • One key to switch between single page and multiple pages
  • The runtime loads on demand
  • Compile as needed at development time
  • Static HTML generation
  • .

 

Four,

So, what does UMI have? Why should I use it?

In short, there are four points:

  • 🗃 out of the box
  • 🚀 fast
  • ⚔ ️ multiterminal
  • 😊 Development-friendly

(didn’t? 🏃🏃🏃 Don’t go, listen to me carefully.

 

Five,

Out of the box? So what’s in the box?

For comparison, take roadhog initializing a project.

Roadhog:

  1. The installation build tool relies on RoadHog
  2. Install library dependencies such as ANTD/ANTD-mobile, react + React-dom (or preact + preact-compat)
  3. For a Preact project, an alias is required
  4. If routing is required, you also need to install react-Router
  5. Install the Babel plugin, babel-plugin-import, and configure it according to the document, but the configuration may be wrong.
  6. Configure webPack Entry to package multiple pages

umi:

  1. Install dependent ON UMI

Only one step, the rest is not needed, because the umi is in the box. Many things are already available, but still allow users to choose between preact and React, antD (-mobile) versions, ESLint overwrite, merge, and so on.

 

Vi.

Umi has put a lot of effort into performance, which is invisible to developers. “You write the business code, I’ll take care of the performance,” and as UMI iterates, I guarantee your application will get faster and faster.

Mainly include:

  • PWA Support
  • Tree Shake
  • Antd (-mobile) Enables the ES Module
  • Scope Hoist
  • Intelligent extraction of public files
  • Page-level loading on demand
  • Inline Critical CSS
  • provideumi/dynamic 和 import()Syntax for lazily loading components and modules, respectively
  • Optimization of Babel – preset – umi
  • Static SSR treatment
  • link rel=preload
  • Hash building and server-side support (Phoenix Cloud)
  • Improve Rerender performance with React-constant-Elements and React-inline-Elements
  • Switch to Preact with one click
  • Progressive image loading
  • Pack umi’s built-in routing code on demand
  • .

Some are about size, some are about execution, some are about first screen time, some are about user experience, and you can talk about it for hours. You should be able to guess based on the keywords, but I won’t expand it here.

 

Seven,

Umi was created for multiterminal, which refers to web + various containers. For example, we need to deploy the code to offline package and online server of Alipay wallet simultaneously.

Because UMI is a single-page application, and each page can be accessed individually, it can be skipped via AP in container mode and via route in online mode. We use Bridgex to achieve automatic mode switching.

 

Eight,

Umi’s development experience was painstaking.

First, with the create-React-App open source library, his experience is our bottom line. Redbox displays error messages, HMR, error click to jump to IDE, ESLint error messages, etc.

In addition, UMI has done more:

  • Compile on demand (5 seconds to launch, even if you have 100 pages)
  • All configurations take effect automatically (hot update or self-restart)
  • Dynamically change the ANTD (-mobile) theme
  • Dev Server is disconnected and reconnected
  • Configuration item checksum alerts (both in the browser and console)
  • Configuration file syntax error to line
  • TypeScript support (syntax hints, TSLint, even test cases written in TS)
  • .

 

Nine,

What kind of project is suitable for using UMI?

Umi is a universal solution, can I say any type is suitable? 😆 Ok, let me tell you what doesn’t work.

  • Not React project
  • Routing is extremely complex and cannot be implemented through directory routing conventions (configuration types of routing will be considered later)
  • Not caring about the properties of the product
  • Not focused on the development experience
  • .

 

Ten,

So how do I get Started?

Install UMI first.

$ npm i umi -g

# Check the version number
$ umi -v
[email protected]
Copy the code

Then create a new directory and enter.

$ mkdir myapp
$ cd myapp
Copy the code

Start the UMI dev server.

$ umi dev
Copy the code

To open a terminal, create a Page Component in the Pages directory.

$ echo 'export default () => <div>Index Page</div>' > pages/index.js
Copy the code

Open http://localhost:8000/ in your browser and you’ll see the Index Page.

Simple!!!!

Finally, [email protected] will be officially released in early February, so stay tuned.

Related links:

  • umi@github
  • website
  • The document

(after)