Click “Developer Technology Front” above and select “Star Mark”

18:30 Looking at true love

Author: Tamic | editor: cocoa

Fish Redux is an open source application framework for Flutter! UmiJS is the front-end React framework.

introduce

Umi is officially a pluggable enterprise react application framework. Umi is route-based, supports next-js contract routing, and various advanced routing functions, which are extended to support route-level load on demand. Then with a perfect plug-in system, covering every life cycle from source code to build products, support a variety of functional expansion and business needs, at present, the internal and external add up to 50+ plug-ins.

Umi is the bottom front-end framework of Ant Financial, which has directly or indirectly served 600+ applications, including Java, Node, H5 wireless, Hybrid applications, pure front-end assets applications, CMS applications, etc. He has served our internal users well, and hopefully he will serve our external users well.

features

• 📦 Built-in react, react-Router, and so on out of the box

• 🏈 class next. Js and fully functional routing convention, and support the configured routing mode

• 🎉 complete plug-in system, covering every life cycle from source code to build product

• 🚀 High performance, support PWA and code Splitting with routing as a unit through plug-ins, etc

• 💈 supports static page export, suitable for various environments, such as ZHONGtai business, wireless business, Egg, Alipay wallet, Cloud Fengdee, etc

• 🚄 fast development startup, support one-click open DLL and hard-source-webpack-plugin

• 🐠 one-click compatibility with IE9, based on UMi-plugin-polyfills

• 🍁 Full TypeScript support, including d.ts definitions and umi test

• 🌴 is deeply integrated with DVA data stream, supporting Duck Directory, automatic loading of model, code Splitting, etc

Architecture diagram

Lifecycle management from source to launch

The frameworks on the market are basically from source to build, with little consideration for the various distribution processes, and UMI takes this step further.

The figure below is umi from the source line to a process.

Umi will first load the user’s configuration and plug-in, and then based on the configuration or directory, generate a routing configuration, and then based on the route configuration, the JS/CSS source code and HTML complete series. User-configured parameters and plug-ins affect every step of the process.

What is his relationship with DVA and Roadhog?

In a nutshell,

• Roadhog is a WebPack-based packaging tool designed to simplify Webpack configuration

• Umi can be easily understood as Roadhog + routing, which is similar to next.js/nuxt.js, supplemented by a plugin mechanism that aims to simplify React development through a framework approach

• Dva is a pure data stream at present, and there is no mutual dependence between IT and UMI and Roadhog. It can be used separately or together. Personally, I think UMI + DVA is relatively compatible

Why not… ?

next.js

The functionality of next.js is relatively simple, for example, its routing configuration does not support some advanced usages, such as layout, nested routing, permission routing, etc., which are common in enterprise applications. Umi is more like Nuxt.js in terms of the functionality of contract routing than next.js.

roadhog

Roadhog is a relatively pure Webpack wrapper, and as a tool it can do very little (limited to the WebPack layer). Umi is equivalent to Roadhog + routing + HTML generation + complete plug-in mechanism, so it can play a greater value in improving developer efficiency.

The installation

     

      
Getting started is very simple
      
e
      
# create a new page
      
$ umi generate page index
      
# Local development
      
$ umi dev
      
# build online
      
$ umi build
     
Copy the code

Environment to prepare

You need to have Node first and make sure node is 8.10 or above. (On a MAC, NVM is recommended to manage node versions.)

     

      
$ node -v
      
8.1 x
     
Copy the code

You are advised to use YARN to manage NPM dependencies and use the domestic source (Ali users use the internal source).

     

      
# domestic source
      
$ npm i yarn tyarn -g
      
# replace yarn with tyarn
      
$ tyarn -v
      
# Ali Intranet source
      
$ tnpm i yarn @ali/yarn -g
      
# 后面文档里的 yarn 换成 ayarn
      
$ ayarn -v
     
Copy the code

Then install UMI globally and make sure the version is 2.0.0 or above.

     

      
$ yarn global add umi
      
$ umi -v
      
2.0.0
     
Copy the code

The scaffold

Find a place to build an empty directory.

     

      
$ mkdir myapp && cd myapp
      
Then create some pages with UMI G,
      
$ umi g page index
      
$ umi g page users
      
Umi G is an alias for umi generate. It can be used to quickly generate component, page, layout, etc., and can be extended in plug-ins, such as UMi-plugin-dVA, which extends dVA :model, Then you can use umi G dVA: Model foo to fast dVA's model.
     
Copy the code

Then view the directory from tree (Skip this step for Windows users).

     

      
$ tree
      
.
      
└ ─ ─ pages
      
├ ─ ─ index. The CSS
      
├ ─ ─ index. Js
      
├ ─ ─ the users. The CSS
      
└ ─ ─ users. Js
      
By default, all js files under PAGES are routes. If you have experience in using next. Js or nuxt.js, it should look a little familiar.
     
Copy the code

Then start the local server,

     

      
$ umi dev
     
Copy the code

Reductive route

After umi dev is started, you will find a.umi directory under Pages. What is this? This is umi’s temporary directory, you can do some verification here, but please do not directly modify the code here, UMI restart or pages under the file modification will regenerate this folder files.

Then we add some redirect logic directly to index and users.

To change pages/index.js,

     

      
+ import Link from 'umi/link';
      
import styles from './index.css';
      
export default function() {
      
  return (
      
    <div className={styles.normal}>
      
      <h1>Page index</h1>
      
+     <Link to="/users">go to /users</Link>
      
    </div>
      
  );
      
}
     
Copy the code

Pages /users.js,

     

      
+ import router from 'umi/router';
      
import styles from './index.css';
      
export default function() {
      
  return (
      
    <div className={styles.normal}>
      
      <h1>Page index</h1>
      
+     <button onClick={() => { router.goBack(); }}>go back</button>
      
    </div>
      
  );
      
}
     
Copy the code

The browser then verifies that it should be possible to route between the Index and Users pages.

Deployment of release

build

Run umi build,

     

      
$ umi build
      
DONE  Compiled successfully in 1729ms
      
File sizes after gzip:
      
68.04 KB dist/umi. Js
      
  83 B      dist/umi.css
     
Copy the code

By default, build artifacts are generated under./dist and then viewed using the tree command (Windows users can skip this step).

     

      
$ tree ./dist
      
./dist
      
├ ─ ─ index. HTML
      
├ ─ ─ umi. CSS
      
└ ─ ─ umi. Js
     
Copy the code

Local validation

You can do local validation with Serve before publishing,

     

      
$ yarn global add serve
      
$ serve ./dist
      
Serving!
      
- Local:            http://localhost:5000
      
- On Your Network:  http://{Your IP}:5000
      
Copied local address to clipboard!
     
Copy the code

Visit http://localhost:5000, which should normally be the same as Umi Dev.

The deployment of

Once authenticated locally, you are ready to deploy, as demonstrated by now.

     

      
$ yarn global add now
      
$ now ./dist
      
> Deploying /private/tmp/sorrycc-1KVCmK/dist under chencheng
      
> Synced 3 files (301.93KB) [2s]
      
> https://dist-jtckzjjatx.now.sh [in clipboard] [1s]
      
> Deployment complete!
     
Copy the code

Then open the corresponding address to access the address on the line.

Test and configuration checks

test

Umi built-in Test tool umi-test based on JEST:

     

      
$ umi test
      
Options:
      
    --coverage            indicates that test coverage information should be collected and reported in the output
     
Copy the code

Check the configuration

Use UMI Inspect to list the contents of configuration items for inspection:

     

      
$ umi inspect
      
Options:
      
    --mode                specify env mode (development or production, default is development)
      
    --rule <ruleName>     inspect a specific module rule
      
    --plugin <pluginName> inspect a specific plugin
      
    --rules               list all module rule names
      
    --plugins             list all plugin names
      
    --verbose             show full function definitions in outpu
     
Copy the code

The official documentation

Chinese document: https://umijs.org/zh/

Github：https://github.com/umijs/umi

Developer Technology Front, a collection of technology front news and industry trends, dACHangdry goods, is an excellent guide for developers to experience and grow.

Internet jianghu, no BAT from now on

In those days, three students with poor grades finally entered six big factories

Learn not to move, JINGdong cross-end mobile development platform Ares release!

Just order it if you like