前沿开源技术领域解读——开源大前端

　　其中 “前沿开源技术领域解读” 部分，多位在其领域有所建树的一线开发者和开源商业化公司创始人，对目前国内外流行的前沿开源技术领域过去的发展和未来的趋势进行了深入的洞察，覆盖开源云原生、开源 AI、开源大前端、开源大数据、开源 DevOps、RISC-V、开源操作系统、开源数据库、编程语言九大领域。

　　在大前端领域，我们看到了很多令人振奋的趋势：Serverless/FaaS/边缘计算等架构激发了对 Workload 被调度性能的追求，在线跑 JavaScript 越来越流行；JavaScript/TypeScript 在后端开发领域的应用越来越广泛；一套代码多平台适配，跨平台技术栈成为主流；WebGPU 在未来将取代 WebGL，会给 H5、小程序等的内容创作与性能表现带来更多可能；工具链逐渐成熟，WebAssembly 云原生应用逐渐走向主流；低代码/无代码是大势所趋·····

　　Web 一直是最开放和易于传播的平台，而今天游戏、元宇宙等数字内容非常依赖 Web 平台的各种特性，但是 Web 环境中还没有跟上 DirectX12、Vulkan、Metal 等现代图形接口的变革。这一现状随着 WebGPU 标准的逐步完善，即将得到改变。这会给 Web 端带来非常振奋人心的未来可能性。

　　WebGPU 是由 W3C GPU for the Web 社区组所发布的规范，目标是允许网页代码以高性能且安全可靠的方式访问 GPU 功能。WebGPU 是一套为浏览器设计的次时代图形 API 标准，为了弥合各个平台图形 API 的差异性，它对 DirectX12、Vulkan、Metal 进行了融合和封装。借助 WebGPU，可以充分释放现代 GPU 硬件的强大能力，让开发者可以用 TS/JS 在 Web 端也开发媲美原生表现力的场景，实现更大型更复杂的 3D 场景表现，甚至使用现代 GPU 的通用计算能力完成之前无法想像的复杂计算任务。

　　作为 Google、Apple、Mozilla 等浏览器厂商共同推进的次时代图形标准，WebGPU 毫无疑问会在未来取代 WebGL，这也是 Cocos 投资 WebGPU 技术的核心原因。目前 WebGPU 仍然在草案阶段，不过已经锁定了 v1.0 的目标，确保至少一家浏览器厂商完成全部 feature 的实现，正在全力推进中，预计很快就会完成 v1.0 里程碑。而且 Chromium、Safari、Firefox 等浏览器都已经开始推进实验性实现，其中 Cocos 的 WebGPU 发布在 Chromium 中已经得到验证。

　　从时间上来看，WebGPU 的出现时间稍晚，但也正因如此，让 WebGPU 得以借助次时代图形 API 的经验，做出更好的设计。未来随着 WebGPU 标准在主流浏览器的逐步落地，其能力将给 H5、小程序等的内容创作与性能表现带来更多可能，也一定会在 Web 平台出现不逊于原生 app 的图形渲染效果，同时基于 Web 端的优势给用户带来更轻量和便捷的体验。

　　凌华彬 Cocos 引擎技术总监。法国里尔科技大学图像、视觉与交互专业硕士。2011 年开始投入在 Web 渲染引擎和交互内容研发。2014 年加入 Cocos 团队负责 Cocos2d-html5 Web 引擎的研发。从 2017 年开始专注于 Cocos Creator 的 3D 引擎研发，推动了 Cocos Creator 的渲染器重构、原生渲染器和 3D 化进程，对引擎架构、多后端渲染技术、跨平台框架都有非常深入的理解。目前正带领团队基于现代图形 API：WebGPU、Vulkan、Metal 打造国人自己的跨平台商业化 3D 引擎。

　　2022 年是云原生 WebAssembly （Wasm）工具链逐渐成熟的一年，也是 Wasm 的云原生应用逐渐走向主流的一年。相信在 2023 年，Wasm 的应用将会更广泛。

　　在微服务方面，Wasm 为其提供了轻量级、安全、高性能的运行环境。例如，wasmCloud 与 Adobe 合作部署了基于 Wasm 的安全微服务；基于 WasmEdge 的微服务也能够直接使用 Dapr 集成的几百种服务。

　　2022 年，这一年发生了很多大事，注定会被历史铭记。寒冬已至， IT、互联网行业裁员潮席卷全球，企业不得不去考虑如何降本提效。这一年，Flutter 发布 3.0 版本, 稳定支持 6 大平台；Deno 完成 2100 万美元 A 轮融资；国内低代码/零代码方向的开源项目不断涌现，迭代翻新。

　　（2）跨平台技术栈成为主流。一套代码多平台适配，为企业节省至少一半的研发成本。React Native、Flutter 等跨平台方案更加成熟。使用 Flutter、React Native 等框架，开发效率更高，交互体验与原生无异。

　　（3）低代码/无代码是大势所趋。迫于成本压力，企业更需要可以独立完成应用开发的工程师。前后端技术也都朝着让编程更简单的方向发展。低代码不仅不会替代工程师，反而对工程师的抽象设计能力有更高的要求，帮助工程师逃离无趣的业务逻辑，有更多时间学习思考创造。

　　在潮流涌动的当下，一种专门针对特定应用领域的计算机语言——DSL （domain specific language），被广泛用于低代码技术。使用 DSL，可以将常见功能抽象为 Tableasp学习、Form 等部件之后，再组装为应用，最后由 DSL 解释器或编译器将其翻译为目标平台代码。事实上，从汇编到低代码, 每一次编程语言的升级，都可以看成是在简化程序的逻辑表述，把更多的工作交由编译器(或解释器)来完成，从而达到提高编码效率的目的。

　　在人机交互细节方面，DSL 可以根据目标平台特性分别实现。例如，同一段 Table DSL，在 WEB 端可以使用 React/VUE 实现，在移动端可以使用原生 SDK 实现，在游戏界面内可以使用游戏 UI 引擎实现，也可以使用 Flutter 等跨平台 UI 框架统一实现。通过这种方式，可以更优雅地实现一套代码多平台适配，开发效率更高、无技术栈依赖，交互体验等于各平台原生。

　　前后端联调、测试在应用开发过程中占用大量时间，而 DSL 组装方案可以完美解决这个问题。将数据交互逻辑封装到部件中，应用组装时，为每个部件实例指定数据源，可节省大量前后端联调测试时间。应用开发(组装) 不再有前后端边界，节省沟通成本，有效提升应用开发效率。

　　王伟平 象传智慧创始人、开源应用引擎 YAO 项目主导人、信通院低代码行业推进中心专家。曾任九城集团技术总监、新浪云 SAE 高级产品经理、新浪网高级工程师， 15 年技术产品研发、运营管理经验。

　　究其原因，主要有两个方面。一是 Serverless/FaaS/边缘计算等架构激发了对 Workload 被调度性能的追求，JavaScript 是配合网页出现的脚本语言，整个生态都是面向这一目标进行设计和优化的，包括启动速度、部署密度、相对合理的执行效率等等。二是最近两年 B/S 架构开始回归。在移动化进程中，传统 B/S 架构的 Web 逐步被冷落，甚至 B/S 中的 B（浏览器/WebView）也要先 HTML 白屏再加载一个 JS Bundle 再执行调用 API 展示页面，导致用户体验劣化，工程效率也被分散。这对在线服务架构的易用度提出了新要求。

　　在被调度性能方面，JavaScript 也有较大优势。在 Serverless 架构下，一门编程语言的被调度性能主要取决于三个因素：分发代码包的大小、用代码加载速度、内存占用。首先，在分发代码包的大小方面，浏览器里面的 JavaScript 工具链很大一部分就是在解决这个问题，很容易移植到在线领域；其次，在代码加载速度方面， JavaScript 引擎一般都在用户代码加载速度方面定向优化，比如各种热启动的机制；最后，在内存占用方面，JavaScript 虽然谈不上很低，但与 JVM 一类相比，还是小很多。归其原因，Serverless 动态实例扩容的技术挑战，和 Chrome 里面新打开一个网页 Tab 的技术挑战，很多方面是重合的。

　　还有一个值得关注的方面是 JS 安全运行的问题。Node.js 是过去几年最流行的 JavaScript 在线运行时。和 Python、Java 以及其他一切 Runtime 一样，Node.js 提供了大部分的系统编程的能力，这正是不安全的来源。目前大部分编程语言 Runtime 本质上不仅仅是一个栈机，更多是在想办法把系统调用、libc 等等能力封装成一个又一个易用的编程语言 API，以解决在特定操作系统上单机编程的问题。我们是否可以通过只提供 Web 合规的 API，来尽可能将 JS 安全地运行在在线环境，从起点上屏蔽这些问题？

　　同时，这种模式在 WebAssembly 方向上也有这种发展路径，比如最近新出来的 WasmEdge 项目，再比如前几年的 Nanoprocess 概念。大家无非是想拥有一个具备真正 Serverless 体验的编程环境和运维体系，靠技术的进步屏蔽运维成本。脱离系统 API 的安全性，高效的被调度性能，出了问题能被定位，这些做到后，我们将迎来真正的 Serverless。

　　九十 淘宝高级技术专家，负责阿里 JavaScript 在线服务的体系，团队开源产品包括 Midway 框架 、Noslate Runtime、Noslate Debugger 等。多年来一直致力于让 JavaScript 在线服务发挥更大的实用价值，更高的交付效率和更低的资源成本。

　　无组件模式，诸如基于 Web Components、Islands 架构模式构建丰富的组件集。

　　众所周知，JavaScript 的工具链存在执行速度的问题，主要体现在编译方面，进而影响到开发和构建速度。

　　Rust 作为 JavaScript 的基础设施语言之一，在底层的 Node.js 生态方面，诸如 NAPI-RS 提供了使用 Rust 构建预编译 Node.js 原生扩展的能力。而围绕编译与构建的 SWC、Parcel 等工具也提供了更快的开发体验。

　　社区已经达成共识：针对不同的场景，构建不同的低代码平台。而对于中小型公司，还面临着一个问题，开发人员响应“热闹驱动开发”开发了低代码平台，而这些低代码平台似乎并没有真正体现价值？设计不出适合业务使用的体验与流程？

　　值得一提的是，金融科技公司倾向于招聘会 Python 的业务人员。或许，你需要真正懂数字化的业务？

　　在移动设备上运行 TensorFlow Lite，在边缘型的嵌入式设备中能部署 AI 应用（tinyML），那么直接运行在浏览器上的 AI 也将变得流行（TensorFlow.js、ML5.js）。而我们还要面对模型体积带来的网络影响，如何平衡体积与质量成为了一种挑战？

　　Server Driven UI。在 SDUI 架构下，服务器返回的数据（JSON）会包含页面的组件信息、布局以及数据类型等等，前端则根据这些信息来渲染 UI。从模式上来说，它与我们现今构建的低代码模式极为类似，围绕生成的 JSON 生成组件等的信息。相比之下，只是产出的结果和过程数据略有差异。

　　Islands 架构（孤岛架构）。孤岛架构鼓励在服务器呈现的网页中使用小的、集中的交互块。Islands 的输出是渐进式增强的 HTMLasp代码怎么写出控件符号和字符，更具体地说明了增强是如何发生的。

　　多年前，Cloudflare 公司提供了一个名为 Cloudflare Worker 的工具，可以在边缘侧执行应用程序。越来越多的主流框架支持这种方式，诸如 Next.js 的 Edge Runtime。简单来说，CDN 厂商提供了一个动态的 JavaScript 服务器，让代码运行在边缘侧，以提高应用程序的访问速度。其适合处理预处理场景，诸如授权等，也应用于 Islands 架构。

　　Phodal 黄峰达（Phodal），《前端架构：从入门到微前端》《自己动手设计物联网》等多本技术书籍作者、Thoughtworks 技术专家。开坑，开到填不完的知名开源挖坑选手。乐于分享软件开发经验，以帮助开发人员创建更好的 KPI。现在，经常在 IDE、图形引擎和编译器相关的领域游荡。