2023年8月19日，掘金掘力计划系列活动第22场——《聊聊前端工程化实践和未来》在杭州举行，在本场前端工程化专题的分享活动中，邀请了来自四位前端领域专家来为开发者作技术分享。

第一位分享嘉宾是来自字节跳动的资深前端——张兆鑫，他做了题为《基础架构中台提效之路》的技术分享，作为字节跳动的前端领域专家，张兆鑫在八年前端生涯中先后负责视频云、字节私有云等中后台的产品研发工作，在字节内部实践了前端架构中台，为字节内部大量的重复中后台建设提供了一条可行的提效之路。

在前端领域开发的过程中，往往会进行开发大量的中后台，而每一次开发一个中后台都需要处理以下问题：

1、申请所有机房的基础设施

2、处理 BFF

3、处理 SSO

4、权限管理

5、增删改查

还有一些特殊场景下的重复成本，比如在字节跳动内部就经常会需要处理关于多机房相关的问题，这些中后台的重复建设带来了以下几个问题：

1、大量的中后台能力，每一块小业务可能都需要一个对应的中后台。

2、重复的通用能力，比如权限、SSO、BFF还有我上面提到的机房问题。

3、极高的沟通成本，当中后台越来越多，沟通成本随之上涨。

4、接口合理性，这会涉及到一些接口规范以及和后端开发同学的对接问题。

在此背景下，就要尽可能的将这些中后台系统的复杂度进行收敛，毕竟复杂度不会凭空消失，在这个基础上张兆鑫及其团队开始实践架构中台之路。

通过搭建基础架构中台，张兆鑫及其团队通过引入环境脚本、框架插件、通用基础服务设计等方式构建出一个易于多团队使用的架构中台，同时在安全性方面也通过引入静态资源容灾、数据多级缓存容灾、机房容灾来做容灾备份。

除了以上技术外，还积极引入新的技术比如：GPT、LowCode 为架构中台的未来做一个系统化发展考量。

渐进式推动前端工程化

第二位分享嘉宾是来自禾观科技的泛端技术专家——尤毅，他做了题为《如何渐进式推动前端工程化》的技术分享，作为一位深耕前端领域工程化的技术专家，尤毅在本次分享中主要讲解了前端工程化领域发展、如何切入前端工程化以及低代码。

自 2018 年以来，前端工程化的概念一直在不断被提及。而相关的讨论主要集中在"前端"领域的模块化、组件化、自动化和规范化等方面。

但随着前端技术的快速发展，工程化的范畴已经开始向整个产品生命周期延伸，不仅仅局限于前端UI交互的交付。可以逐步渗透至需求分析、测试以及上线后的监控等环节。这一演进的目的是为了全面优化整个产品的开发和运营过程，提高效率、降低成本，并确保产品的质量和稳定性。

在当前的前端领域，深入业务对于前端开发人员来说是非常重要的。通过深入理解业务需求、业务流程和用户行为，前端同学可以更好地设计和实现与业务紧密结合的前端解决方案。包括更好地理解用户需求，优化用户体验，以及与后端和其他团队进行有效的协作。

同时，深入整个软件的研发链路也是前端开发人员需要去尝试的方向。这涉及到与其他开发团队(如后端开发、测试、运维等)紧密合作，参与系统架构设计、性能优化、安全性等方面的工作。通过扩展技术视野和参与更广泛的交流使得前端工程化的链路可以延伸到整个软件研发链路中。

从业务中发展自身的价值，并积极参与整个软件的研发链路，通过深入理解业务需求、与其他开发团队紧密合作以及持续学习和掌握前沿技术来实现。这样的发展路径将使前端开发人员在职业发展中更具竞争力，并为团队和项目的成功做出更大的贡献。也是提高未来前端自身竞争力的手段之一。

基于 WebAssembly 打造一个纯浏览器上的POSIX 运行环境

第三位分享嘉宾是来自阿里 TRE 的资深前端——刘睿，他做了题为《基于 WebAssembly 打造一个纯浏览器上的POSIX 运行环境》的技术分享，刘睿是一位拥有8年互联网工作经验的专业人士，他目前就职于阿里巴巴TRE工程基础服务团队，主要从事于中后台、内部工具产品的应用层开发，在领域内有着丰富的实践经验和深厚的技术功底。

在 2021 年 Google I/O 大会上，StackBlitz 正式推出了与 Next.js 以及 Google Chrome 团队合作开发的一项基于 WebAssembly 的新技术，名为 WebContainers 。

基于 WebContainers (以及开源的 VS Code Web)，StackBlitz 构建了全新的在线 IDE 产品 CodeFlow。

WebContainers 的优势相比于WebIDE无容器、WebIDE Docker的方案更加的轻量且无额外成本，功能相对完善。因此，伴随着WebContainers技术的出现，基于WebContainers的WebIDE体验普遍获得了明显的体验提升。

而阿里内部也存在云端研发场景的用户诉求存在，因此从去年开始就在着手打造类 “WebContainers” 相关的产品，面向云研发用户提供高效运行 Node.js 、bash、git、 Core Utils等终端能力。

WebContainers的实现原理类似运行在浏览器上的操作系统，使用WASM实现，并将WASM作为其可执行文件格式。

在数据传递方面,刘睿及其团队经评估选择了SharedArrayBuffer+Atomics的高效方案,避免数据拷贝开销。

内存隔离方面，通过控制WASM的内存布局为每个进程预留独立的Global内存空间实现。

WebContainers没有真正的系统调用，但通过WASM的linking优化，可以减少胶水层的性能损耗。刘睿另外列举了使用WASM位操作实现管道通信的例子，展示了其底层计算优势。

本次掘力计划第22期汇聚多位业内前端领域专家，从架构中台、前端工程化、前沿技术 WebAssembly 等多个角度进行了技术分享，使与会开发者对前端工程化的发展现状及应用场景有了更为全面的了解。

前端工程化正在快速发展变化，相信未来其应用范围还将不断扩大，为更多行业带来革命性的影响。掘力计划也将继续关注前端工程化等前沿技术，致力于推动技术交流。

关于掘力计划

掘力计划由稀土掘金技术社区发起，致力于打造一个高品质的技术分享和交流的系列品牌。聚集国内外顶尖的技术专家、开发者和实践者，通过线下沙龙、闭门会、公开课等多种形式分享最前沿的技术动态。