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 核心贡献者）竹摇（蚂蚁金服高级体验设计专家）线丝（蚂蚁金服高级创意设计师）