GMTC2018《Hulu基于React的框架演进》 程墨
2020-02-27 239浏览
- 1.Hulu基于React的框架演进 程墨 Morgan Cheng Hulu Senior Engineer
- 2.
- 3.
- 4.关于我 程墨Morgan
- 5.关于Hulu
- 6.目录 • Hulu网站技术背景和挑战 • 自创基于React的框架 • 应用react-server的教训 • 迁移至next.js的历程 • 总结
- 7.• Hulu网站技术背景和挑战 • 自创基于React的框架 • 应用react-server的教训 • 迁移至next.js的历程 • 总结
- 8.历史遗留技术栈
- 9.多个Web应用共同存在 Browse Account Signup ...
- 10.需要一个框架！
- 11.框架提供支持 Browse Account Signup … 框架
- 12.框架也要施加约束 Browse Account Signup … 框架
- 13.• 支持多应用 • 施加约束 • 统一的UI库 框架的要求
- 14.如何选择UI库
- 15.是否选择同构？
- 16.CSR 服务器产生HTML 下载JavaScript React渲染 网页可交互
- 17.SSR 服务器产生HTML 下载JavaScript React渲染 网页可交互
- 18.• Hulu网站技术背景和挑战 • 自创基于React的框架 • 应用react-server的教训 • 迁移至next.js的历程 • 总结
- 19.网页 Node.js
- 20.网页 Node.js API
- 21.网页 Node.js Data API
- 22.网页 Node.js Data API
- 23.网页 Node.js Data API
- 24.网页 Node.js Data API
- 25.网页 HTML + 脱水数据 Node.js Data API
- 26.脱水和注水
- 27.如何在SPA中实现同构？ 网页A SPA跳转 HTML + 脱水数据 Node.js Data 网页B API 纯数据
- 28.• Hulu网站技术背景和挑战 • 自创基于React的框架 • 应用react-server的教训 • 迁移至next.js的历程 • 总结
- 29.
- 30.增量式渲染 Header Masthead Trays React Server增量式向浏览器推 送渲染的每部分
- 31.React-Server Page • 利用Promise管理数据 • Page和React无关 • RootElement可以被增 量渲染
- 32.React Server的同构 网页 HTML HTML + API req/res pair 仅req/res pari中无缓存才直接访问API Node.js Data API
- 33.使用React Server的教训 • 浏览器服务器必须访问同一个API端口 • 难以定制 • API生命周期和页面生命周期相同
- 34.• Hulu网站技术背景和挑战 • 自创基于React的框架 • 应用react-server的教训 • 迁移至next.js的历程 • 总结
- 35.
- 36.组件的两个生命周期 async get props props Page Component
- 37.Next.js Page • Page就是React组件 • getInitialProps用于获 取外部数据 • 数据以props形式传递
- 38.HoC Page + HoC = Enhanced Page
- 39.SSR的理想实现 第一页服务器端渲染 单页应用跳转浏览器端渲染 The Fold 永远浏览器端渲染
- 40.NoSSR The Fold 用NoSSR包裹
- 41.NoSSR • 保持和React一致风格 • 组件不需要关心自身是 CSR还是SSR
- 42.迁移至Next.js • 尽量保持对应用层接口的一致 • 保持两条平行branch开发 • 特定功能允许不同的设计
- 43.• Hulu网站技术背景和挑战 • 自创基于React的框架 • 应用react-server的教训 • 迁移至next.js的历程 • 总结
- 44.React组件模型是一种交流方式
- 45.构建框架的原则 • 框架必须施加约束 • 框架必须提供灵活度 • 没有完美的框架，持续改进
- 46.
- 47.
- 48.
- 49.谢谢 Emailme:morgan.cheng@hulu.com
