Why Koa‑Grace Makes Front‑Back End Separation Faster and Simpler

21CTO Community Guide: Front‑Back End Separation with Koa‑Grace

Preface

Discusses the feeling that front‑back end separation is an old topic but still valuable, especially for WebAPP + NativeAPP projects, enabling flexible server development and deployment.

1. What is Front‑Back End Separation?

Briefly mentions the concept and points to other articles for deeper reading.

Series: Front‑Back End Separation Thoughts and Practices (1‑6)

Slider: Taobao front‑back end separation practice

Zhihu questions: evaluation of Taobao UED Midway Framework, significance of front‑back end separation

The article focuses on the Qudian team’s Koa‑based implementation.

2. Why Choose Koa?

Koa, created by the Express team, is a smaller, more expressive web framework. Its middleware model fits well with front‑back end separation, offering efficient routing, template rendering, and data proxying.

Koa is not a full MVC framework like Laravel or Rails.

Koa middleware can be leveraged for routing, templating, data proxy, etc.

Built on ES6 generators, making route definition simple for front‑end developers.

Overall Koa is described as high‑performance, lightweight, and easy to extend.

3. How to Practice?

1. Early days

Before separation, Qudian’s monolithic repository was 600 MB, containing both back‑end and front‑end code, with a workflow where back‑end wrote routes, front‑end turned them into pages, and back‑end “wrapped” data into templates.

2. Koa‑based implementation

Key requirements: convenient route creation, efficient data proxy, flexible deployment.

Demo directory structure:

.
└── demo
    ├── controller
    │   ├── data.js
    │   ├── defaultCtrl.js
    │   └── home.js
    ├── static
    │   ├── css
    │   └── js
    └── views
        └── home.html

Controllers provide routes, static holds assets, and views contain templates.

1. Convenient route creation

Example controller files generate routes such as /data/* and /home/*. Each route is a generator function:

exports.index = function* () {
    yield this.bindDefault();
    yield this.render('home', {
        title: 'Hello , Grace!'
    });
};

Controllers can also export an object for simple data proxying.

2. Efficient data proxy

Using this.proxy(), Koa can concurrently request multiple back‑end services and return combined results. Example:

repo: function* () {
    yield this.proxy({
        data1: 'github:repos/xiongwilee/data1',
        data2: 'github:repos/xiongwilee/data2',
        data3: 'github:repos/xiongwilee/data3'
    });
};

Proxy bypasses CORS restrictions and adds less than 10 ms latency on internal networks.

3. Flexible deployment

Different directory layouts for development and production are shown, with ./app compiled into ./server/app for production. Tools such as gulp+requirejs or webpack+vue are used, and PM2 manages Node processes.

4. koa‑grace

The open‑source framework koa‑grace implements the described architecture. Repository: https://github.com/xiongwilee/koa-grace, demo site: http://grace.wilee.me/, documentation in the wiki.

It currently targets Koa 1.x; Koa 2.x support will follow. Test coverage is still needed.

Conclusion

Front‑back end separation reduces technical cost, speeds iteration, and improves product experience. The Qudian team’s adoption of koa‑grace has streamlined development and deployment.