UmiJS vs Roots

Features

• 📦 Out of box, with built-in support for react, react-router, jest, webpack, rollup, etc.
• 🏈 Next.js like and full featured routing conventions, which also supports configured routing
• 🎉 Plugin system, covering every lifecycle from source code to production
• 🚀 High performance, including PWA support, route-level code splitting, etc.
• 💈 Support for static export, Suitable for environments without server
• 🚄 Fast dev startup, including dll support with config etc.
• 🐠 Polyfill solution, add JS and CSS polyfill with targets config, lowest to IE9
• 🍁 Support TypeScript, including d.ts definition and umi test
• 🌴 Deep integration with dva, including duck directory support, automatic loading of model, code splitting, etc
• ⛄️ Support MPA，based on umi-plugin-mpa

Install

Install tool

$ yarn global add umi # OR npm install -g umi

Build

Create a page

$ mkdir myapp && cd myapp
$ umi generate page index

Run

Start the development server

$ umi dev

Build and deploy

$ umi build

Examples

• Ant Design Pro
• Antd Admin

Roots is a toolkit built on best practices for advanced front-end web development. It has a very large number of features, which I’ll attempt to list below. Roots comes in the form of a static site build tool by default, but also includes templates and plugins for express and rails.

• extremely simple installation
• clean and minimal default project template
• clean and intuitive app settings file
• jade, stylus, and coffeescript default stack
• easy to add languages with a simple and well-documented plugin interface
• super fast live reload implementation
• compile errors displayed as a flash message, doesn’t break workflow
• layouts and partials fully supported
• coffeescript and markdown can be written directly in views
• global variables and functions (view helpers)
• extremely robust, modular, and powerful css helper library built in
• single command deploy to heroku, nodejitsu, or github pages
• intelligently minifies html, css, and js on deploy
• efficient client-side js management through bower and require.js
• automatically precompiles jade templates for use in client-side MVCs like backbone
• use dynamic content to create collections, blogs, etc
• compile a single file for multiple languages