6月25日，由字节跳动基础架构开发者服务团队✖️华泰证券前端技术团队合作的字节跳动Dev Better系列技术沙龙｜WEB研发效能及新技术实践 直播活动成功在线上举办。本次活动邀请到了字节跳动研发工程师杨尚斌、华泰证券资深前端开发工程师田由、字节跳动Web开发工程师徐超、行云集团前端技术专家尤毅（CookieBoty）和大家进行分享交流，此外，还邀请了特邀嘉宾——字节跳动研发效能Serverless团队负责人马翀（堂主）和字节跳动研发效能团队负责人李玉北与大家在直播间相见。
1、《开场致辞》马翀（堂主）
字节跳动研发效能Serverless团队负责人马翀（堂主）为沙龙活动做了精彩的开场致辞。字节跳动研发效能Serverless团队负责人马翀（堂主）为沙龙活动做了精彩的开场致辞。堂主谈到，在近几年业务及前端场景的多元化趋势下，web前端开发快速地向 web 应用开发进行转变和升级，在此过程中，对前端职能在基于业务场景解决方案及上下游的能力整合上的业务能效的要求也愈发提升。基于此，字节跳动联合华泰证券举办了这场活动，希望来自不同公司、不同团队的实践经验为开发者们带来一些有效的输入。
2、《字节跳动 Web 研发面向 Serverless 的探索与实践》杨尚斌
字节跳动研发工程师杨尚斌讲师分享了《字节跳动 Web 研发面向 Serverless 的探索与实践》议题，主要内容是Web 研发模式的演进及面临的问题、Web 研发面向 Serverless 要解决的问题与遇到的挑战以及字节跳动 Web 研发面向 Serverless 的落地。
Q&A
1、Q：重写docker是什么意思？
A：没有重写，是没靠 Docker 容器做隔离，而是靠 Worker 做隔离，整体可以参考业界的 Cloudflare Worker。可以参考 Cloudflare 牵头的：wintercg.org/
2、Q：发布必须要手动来点击吗？
A：
- Web UI 手动点
- 公司 CI CD 平台触发
- 代码托管平台的 Trigger
- Open API（一些更加上层平台的调用 — 搭建平台、CLI 等等）
3、Q：Gateway是基于什么技术实现呢？是基于nginx吗？做一些转发规则吗？
- A：目前是基于 Go 实现的，主要是考虑到两点：
-
- 和公司主流服务端开发语言一样，更容易和公司的基础设施进行配合
- 相对 Ngnix，灵活性更好（当然 Ngnix 也可以通过 lua 进行拓展，选型问题）
4、Q：git push 后如何做到自动触发流水线的？
A：GitLab 等，一般都有提供一些 Trigger 的 Open API，与之对接即可
5、Q：CSR web server 是什么意思？
A：业务开发通过，拥有一定对线上跑的 Server 的干预能力（即能干预 HTML 的渲染）
6、Q：这种类似于边缘计算吧？
A：FaaS worker 足够轻量，可以部署在中心机房，也能部署到边缘机房
7、Q：CSR SSR是不是得对比的看？
A：CSR Web Server 会 Proxy SSR Web Server，已确保 SSR 挂掉后 CSR 依旧可用。会在 CSR Web Server 拿到 SSR 渲染后的东西后，进行干预
8、Q：nginx应该在负载均衡层，网关更靠近server，可以适配业务
A：就是看技术选型，比如要用 Nginx 的话，可以基于 OpenResty 等，做这个事情。但在公司里的话，可能就要自己做和公司基建相关的一些对接了（Metric、Log、RPC 调用等）
9、Q：go是基于自研框架实现的吗？
A：因为相对比较特殊（不算一个传统 Web Server），目前没有用到框架。如果要开发 Web Server，推荐使用字节开源的 github.com/cloudwego/h…
10、Q：请问并发流量服务器及客户端有什么要注意的吗？
A：
- 源站扩容能力足够，容量足够大，弹性足够强
- 做好限流，防止雪崩
11、Q：TOS是做什么用的?
A：类似阿里云的 OSS，对象存储。TOS 是字节做的，对外版可见：www.volcengine.com/product/tos
12、Q：如何解决测试环境少 并行项目多的问题呢？没有懂分流的逻辑，感谢解答。
A：
-
分流类型：
- 不同需求测试时携带不同的 header（PC 浏览器插件（mod-header）、客户端内置开发测试包可用的加 header 逻辑）
- URL Query、Uid、Did 等
- 核心是有个地方，去计算这个逻辑，然后转发到正确的 Server 上。
3、《华泰Web前端研发效能提升之路》田由
华泰证券资深前端开发工程师田由讲师分享的议题是《华泰Web前端研发效能提升之路》，主要内容是华泰前端研发面临的问题、web研发的实践与尝试。
Q&A
1、Q：前端是否要学习web3？
A：web3跟web前端的关系应该只有“web”吧，内容和形态上应该还是有区别的，所以不是说“前端要不要学习web3”，而是“开发需不需要学习web3”这个问题。提出这个问题可能也是看到最近web3在风口上。但具体能不能成为下一个爆点，又以什么形式呈现，可能要见仁见智，建议去更多的了解一下web3再做决定
2、Q：华泰有自己的超算吗？前端会使用超算能力吗？
A：有自己的极速交易平台，是使用硬件加速的技术方案，跟前端的关联性不大
3、Q：所以jquery是真不行了吗？新学前端要学jquery吗？
A：各种框架其实是为了提升一个研发效率，包括目前比较主流的前端框架都是如此。而且前端这几年发展特别快，各种框架层出不穷，如何去选择可能也要结合自己的项目、业务进特点，也没有说有一个通用的标准，因此这里也没有一个标准答案。但是整个技术的演进其实都是一个选择的结果，新的框架、技术的出现一定会有原因以及自身的一些优势，能解决某些问题的，所以这里也可以尝试往前看，了解更多的一些新的技术实现。
4、Q：这个初始化是一个CLI吗？
A：CLI+平台，用户对于CLI无感知，只需要在平台上根据应用特性进行应用初始化，平台屏蔽了CLI的实现
5、Q：标准化建设完成后用这个软件能让用户炒股赚到更多钱吗？
A：可以更高效地完成面向内外部的IT系统建设，提升用户的使用体验和内外部服务人员的工作效率，更好地为用户服务。具体的如何赚钱可以使用我们的其他系统，比如咨询我们的投资顾问啊这些，希望大家都能赚更多的钱
6、Q：前端人员如何去在不同项目中切换？
A：有一套内部调度的策略，判断项目组的需求，是提供技术解决方案，还是技术难题咨询，还是完成项目交付，主要是根据项目组的需要提供对应的技术服务。
7、Q：Sprite UI开源吗？
A：目前是在内部开源的，希望建设完备一些有金融特色的组件后再考虑开源
8、Q：组件库有开源吗？
A：大部分是业务领域级的组件库，主要目的是为某个领域的研发提效，这些领域级组件库没有开源的打算。
9、Q：和现在主流的那些低代码平台有什么区别呢？
A：我们所有的工具平台的建设，目的都是为了业务服务的。目前我们的低代码平台跟主流的低代码平台本质上没有太大区别，但我们建设的目的也是为了更好的满足我们在券商领域的一个业务实现的，所以未来会结合我们自己的一个行业特点与业务特色进行一个融合，让技术更好地为我们的业务服务。
4、玉北好书推荐
字节跳动研发效能团队负责人李玉北对上述议题进行简单总结，基于议题内容进行个人补充与观点分享。并在精心挑选之下，推荐给前端开发者们四本书籍：
- 《Vue.js设计与实现》
- 《深入理解计算机系统（原书第三版》
- 《JavaScript高级程序设计》
- 《JavaScript权威指南》
这四本前端畅销书也在之后的抽奖环节送给了幸运观众～
5、《如何基于 Modern.js 的工程方案实现研发提效》徐超
字节跳动Web开发工程师徐超讲师分享了《如何基于 Modern.js 的工程方案实现研发提效》议题，主要内容是Modern.js简介、MWA工程方案实践、Modern.js三大工程方案。
Q&A
1、Q：Modern.js 的核心亮点是什么？
A：Modern.js 的定位是建立现代 Web 工程体系。Modern.js 既会提供编译、部署、测试、代码质量等底层技术问题的解决方案，又会根据上层业务场景，以「工程方案」作为抽象载体，提供给开发人员针对不同业务场景的开发体系。整体是一个抽象程度很高的框架。我们的目标是，前端开发人员使用 Modern.js 后，不需要再关注底层技术方案的集成配置问题，同时可以直接使用不同业务场景所需的最佳实践，从而让前端开发人员只需要专注于业务开发，更好地创造业务价值。
2、Q：这个在NPM上怎么搜？
3、Q：DX、UX是什么?
A：
DX: Developer Experience，开发体验
UX: User Experience，用户体验
Modern.js 的所有功能，都是围绕着「UX」和「DX」最大化进行设计的。
4、Q：Modern.js的 monorepo怎么做的?
A：基于 Yarn workspace / Pnpm workspace 实现。
5、Q：Modern.js和前面第一位讲的是如何结合的呢？
A：Modern.js 的产物可以通过命令直接部署到公司内的 Serverless 平台，让 SSR、BFF 这些能力不需要关注服务端部署和运维的事情。另外， Modern.js 也支持自动将产物部署到阿里云、腾讯云等云平台。框架 + 云，是 Modern.js 的一个核心设计理念，未来 Modern.js 会和更多的云平台进行结合，提供更多高效、易用的功能。
6、Q：Monorepo 在仓库里如何对不同子应用做发版控制？
A：Modern.js 基于 changeset 提供了一套自己的发版流程控制，可以实现只发布修改了的包及其关联包。
6、 《如何在中型团队落地 DevOps 》尤毅（CookieBoty）
行云集团前端技术专家尤毅（CookieBoty）分享的议题是《如何在中型团队落地 DevOps 》，主要内容包括如何快速搭建 DevOps 流程、DevOps 架构设计和多端项目构建体系。
Q&A
1、Q：上线发布是对应release或者hotfix 吗？而不是固定的合并后的master 分支∂？
A：因为如果先合并 master 再发布的话，如果这一轮发布出现问题，在回滚代码比较麻烦，所以一般都会有 relase 或者 prod 分支作为发布分支，在验收完毕后再打上对应的tag版本分支，最后再合并到 master，如果出现问题可以从tag分支直接拉取hotfix修改。
2、Q：构建脚本用js会不会不方便？特别对于非前端同学？
A：all in docker 的方案，是将CICD流程的脚本抽象出来，构建与发布由两个独立的脚本打包成的docker托管，由标准的 jenkins pipeline 调用，所以对于开发同学来说，只要提供了规则一致的调用规则，例如 shell 启动命令，构建与发布的脚本可以自由定制，并非一定限定使用 js。
3、Q：缓存node_modules的情况下，如果出现包的删除，增加或者更新，有什么好的方式可以保证缓存包的高效更新？
A：一般是用本地 .lock 文件做检查，但并不是完美的方式，有的时候缓存还是会出现一定的问题，所以开发同学在明确知道依赖有重大更新的时候，可以通过触发脚本配置项目中的 cache 参数，让 CI 流程能够感知到，此时需要全量更新。
4、Q：传统软件研发转型DEVOPS会有不得不在多种工具中切换、学习成本高；多平台多语言等问题，尤老师对此有什么想法和建议呢？
A：对于多平台、多语言的问题，比较好也比较容易接受的方式是约束流程，使用结构统一、细节可定制的规范，从 devops 平台中抹平所有底层工具的差异化。使得旧的项目、技术能够正常的接入 devops 中，新的项目可以无缝接入，做渐进式的兼容更新方案。
可以参考杨尚斌老师与我们 all in docker 的方案，为了解决底层技术、工具的多样性而使用一套统一的标准规范使得各种类型的项目都可以顺利接入 devops 平台。
获取分享PPT：关注“字节跳动终端技术”公众号，在后台回复“前端技术沙龙PPT”；
查看直播全程回放：关注“字节跳动终端技术”视频号-「直播回放」。
