Recently, I have been working on a project using umiJS, dva and AntDesign UI. Let me explain what are those funny names about.

umiJS and dva

These two are new frameworks for ReactJS with lots of features built-in, such as automatic generated routing, server-side rendering, redux, redux-saga and many more. With umiJS and dva, we can write more readable and clear structure of code, and it will also have better performance.

For example: The routing or navigation between page, it is as simple as creating a folder in pages folder with index.js. The folder's name will become the route's name automatically, or it can also be configured in router.config.js.

The redux and saga parts, is also cleaner, as you can see on the example below:

export default {
  namespace: 'beverages',

  state: {
    coffeeList: [],
    freshJuiceList: []

    // ...
  },

  effects: {
    *FETCH_COFFEE_LIST({ payload }, { call, put }) {
      const response = yield call(fetchCoffeeList, payload);

      yield put({ type: 'saveCoffeeList', payload: response });
    }

    // ...
  },

  reducers: {
    saveCoffeeList(state, { payload }) {
      return {
        ...state,
        coffeeList: payload
      };
    }

    // ...
  }
};

The reducers and effects are created in the model folder, and later we can use it using dispatch like this:

dispatch({ type: 'beverages/FETCH_COFFEE_LIST', payload: sortState });

See how clear and well-structured the code is.

AntDesign UI

AntDesing UI is a clean, fast and well-designed UI framework backed by Alibaba group. You can read the documentation here.

What I like about this UI is that we can create many advanced or complex feature with ease. With it, we can create rich UI and interactive table to display complex data, we can create a nice layout of Drawer or Modal, message notification, tooltip or popover, loading spinner animation, minimalistic card layout design, date/time picker, calendar, and many more. What add more to the greatness is, AntDesign UI is very fast or snappy, it looks very slick and modern.

Combined together with umiJS and dva, these stack is really advanced and we can produce modern snappy UI front-end design backed with effective, well-structured, clean and fast back-end code.

I have become addicted to it ever since the first time I used it. And I am now looking forward to work with it more.