QCon 微前端 艾石光

Razor

2019/10/20 发布于 技术 分类

文字内容
1. 微前端在字节跳动的落地 艾⽯石光 前端⼯工程师
2. 在此键⼊入姓名 在此键⼊入tittle
3. ⾃自我介绍 艾⽯石光 字节跳动前端⼯工程师,加⼊入字节跳动以来⼀一直致⼒力力于发展和建设前端基础⼯工程。 前端基础⼯工程团队在为公司业务提供中台产品的同时,也在努⼒力力提升公司前端团队的研发效率与 ⼯工程质量量。主要任务是基础设施建设、业务⼯工程与过程的改进和打磨。
4. ⽬目录 独⽯石应⽤用的问题 微服务在前端的历史 微前端在字节跳动的应⽤用进展 未来展望以及字节跳动的规划
5. Monolithic 的问题 上线慢、频繁 上线⼀一次 30 分钟,build ⼀一次 x 分钟 每天上线 n 次 回滚 10 分钟 框架⽆无法调整 ⼯工程巨⼤大理理解困难 合作混乱,规范和灵活互相⽭矛盾 找到⾃自⼰己的模块 避免⼲干扰别⼈人模块 遇到 bug ⼤大海海捞针
6. Monolithic - 框架⽆无法调整
7. 微服务化在前端的历史 ⾯面向服务的设计 SOP SSI、bigpipe 等 shadowDOM、customElements、webWorkers,Angular - view encapsulation
8. 微前端在字节跳动 1. 服务发现 2. 运⾏行行隔离 3. 环境⼀一致 4. 其他优势
9. 1. 服务发现 原则 解决的旧困难 提供的新能⼒力力 实现路路径
10. 1. 服务发现 - 原理理 客户端服务发现 —— Netflix OSS 服务端服务发现 —— AWS ELB 服务注册、⾃自注册和第三⽅方注册
11. 1. 服务发现 - 解决的旧困难 独⽴立“运维”,极速上线下线 流量量分发 https://garr.bytedance.net/modules/mp 问题追踪
12. 1. 服务发现 - 提供的新能⼒力力 ⼩小流量量和预览等全新的世界 服务染⾊色与 AB 测 变更更通知、变更更管理理 对应 git,对应 commit 测试保活 管理理权限,对照测试 sourceMap
13. 2. 运⾏行行隔离 严峻形势 本质诉求 提供的能⼒力力、实现的效果 ⽀支持的业务
14. 2. 运⾏行行隔离 - 本质诉求 不不跑挂 不不⼲干扰
15. 2. 运⾏行行隔离 - 沙盒 时序 CSS 沙盒 DOM 沙盒 变量量沙盒 数据采集沙盒、sentry 沙盒、localstorage 沙盒 polyfill 与其他 delete 的情况
16. 2. 运⾏行行隔离 - 沙盒
17. 2. 运⾏行行隔离 - 沙盒 操作系统 - 单核单进程 单核多进程
18. 2. 运⾏行行隔离 - react-loadable React-loadable vue raw CommonJs CMD 钩⼦子
19. 2. 运⾏行行隔离 - 实现的效果、⽀支持的业务
20. 3. 环境⼀一致 serverless vs container 分析 ⽣生产环境地狱 解决⽅方案 更更多更更好的解决⽅方案
21. 3. 环境⼀一致 - serverless vs container 没有本地环境——
22. 3. 环境⼀一致 - serverless vs container Firebase CLI、SAM Local 模拟 timeout,memory limit,runtimes,部分 API Gateway live debugging,Local debugging 与 CI/CD 融合 先测试再上线
23. 3. 环境⼀一致 - ⽣生产环境地狱 你是不不是环境有问题? 在我这是好的 线上再测测
24. 3. 环境⼀一致 - 解决⽅方案 调试⼯工具,chrome 启动命令 chrome 环境隔离 代理理⼯工具 pac ⼯工具 chrome ⼯工具 发布检查⼯工具
25. 3. 环境⼀一致 - 解决⽅方案 Webpack 能⼒力力 ⽀支持模块级 HMR ⽀支持 MasterPage 的 HMR ⽀支持 Code Split ⽀支持公共库提取,也⽀支持模块间多个版本的基础库共存 其他
26. 4. 其他优势 主⼯工程和业务模块 统⼀一数据采集、复杂事件分析 console log TEA -(字节跳动的事件埋点) 规范和灵活动态统⼀一
30. 下⼀一代前端资源 - 未来展望 服务发现的原⼦子能⼒力力 单体访问 Server-Side Discovery Pattern - AWS ELB 边缘系统加速 通⽤用的资源服务发现服务 ⽇日志、服务监控与底层⽀支持
31. 下⼀一代前端资源 - 服务发现的原⼦子能⼒力力 A ⻚页⾯面 - B 服务发现 - C 资源加载 AB 结合:The Client-Side Discovery Pattern - Netfilx OSS list 接⼝口 SSR 进去 list 接⼝口与种⼦子代码、SDK 融合 BC 结合: 解析 list,combo 资源 全⾯面综合资源,CSS、image
32. 下⼀一代资源服务 - 边缘计算加速 就近计算 token - session 解析 ⾼高可⽤用
33. 就近计算
34. Token 解析
35. 下⼀一代 - ⾼高可⽤用 边缘计算的优势 • 多节点 • 智能 DNS
36. 提问环节