vue conf tianxiang

1. 再谈Vue SSR
2. About Me @天翔Skyline 快手前端工程师
3. 欢迎体验 https://live.kuaishou.com
4. 回顾一下
5. 定位
6. 我需要
7. Vue.js
8. 问题
9. 解决方案
10. 首屏
11. SEO
12. Router Global Model APP Components Components Components Pages Model Model Model Services API Proxy Server Render Server Java API 前·架构设计方案 Event Bus
13. 问题 ---- 绕不开的asyncData
14. Component与Model的边界是否可以更加明确?
15. 新的Model需要满足 1.足够声明式 2.足够响应式 3.支持Observable的集成
16. 重构
17. 我需要解决
19. 之前图方便……直接new Vue(…) 但其实……我只需要Reactive
20. 一个易于接受 / 无歧义的写法 配合Vue的依赖收集能力
21. Class + defineReactive
23. SSR与CSR的请求需要区别对待
24. 区别对待axios在server端与client端处理 封装request client SSR与CSR注入不同的request client
26. State的生命周期跟随组件生命周期 But 它应该还是一个集中式的Store管理(by 勾股)
27. Component注入代替asyncData 新建的同时完成初始化数据获取 集中管理
29. 过滤过程一定要在Server端进行 转换工作既可以在Server端,也可在Client端 现有API Proxy与Service有一定重叠性
30. Node: 数据的声明 + 转换 SSR: 数据的聚合 / 过滤
31. Now
32. Now
33. GraphQL over restful
34. GraphQL
35. Router Global Model APP Components Components Components Pages Model Model Model Apollo Client GraphQL Schema + Resolver Render Server Java API 现·架构设计方案 Event Bus
36. Observable
37. 状态管理理,等同于状态结构及其变化过程 你可以从描述状态⼊入⼿手,以某个时刻的状态为侧重点,淡化其变迁过程 也可以从变迁过程⼊入⼿手,侧重某个过程对数据的变动
40. 消费关系图 or
41. 在此基础上 1 2
42. 我们试着传统方式写一下
43. 再考虑下刚才要加的两个需求…… 画面太美,真的想不出来代码会写成什么鸟样
44. 试着从变迁过程入手…… 先学弹珠图! http://rxmarbles.com
45. 数据分发---- One For All
46. 数据聚合 ---- All For One
47. 重新写一下刚才的需求
48. 再加上刚才的两个需求
51. 可是,怎么与Vue结合起来呢?
52. . /
53. Vue没有支持啊……别急
54. Async Pipe 只是个语法糖……帮你自动 subscribe 了而已…… 我们可以自己干啊,比如:vue-rx 或者 我自己在Model手动subscribe一下就行了…
55. Model ---- 业务
56. Model ---- 内部处理
57. Vue帮我们解决了了同步响应式 + Observable帮我们解决了了异步响应式
58. 最后一个问题……
59. GraphQL Query 我也想要响应式……
62. 真·响应式编程 Action (此处我们看个case)
63. 一切看起来终于美好了起来 加上Apollo Client的cache能力,如虎添翼!
64. 现·架构设计方案 Router Global Model APP Components Components 1.声明式的Model设计 Components Pages Model Model Model Apollo Client GraphQL Schema + Resolver Java API Event Bus 2.多Store设计的数据管理 3.全链路的响应式数据流 Render Server 4.灵活的cache逻辑处理
65. Thanks Q/A