UmiJS is an extensible, enterprise-level React framework authored by Alipay’s developer team. Alipay uses it in its internal projects, as do several other companies such as Youku and Netease.
While exploring this framework, I discovered that it’s similar to Next.js in a handful of interesting ways. Both have support for routing and server-side rendering out of the box as well as TypeScript.
Along the way, I got curious about Umi and decided to look deeper into the framework to see how it compares with Next. I evaluated both frameworks based on the criteria listed below. Here are my findings.
CSS support
Next has support for all CSS styling methods including CSS in JS, Sass, Stylus, Less, CSS module and Post CSS. You can just import the css file into your pages in case of regular CSS:
// styles.css
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
// pages/_app.js
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Next has official plugins for writing CSS using Sass, Stylus, and Less. If you’re using CSS modules, you’ll need to follow Next’s naming convention, [name].module.css.
// Button.module.css
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
color: white;
background-color: red;
}
// Button.js
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
Destroy
</button>
)
}
Umi, on the other hand, has dropped support for Sass and currently supports regular CSS, CSS module, and Less. If you want to use Sass or Stylus, you’ll need to configure the webpack config to do so. Umi automatically recognizes the use of CSS modules.
// Example of CSS Modules import styles from './foo.css'; // Example of Non-CSS Modules import './foo.css';
webpack customization
Next features such as code splitting, hot code reloading, and server-side rendering already work out of the box. But if you need extra power or just a different configuration, Next allows you to write your own configuration through its next.config.js module. The config file is a regular Node.js module instead of a JSON file.
module.exports = {
/* config options here */
}
Umi also has its own configuration file, but it’s in the form of JSON file.
export default {
base: '/docs/',
publicPath: '/static/',
hash: true,
history: {
type: 'hash',
},
}
Documentation
I found Next’s documentation to be more detailed in explaining how to use each feature.
To show how each feature works, the docs walk you through building a simple blog app.
Another thing to consider: part of Umi’s documentation is not yet translated into English (Umi’s main user base is located in China). I had to use Google Translate feature to help me read the documentation.
CLI support
Umi has some interesting CLI support to generate pages and check the current webpack configuration.
Usage: umi <command> [options]
Commands:
build build application for production
config umi config cli
dev start a dev server for development
generate generate code snippets quickly
help show command helps
plugin inspect umi plugins
version show umi version
webpack inspect webpack configurations
dva
test test with jest
Run `umi help <command>` for more information of specific commands.
Visit https://umijs.org/ to learn more about Umi.
Next’s CLI support is focused solely on helping you to deploy the application.
Usage $ next <command> Available commands build, start, export, dev, telemetry Options --version, -v Version number --help, -h Displays this message For more information run a command with the --help flag $ next build --help
Plugin system
Umi’s internal functions are all third-party plugins. The documentation covers how its plugin system works, complete with a test framework.
Next has its own set of plugins, but I can’t seem to find instructions on how to create one and share it with other developers.
Why Next has the edge
Both Next and Umi fully support building React applications for production with little to no configuration. Next has more complete support for writing CSS and customizing its webpack configuration, while Umi is more opinionated and doesn’t give much support for webpack configurations.
For now, I prefer Next to Umi because I find the Umi documentation a bit hard to understand. I also found more guides for building things with Next, such as e-commerce websites and static sites.
Are you adding new JS libraries to improve performance or build new features? What if they’re doing the opposite?
There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.
Learn more →LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.
https://logrocket.com/signup/LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — Start monitoring for free.
