全球架构师峰会 Arch Summit 2018

俞天翔+当GraphQL遇到Observable 同构Web+App的另一种探索

1. 当GraphQL遇到Observable — 同构Web App的另⼀一种探索
3. About Me @天翔Skyline 快⼿手前端⼯工程师
4. 欢迎体验 https://live.kuaishou.com
5. • 同构开发的挑战 ---- 基于Vue SSR的踩坑之旅 • 重新定义数据层 ---- 基于GraphQL对快⼿手游戏直播站的改造 • Observable ---- 数据分发,One For All,All For One • 整合之路路 ---- 快⼿手游戏直播架构的现状
6. 同构开发的挑战
7. 产品定位 Web Page Web App
8. 我们需要 组件化能⼒力力 响应式编程能⼒力力
9. Vue.js
10. 问题 ⾸首屏⽩白屏 SEO
11. 结论 Vue SPA VUE SSR
12. Vue Server Side Render的踩坑之旅 1.Cookie穿透 2.Dom Only API 3.内存泄露露 Request Client 对接 Node Request Context 改造 / Lifecycle Hooks 避免共⽤用实例例 / 根据Lifecycle选择调⽤用时机
13. ⾸首屏 SPA SSR
14. SEO
15. 问题 ⾸首屏⽩白屏 SEO
16. ⼀一切看起来都很美好……Really?
17. 重新定义数据层
18. 问题 ? 接⼝口数据的 声明 / 转换 ? 资源的 聚合 / 过滤
19. 问题 数据过滤⼀一定要在Server端进⾏行行 数据转换既可以在Server端,也可在Client端 现有API Proxy与Service有⼀一定重叠性
20. Node: SSR: 数据的声明 + 转换 数据的聚合 / 过滤
21. GraphQL over restful
22. https://www.graphql.org/
23. 命令式 声明式 思考⽅方式的转变带来效率的提升
24. 接⼝口数据的声明 / 转换 Schema Resolvers / Transform
25. 资源的聚合 / 过滤 Queries
26. 问题 ---- 绕不不开的asyncData
27. Component与Model的边界是否可以更更加明确
28. 重新定义Model
29. 我需要Model 1 Model与Component的边界更更加清晰 2 ⾜足够声明式 3 配合Vue的Reactive能⼒力力 4 不不需要思考SSR与CSR模式
30. Now 声明式&响应式的Model定义
31. Now Component中的Model注⼊入 Model与Component Lifecycle的绑定
32. 快⼿手游戏直播站的基于GraphQL的迁移 global model APP components model router components model apollo client components model graphQL schema + resolver render server java API pages event bus
33. Observable
36. 消费关系图
37. 在此基础上 1 个⼈人发送的评论、送礼要实时展示出来,不不能等待ws数据返回再显示 2 ⼩小直播间的榜单可能会有延迟,超过xxx没有下发,你就去主动请求拉⼀一下
38. 状态管理理,等同于状态结构及其变化过程 你可以从描述状态⼊入⼿手,以某个时刻的状态为侧重点,淡化其变迁过程 也可以从变迁过程⼊入⼿手,侧重某个过程对数据的变动 By ⺠民⼯工精髓
39. 我们试着传统⽅方式写⼀一下
40. 再考虑下刚才要加的两个需求…… 画⾯面太美,真的想不不出来代码会写成什什么样
41. 试着从变迁过程⼊入⼿手 http://rxmarbles.com 通过弹珠图来辅助理理解数据变迁过程 ⽐比如……
42. 数据分发 ---- One For All
43. 数据聚合 ---- All For One
44. 重新写⼀一下刚才的需求
45. 再加上刚才的两个需求
48. 可是,怎么与Vue结合起来呢?
49. Angular ---- AsyncPipe https://angular.io/api/common/AsyncPipe
50. 可是Vue没有⽀支持啊……别急
51. Async Pipe 只是个语法糖……帮你⾃自动 subscribe 了了⽽而已…… 我们可以⾃自⼰己⼲干啊,⽐比如:vue-rx 或者 我⾃自⼰己在Model⼿手动subscribe⼀一下就⾏行行了了吧…
52. Model -- 业务
53. Model -- 框架
54. Vue帮我们解决了了同步响应式, Observable帮我们解决了了异步响应式
55. 结合GraphQL
56. Apollo-Client早就帮我们做好了了……虽然是基于ZenObervable的,桥接⼀一下就好了了嘛~
58. 以及再通过root vm的$watch,把query variables的依赖改变也响应式了了…… 真·响应式编程
59. Component Change State Variables Change Model Query Observale Query Fetch Regular App
60. 开放Observable能⼒力力 Comple App
61. 于是 action view state变化 computed observable update component new view
62. ⼀一切看起来终于美好了了起来, 加上GraphQL的cache,如⻁虎添翼!
63. 快⼿手现有架构状态 global model APP components model router components model apollo client components model p a g event bus e s graphQL schema + resolver render server java API 1 声明式的Model设计 2 多Store设计的数据管理理 3 全链路路的响应式数据流 4 灵活的cache逻辑处理理
64. 畅想⼀一下,如果数据可被声明式描述是否代表着, 业务可被声明式描述? So……
68. 俞天翔—当GraphQL遇到Observable -- 同构 Web App的另⼀一种探索

相关幻灯片