Release umi 2.0 -- a pluggable enterprise-level react application framework

chencheng — Mon, 03 Sep 2018 00:07:45 +0000

It has been half a year after umi 1.0 release. 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, and various advanced routing functions, such as routing-level on-demand loading. Then with a complete plugin system, 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, 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 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, Alipay wallet, etc
🚄 Fast dev startup, support enable dll and hard-source-webpack-plugin with config
🐠 Compatible IE9, based on umi-plugin-polyfills
🍁 Support TypeScript, including d.ts definition and umi test
🌴 Deep integration with dva, 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 .

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
Enable PWA
Enable hd solution
Enable fastClick
Support title confiration

Please checkout https://umijs.org/plugin/umi-plugin-react.html for detail.

webpack@4 + babel@7 + ...

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 to extend the webpack configuration, which is a more stable solution than the previous webpack.config.js.

e.g.

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.

$ 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 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,

# 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 for more detail, or watch the 10 minutes entry umi Video version.

Migrate from umi@1

Currently, antd-pro and antd-admin have been upgraded to umi@2. If you want to upgrade, please checkout the documentation or video.

Community

Telegram Group

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! 👋

DEV Community: chencheng