Release umi 2.0 -- a pluggable enterprise-level react application framework
Tags: react, javascript, framework
Published: 2018-09-03 00:07:45

---
title: Release umi 2.0 -- a pluggable enterprise-level react application framework
published: true
description: 
tags: 
  - react
  - javascript
  - framework
---

<img src="https://gw.alipayobjects.com/zos/rmsportal/CZcJsXOXCqIbglBjTrWs.png" width="120" height="120" />

[https://umijs.org/](https://umijs.org/)

It has been half a year after [umi 1.0 release](https://github.com/sorrycc/blog/issues/64). During this time, umi has done a lot of refactoring and improvement , 438 commits, 20 beta versions. And today, we are very happy to see **it released version 2.0**, and repositioned as **a pluggable enterprise-level react application framework**.

## What is umi?

It's based on routing, supports [next.js-like conventional routing](https://umijs.org/guide/router.html), and various advanced routing functions, such as [routing-level on-demand loading](https://umijs.org/en/plugin/umi-plugin-react.html#dynamicimport). Then with a complete [plugin system](https://umijs.org/plugin/), covering every life cycle from source code to build product, umi is able to support various functional extensions and business needs, currently umi have almost 50+ plugins in both community and inside company.

umi is the basic front-end framework of [Ant Financial](https://www.antfin.com/), and has served 600+ applications directly or indirectly, including java, node, mobile app, Hybrid app, pure front-end assets app, CMS app, and more. umi has served our internal users very well and hopes that he can also serve external users well.

It has following features:

* 📦 **Out of box**，built-in react、react-router, etc
* 🏈 **Next.js like and [full featured](https://umijs.org/guide/router.html) routing conventions**, also support configured routing
* 🎉 **Complete plugin system**, covering every lifecycle from source code to production
* 🚀 **High performance**, support PWA, route level code splitting, etc via plugin
* 💈 **Support static export**, , adapt to various environments, such as console app, mobile app, [egg](https://github.com/eggjs/egg), Alipay wallet, etc
* 🚄 **Fast dev startup**, support enable [dll](https://umijs.org/plugin/umi-plugin-react.html#dll) and [hard-source-webpack-plugin](https://umijs.org/plugin/umi-plugin-react.html#hardSource) with config
* 🐠 **Compatible IE9**, based on [umi-plugin-polyfills](https://umijs.org/plugin/umi-plugin-react.html#polyfills)
* 🍁 **Support TypeScript**, including d.ts definition and `umi test`
* 🌴 **Deep integration with [dva](https://dvajs.com/)**, support duck directory, automatic loading of model, code splitting, etc

## What's new in 2.0?

### Light core and beginner friendly

umi@1 has many built-in optimizations, such as on-demand compilation, on-demand loading, eslint, pwa, antd, etc. These solutions can improve the development experience and production code, but also improve the cost of learning umi.

So umi@2 turns off a lot of optimizations by default:

* Compile on demand
* Load on demand
* serviceWorker
* antd
* ...

These features are then implemented by plugins, which could be turned on as needed to ensure the lightweight of the umi core. At the same time, the default build only produces index.html, umi.js, and umi.css, which is more friendly to the beginner.

### New Plugin system

The plugin system of umi@1 is a bit too powerful, everything can be done and modified. So umi@2 refactored the plugin mechanism, **made a lot of constraints, clarified what can be done, what can't be done,** and provides a more friendly [plugin API](https://umijs.org/plugin/develop.html) .

At the same time, this plugin system has been verified in our company internally. The excellent internal framework Bigfish consisting of more than 30 plugins is serving Ant Financial well, including features like bacon, deploy with java/node, performance, service integrate, permissions, etc.

### umi-plugin-react

The plugin for umi@1 is a bit loose. It usually needs to install multiple plugins when using umi. It is troublesome to upgrade and use, so we provide umi-plugin-react. umi-plugin-react is a collection of plugins, similar to the concept of presets in babel.

Currently, there are 13 plugins in umi-plugin-react, including:

* Dva integrate
* Antd integrate
* Routes modification
* IE(9/10/11) compatibility
* Convensional i18n solution
* Switch react to preact or other libraries
* Route level code-splitting, and the level could be customized
* Boost dev with dll
* Boost dev with [hard-source-webpack-plugin](https://github.com/mzgoddard/hard-source-webpack-plugin)
* Enable PWA
* Enable hd solution
* Enable fastClick
* Support title confiration

Please checkout [https://umijs.org/plugin/umi-plugin-react.html](https://umijs.org/plugin/umi-plugin-react.html) for detail.

### [webpack@4](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4) + [babel@7](https://babeljs.io/blog/2018/08/27/7.0.0) + ...

We upgraded the main dependencies to the latest, such as webpack@4, babel@7, less@3, postcss@7, typescript@3, etc., as well as related build performance improvements.

And, we used [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) to extend the webpack configuration, which is a more stable solution than the previous `webpack.config.js`.

e.g.

```js
export default {
  chainWebpack(config, { webpack }) {
    // Set alias
    config.resolve.alias.set('a', 'path/to/a');

    // Remove the default progress bar
    config.plugins.delete('progress');
  },
}
```

### `umi generate`

umi@2 supports the `umi generate`(alias of `umi g`) command to generate files quickly.

```bash
$ umi g page index
```

And, `umi generate` is extendable. For example, umi-plugin-dva extends the key `dva:model`, so we could generate the model of dva with `umi g dva:model global`.

### Other improvements

* Configuring environment variables via `.env` and `.env.local`
* Supports extending routing information of conventional routing via comments in the `yaml` format
* Improved umi dev 404 page
* Refact `umi/dynamic` with react-loadable
* Improve `umi test`, allows you to specify test files, and pass parameters to jest-cli
* Improve `umi test`, supports webpack aliases
* Improve `umi dev`, supports configuring https certificates
* Improve `umi dev`, do styles extract, then uses css-hot-loader for hot updates, consistent with `umi build`
* Enable [es5ImcompatibleVersions](https://github.com/umijs/es5-imcompatible-versions) by default
* Remove the large performance consumer case-sensitive-paths-webpack-plugin
* Add webpack alias `@` which point to the `src` directory
* Use local umi to run if found

## Getting Started

Get start is very easy,

```bash
# Install deps
$ yarn global add umi # OR npm install -g umi

# Create application
$ mkdir myapp && cd myapp

# Create page
$ umi generate page index

# Start dev server
$ umi dev

# Build and deploy
$ umi build
```

Checkout [https://umijs.org/guide/getting-started.html](https://umijs.org/guide/getting-started.html) for more detail, or watch the [10 minutes entry umi Video version](https://www.youtube.com/watch?v=vkAUGUlYm24).

## Migrate from umi@1

Currently, [antd-pro](https://github.com/ant-design/ant-design-pro) and [antd-admin](https://github.com/zuiidea/antd-admin) have been upgraded to umi@2. If you want to upgrade, please checkout the [documentation](https://umijs.org/guide/migration.html) or [video](https://youtu.be/1mvKzFLLBck).

## Community

### Telegram Group

[https://t.me/joinchat/G0DdHw-44FO7Izt4K1lLFQ](https://t.me/joinchat/G0DdHw-44FO7Izt4K1lLFQ)

## At last

Thanks to all the internal and external people who participated in contributing umi and using umi in the project. umi is just getting started, I hope you can improve it together, ssee you at Github! 👋