DEV Community

chencheng
chencheng

Posted on

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

https://umijs.org/

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');
  },
}
Enter fullscreen mode Exit fullscreen mode

umi generate

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

$ umi g page index
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
monsterooo profile image
monsterooo

老倧 ζ£’ζ£’ 😌