Serverless For Frontend - 探索下一代 Node 研发模式
如果无法正常显示，请先停止浏览器的去广告插件。
1. 3rd
蚂蚁金服体验科技大会
2.
3.
4.
5.
6.
7.
8.
9. A
0
10
7
22
10 7
P
%
A
E
C
/
B
M
10.
11.
12.
13.
14.
15.
16.
17. ✓
✓
✓
18. ./sffdemo
!"" src #
# !"" component
# !"" layout
# !"" model
# !"" page
# %"" service
#
%"" sdk #
#
%"" user.ts
#
!"" function # SFF
# !"" f.yml
# %"" user.ts
#
!"" README.md
%"" package.json
19. // function/user.ts
export async function get(ctx, id: String): UserInfo {
//
await ctx.acl(‘User’);
//
const user = await ctx.oneapi.user.get(id);
//
await ctx.basement.messenger.send(`${id}` login`);
//
return {
id: user.id,
name: user.name,
};
};
20. //
feature:
basement: true
//
await ctx.basement.messenger.send(...);
//
tnpm i @alipay/egg-basement --save
//
exports.basement = {
package: '@alipay/egg-basement',
};
//
config.basement = {
appId: 'sffdemo',
appSecret: '123456',
};
21. try {
//
const api = '/api/user';
const query = { id: ‘123456’ };
const userInfo = await request(api, {
query,
});
// do sth
} catch (err) {
//
if (err.code === 'NO_AUTH') {
//
router.redirect('/login');
} else {
messager.warn(err.message);
}
}
//
import user from ‘@functions/user’;
await user.get(‘123456’);
22. //
import { invoke } from ‘@alipay/oneapi-request’;
export async function get(id: string): UserInfo {
//
const opts = { metadata, appName };
return invoke('user.get', { id }, opts);
};
//
import user from ‘@functions/user’;
await user.get(‘123456’);
23. {
"user.get": {
"meta": {
"namespace": "user",
"method": "get",
"description": "
",
"request": [
{ "required": true, "title": “id", "type": “string” },
],
"response": {
"type": "object",
"$ref": "#/definitions/UserInfo"
}
},
"protocols": {
"http": {
"path": “/api/function/user/get”,
"method": "POST",
"parameters": [],
"response": {}
},
"mgw": {}
}
}
// function/user.ts
/**
*
*/
@http
@mgw
export async function get (
ctx: FunctionContext,
id: String
): Promise<UserInfo> {
…
};
}
24.
25. //
import { invoke } from ‘@alipay/oneapi-request’;
export async function get(id: string): UserInfo {
//
const opts = { metadata, appName };
return invoke('user.get', { id }, opts);
};
26. // function/user.ts
export async function get(ctx, id: String): UserInfo {
//
await ctx.acl(‘User’);
//
const user = await ctx.oneapi.user.get(id);
//
await ctx.basement.messenger.send(`${id}` login`);
//
return {
id: user.id,
name: user.name,
};
};
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39. ‘
,
40. ‘
,
41. 3rd
蚂蚁金服体验科技大会，初衷是希望设计与技术能在碰撞中彼此融合，SEE
是 Seeking Experience and Engineering 的缩写，同时 SEE 也代表着
“看见”，希望技术能看见设计的价值，也希望设计能看见技术的力量，在
彼此看见中互相融合成长，一起让世界更美好。
语雀专栏 | https://www.yuque.com/seeconf
SEE Conf 官网 | https://seeconf.antfin.com/
参与知乎互动，赢下届门票 | https://www.zhihu.com/question/363807174
SEE Conf
42. 更多议题
体验科技与好的产品
玉伯（蚂蚁金服 体验技术部负责人）
Evolution: Serverless For Frontend -
探索下一代 Node 研发模式
让价值被发现：如何在 B 端产品做增长？
天猪（蚂蚁金服 高级前端专家、Egg.js 核心开发者） 覃一（蚂蚁金服 高级体验设计师）
瀚雅（蚂蚁金服 高级体验设计师）
云凤蝶可视化搭建的推导与实现 围绕应用生命周期的企业级产品设计策略
江木（蚂蚁金服 高级前端工程师、antd-mobile 核心开发者） 壹乐（蚂蚁金服 高级体验设计师）
“云”端的语雀 ——
用 JavaScript 全栈打造商业级应用 普惠金融体验设计创新思路：参与感对话设计
基于地域文化的设计创新
何人可（湖南大学设计艺术学院院长）
Ant Design 4.0：创造快乐工作
林外（蚂蚁金服 高级体验设计专家）
线丝（蚂蚁金服 高级创意设计师）
不四（蚂蚁金服 高级前端技术专家，语雀产品技术负责人）
姚维（蚂蚁金服 体验设计专家）
决策机构体验科技：数字驾驶舱
逸达（蚂蚁金服 前端技术专家）
可言（蚂蚁金服 高级产品经理）
十喜（蚂蚁金服 高级体验设计师）
智能可视化体系 AVA
步茗（蚂蚁金服 数据技术专家、AVA 负责人）
璆鸣（蚂蚁金服 前端技术专家、DataWizard 负责人）
蚂蚁金服 Web 3D 技术探索之路 JCD 思维如何驱动复杂系统设计
烧鹅（蚂蚁金服 前端技术专家、Oasis 3D 引擎负责人） 今辰（蚂蚁金服 体验设计专家）
精雕细琢，打造极致可视化体验 资产的秩序之美：
通过模式化的方法构建设计资产的内在一致性
逍为（蚂蚁金服 高级前端工程师、AntV 核心贡献者）
吾笙（蚂蚁金服 高级体验设计师）
使用 React 开发小程序 - Remax 蚂蚁海外本地化设计 解放图形化设计生产力 — HiTu
边柳（蚂蚁金服 高级前端工程师、Ant Design 核心贡献者） 竹摇（蚂蚁金服 高级体验设计专家） 线丝（蚂蚁金服 高级创意设计师）