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.
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.
How to process offline H5 page
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).
Below image shows the differences of development for H5, Little Program and PC Web Page.
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).
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.
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.
Egg.js
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
- 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
Development Management
Change Management
- Should be able to gated launch
- Should be able to monitor
- Should be able to roll back
Monitor
Backend Monitor
Frontend Monitor
