QCon 2018 Shanghai - Frontend Practice in Ant Financial

This presentation is shared by QCon上海2018|全球软件开发大会

You can download the PPT from 大会演讲PPT合集

Business Nature

  • Mobile is the first priority
  • Stable backend model, flexible frontend presentation
  • High Stability for business

Frontend Architecture

Below graph display the history of frontend architecture in Ant Financial.屏幕快照 2018-11-04 下午9.10.29

屏幕快照 2018-11-04 下午10.26.07 - translated

The frontend needs to be served in multiple channels. Not only traditional web UI, but also Little Program/H5 in various apps. Below graph introduces you how Ant Finance releases its change from source code to production.

屏幕快照 2018-11-05 下午10.07.13

How to process offline H5 page

屏幕快照 2018-11-05 下午10.10.21

It’s quite important these years to provide your service In-App. We have two ways channel (In China - Lawrence):
1. Little Program
Lightweight HTML app designs for running inside giant app like Wechat, Taobao, Alipay. Very similar to PWA. Little Program can access native function like using camera which Wechat will be a bridge for that.
2. H5
H5 stands for HTML 5 web page. When people compare it with Little Program, H5 represents the HTML 5 web app which will be loaded by WebView(embedded browser in native app).

屏幕快照 2018-11-05 下午10.20.22

Below image shows the differences of development for H5, Little Program and PC Web Page.

屏幕快照 2018-11-05 下午10.40.24

As the business grows, it’s a big challenge to develop the service. In a tradition frontend architecture model, UX API changes frequently, however service API is stable relatively. The question is, our API should be UI-oriented or should be generic.

And the answer is, Backend For Frontend(aka BFF).
屏幕快照 2018-11-05 下午10.46.57

In a tradition model, we basically have 3 layers: UI, business service, then infrastructure.
In BFF model, we still have 3 layers, the differences are:
In the 2nd layer, now we have BFFs which are designed for UI. BFF provides API that perfectly fit to UI. And we can have multiple BFF services designed for individual clients.
In the 3rd layer, we move Business Layer down. We treat Business Layer as some kind of infrastructure that provides generic business API.

屏幕快照 2018-11-05 下午11.44.36

In general, frontend and BFF development are completed by the same developer. From the development of employee point of view, there are some benefits:
1. Frontend developer has the opportunity to learn server side development skills
2. Expand the scope of knowledge
3. Improve communication skills
4. More reasonable division of labor

Following content is the open source solution Ant Finance creates. I would not repeat it, instead, I will paste the url links to GitHub or official home page.


GitHub - eggjs/egg: 🥚 Born to build better enterprise frameworks and apps with Node.js & Koa
egg - Born to build better enterprise frameworks and apps

GitHub - eggjs/awesome-egg: Awesome Egg.js Web Framework and Plugin.

Egg.js is a Node.js web development framework. It provides enterprise level features to speed up the development. It’s the core to BFF.

It’s worth to highlight that Egg.js is not only a web framework. It’s a solution to develop, build, run, monitor and maintain your Node.js application in production environment. For example, Egg.js embeds in a security mechanism to avoid security problem systematically, we all know that developer is not trustable: Security - Born to build better enterprise frameworks and apps.
And Egg.js provides a solution to run application in cluster:
Multi-Process Development Model Enhancement - Born to build better enterprise frameworks and apps.

Worth to have a look even if you’re not a fan to Egg.js itself.

sofa-rpc and sofa-rpc-node

GitHub - alipay/sofa-rpc: SOFARPC is a high-performance, high-extensibility, production-level Java RPC framework.

GitHub - alipay/sofa-rpc-node: SOFARPC Node is a high-performance, high-extensibility, production-level Nodejs RPC framework.

  • Supports multiple language
  • Automated serialization and deserialization
  • Transparent to developer to call JavaScript from Java or call Java from JavaScript
  • Support ProtoBuf and Hessian

High Quality Development

Development Steps

“屏幕快照 2018-11-06 下午9.19.13”的副本

Development Management

屏幕快照 2018-11-06 下午9.44.18

Change Management

  • Should be able to gated launch
  • Should be able to monitor
  • Should be able to roll back 屏幕快照 2018-11-06 下午9.49.18


Backend Monitor

屏幕快照 2018-11-06 下午9.56.02

Frontend Monitor

屏幕快照 2018-11-06 下午9.56.53