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
.envand.env.local - Supports extending routing information of conventional routing via comments in the
yamlformat - Improved umi dev 404 page
- Refact
umi/dynamicwith 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 withumi build - Enable es5ImcompatibleVersions by default
- Remove the large performance consumer case-sensitive-paths-webpack-plugin
- Add webpack alias
@which point to thesrcdirectory - 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! 👋
Top comments (1)
老大 棒棒 😌