MoonWebTeam前端技术月刊致力于分享和推广前端技术的最新进展和优秀文章。我们在推荐文章的同时，也会分享团队内小伙伴对这些文章的深度解读与独到见解，以期为读者提供更多的思考角度和实践参考。欢迎广大 Web 前端技术爱好者关注MoonWebTeam前端团队 ，一起探索前端技术的无限可能！
1. 苹果开放大模型MM1
文章链接：
苹果加入战局，携 300 亿参数的 AI 大模型 MM1 “炸场”！
简介：
文章主要介绍了苹果在放弃“造车”赛道之后，正式进军“AI”赛道，于今年3月14日正式公布多模态大模型MM1，行业现有发布的多模态大模型的方式有两种：
- 闭源模型往往虽然可用，但外界对其数据模型、模型架构和训练细节所知甚少。
- 至于开放模型，很多公司会将模型参数连同数据模型和训练配置的详细说明一起发布，从而使社区能够在此基础上更进一步微调。
而苹果团队认为上述两种模式均为公开所使用算法的设计选择，为了推动这一领域的进一步研究，苹果进一步发表相关论文公开 MLLM 的构建过程，也试图尽可能地去分享制定设计的经验教训
见解与看法：
苹果对自身产品产业链拥有极大控制权，从硬件层的芯片到软件层操作系统都能形成闭环。与其它大模型产商面向云端应用有所不同，苹果布局LLM可以进一步与现有产业链结合，从芯片（AI芯片）到软件应用（如SIRI），实现本地推理，最终通过手机、电脑、VR等终端设备与用户链接，拥有很多遐想空间
在技术层面，苹果本次推出MM1模型，从第三方评测看，其多项指标优越于GPT-4和Gemini Pro等竞品，擅长多模态（能够同时处理文本、图像、音频等多种类型的数据）学习和推理，在跨模态任务中表现出色（如字幕生成、图像描述、问答系统等），与GPT的Transformer架构方向有所不同，MM1使用的MoE架构（一种基于专家混合的模型架构，模型被划分为多个专家子模型，每个子模型专注于处理某一特定类型的任务），也算为AI技术发展提供了一些新的方向
2. Signals 的标准化提案
文章链接：
简介：
在前端开发领域，状态管理总是一个绕不开的话题。随着 Web 应用程序越来越复杂，对于高效且可靠的状态管理解决方案的需求也水涨船高。2022 年，JavaScript 世界中出现了一个新概念：Signals，这个概念一度被大家炒作为前端状态管理的未来。
最近，Rob Eisenberg 以及 Daniel Ehrenberg 正式公开发布了 Signals 的 TC39 标准化草案，目前处于 Stage0 阶段，并且也推出了符合规范的 polyfill 。
见解与看法：
Signals标准化提案是一个在前端开发领域具有重要意义的进展，一旦提案能够通过，并被浏览器接纳，将解决目前前端框架各种造状态管理轮子的问题，带来的好处也一目了然，简化反应式编程，支持跨框架状态管理，性能在延迟计算和缓存的作用下也有一定提升，同时也可以减少不必要的资源加载，但各框架状态管理的实现方式百花齐放，并且不太符合React，UI反映状态在某一刻的快照，要完成状态管理大统一还有很长的路要走，可以期待Signals带来的精彩表现
3. Stable Video Diffusion
文章链接：
【AIGC-AI视频生成系列-5】Stable Video Diffusion -长文解读视频/3D生成变革的开始 - 知乎
简介：
Stable Video Diffusion 是 Stability AI 发布的视频生成AI产品，具有文本到视频、图像到视频、多帧生成、帧插值和3D场景等功能。它是一个开源项目，所有人都可免费部署使用。该模型采用了创新的数据处理和训练策略，包括图像预训练、视频预训练和高质量视频微调。此外，Stable Video 还采用了三种不同的视频标注方法来提高训练数据质量。
见解与看法：
Stable Video Diffusion 的出现预示着视频生成领域的一次重要突破，它将降低视频创作成本，为创作者带来更多可能性。同时，这一技术也可能对 3D物体生成 AI 产生一定的影响。该模型的创新之处在于其强大的文本到视频和图像到视频转换能力，以及在高质量、快速响应和创意自由度方面的优势。这些特点使得它在视频生成领域具有很高的竞争力。Stability AI 详细披露了训练过程中的各种细节，这对于文生视频模型的研究和发展具有重要的指导意义，通过分享这些经验，Stability AI有望推动整个领域的进步。
4. 数字人
可以对话的专属数字人，AIGC数字人解决方案升级发布-腾讯云开发者社区-腾讯云
简介：
主要介绍了人工智能视频制作平台Pipio推出的视频自动AI配音工具。该工具能够在保留原始声音的同时，快速进行视频翻译，并且无缝地将说话者的唇部运动与新语言相匹配。文章通过展示加拿大说唱歌手德雷克和女歌星霉霉（泰勒・斯威夫特）的示例，说明了Pipio工具在口型匹配、视频分辨率、语言翻译保真度和翻译速度方面的优势，以及它支持的40多种语言。
见解与看法：
数字人赛道作为人工智能领域的一个重要分支，近年来得到了快速发展和广泛关注。它结合了AI技术，特别是大型语言模型（LLM）和AIGC（AI生成内容）技术，使得虚拟数字人在多个商业领域实现了实际落地。这一趋势不仅展示了技术的成熟度，也为未来的商业模式和产业发展提供了新的可能性。首先，虚拟数字人的概念并非现代才有。早在20世纪80年代，人们就开始尝试将虚拟人物引入现实世界中。随着时间的推移，CG、动作捕捉、3D建模等技术的发展，虚拟数字人的制作变得更加精细和逼真。然而，这些技术的高成本限制了它们的广泛应用。
2023年，AIGC技术的崛起和类ChatGPT语言大模型的问世，为数字人赛道注入了新的活力。虚拟数字人开始在文旅、电商、金融等多个行业扮演重要角色，如代言人、主播、播报员、客服和智能助理等。这些应用不仅提高了效率，也为用户提供了新颖的体验。
传统的3D建模技术制作一个高质量的数字人成本可能高达百万，而AIGC技术的应用使得这一成本大大降低。此外，ChatGPT等技术赋予了数字人“大脑”，使它们能够进行复杂的交流和决策，进一步拓宽了它们的应用范围。现阶段市面上OpenAI商城中下载排行第一的品类就是AI女友，如加持上数字人技术做成手游就是加强版love plus，市场前景可期。
5. 微前端
文章链接：
简介：
这篇文章主要对业界五种微前端实现方案中的实现思路、优点和缺点进行了较为详细的介绍和分析，并给出了一些实战的 Demo。
-
iframe： 浏览器原生的硬隔离方案，可以完美解决样式隔离、js 隔离等问题，但其最大的问题在于应用间上下文无法被共享，存在开发体验、产品体验的问题，例如，浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用、iframe 内外系统的通信、数据同步繁琐等。
-
single-spa： 最早的微前端框架，兼容多种前端技术栈，它的实现思路主要是监听 URL 变化，然后加载对应的子应用的 js，并执行子应用的生命周期函数，Javascript 沙箱隔离和 css 隔离需要依赖 single-spa-leaked-globals 和 single-spa-css 插件实现，前者基于 window 对象进行隔离，并不是完美 JS 沙箱，后者主要用于子应用样式的加载和卸载，子应用之间的样式隔离官方推荐使用 Scoped CSS 或者 Shadow DOM。
-
qiankun： 阿里基于 single-spa 实现的微前端框架，但是与 single-spa 基于 js-entry 不同，qiankun 是基于 html-entry，即主应用加载并解析子应用的 html，从中分析出 css、js 再去沙盒化后加载执行，最终将子应用的内容渲染出来。它支持 shadow dom 实现样式隔离，并提供了基于 Proxy 实现的沙箱和快照沙箱两种 js 隔离方案，不过使用改造成本较大，从 webpack、代码、路由等等都要做一系列的适配，且不支持多应用同时激活在线
-
wujie： 腾讯基于 WebComponent 容器+ iframe 沙箱实现的微前端框架，也是基于 html-entry，但它解析 html 后并不是直接执行，而是提取 script 放入 iframe 中进行执行，确保 js 隔离，然后提取出 css、html 放入 WebComponent 中，确保样式隔离，然后拦截document对象，统一将dom 指向 shadowRoot，也确保了 js 能够正确操作 dom。整体而言，相较于之前的方案很好地解决适配成本、环境隔离等问题，且支持多应用同时在线（iframe 可以保留子应用状态）。
-
Micro App： 京东基于 webComponent 实现了一套微前端框架，它实现了一个 WebComponent 的组件。并实现了类似 ShdaowDom 的效果，开发者只需要用 标签来加载子应用即可，而对子应用的加载、js 隔离、样式隔离的逻辑都封装在了web component组件中。其中，JS 隔离支持 Proxy 沙箱和 iframe 沙箱， CSS 隔离方案使用的是前缀隔离的方式，虽然子应用间不会相互侮辱，但是主应用的样式还是会污染到子应用上，相较于 iframe 和 ShadowDom 没有那么完美。
见解与看法：
微前端架构是为了在解决单体应用随着开发和维护时间的增长，所带来的单体应用规模的变化而导致的可维护性变差的问题，微前端框架最核心的点在于各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享。
从目前业界微前端方案中可以发现，在样式隔离上，WebCompoent 和 CSS 前缀的方式都可以很好地解决子应用间样式的污染问题，但是主应用的样式还有可能会污染到子应用，更好的方案应该是使用 cssMoudle 之类的工具或者团队协商好样式前缀。在 JS 隔离上，iframe 沙箱使用更加简洁，能够完美做到 js 隔离，且支持保留应用状态，这应该是目前微前端实现 JS 隔离的一个比较主流的方案了。
6. 前端 Monkey 自动化测试工具
文章链接：
简介：
这篇文章主要讲的是得物团队结合 B 端 Table、Form 等组件，将 Monkey 测试的理念引入前端，搭建了一套从用例管理、自动测试、异常收集、报告生成全流程的测试工具。
见解与看法：
文章中提到的一些思路是值得我们借鉴的，例如：
- 前后端接口参数一致性验证
为解决后端接口参数调整，前端没有及时感知导致调用失败的问题，得物团队搭建了一套接口管理平台，在平台上基于 JSON Schema 协议描述接口参数，并提供 API 能拉取接口参数 JSON Schema 描述并进行验证，前端统一使用 API 来校验参数，这样可以确保后端参数调整后前端也能及时变更验证逻辑。
我们的接口管理平台也可以借鉴这个思路，为主调方提供调用接口的 SDK 工具，工具内部自动从服务端拉取接口参数 JSON Schema 进行验证，规范接口的调用
- 接口参数合法率统计
对接口调用的来源和参数合法率进行统计，可以有效的发现哪些来源页面的前端校验做得不够健全。
我们的接口管理平台同意可以借鉴这个思路，在 SDK 中验证参数后上报数据统计参数合法率，通过数据监控来发现哪些前端页面的表单验证不够健全，进而提高前端页面质量。
7. Tango 低代码引擎沙箱实现解析
文章链接：
搭建一个浏览器版 Vite 沙箱 · Issue #111 · mcuking/blog · GitHub
简介：
Tango低代码区别于传统以Schema为核心的低代码引擎，它是一个以源码为核心，支持双向编码的低代码引擎（使用EsTree规范的公有协议作为中间协议)。本文简单介绍了 Tango 低代码引擎的沙箱能力，并分析了 CodeSandbox 的基本结构和工作流程。通过 CodeSandbox 强大的沙箱能力与优化，Tango 低代码引擎实现了可视化预览与搭建能力，为开发者提供了便捷高效的开发体验。
见解与看法：
Tango的编译构建是在浏览器沙箱中完成，通过缓存、预构建等方式提高编译构建速度，moka的出码流水线可以借鉴。
目前moka通过流水线出码构建，同个活动每次发布都会触发云端初始化代码环境，并重新安装依赖构建，导致发布需等待很久。可以提前将一些常用的依赖预缓存，或者同个活动的第二次发布的依赖可以从缓存中读取等方式提高发布构建的速度。
8. App跨平台框架VS原生开发深度评测之2023版
文章链接：
简介：
App跨平台框架历史悠久，从cordova、react native、flutter，直到最近的uni-app x。江山代有才人出，每个都试图颠覆原生，但过去却一直未成功。作者从逻辑层、渲染层、语言类型的角度，来阐述出代表框架。并从这些角度详细对比了和原生应用的差别具体在哪里。并推出自己团队的uni-app x 框架和uts的编程语言。
见解与看法：
uts在Android上被编译为kotlin，它的逻辑层和UI层都是纯原生的，没有通信问题，理论上它的性能真正达到了原生水平。在iOS上，情况要复杂些。由于swift编译iOS应用必须依赖xcode，而DCloud的开发者中windows占比更高。且iOS上js和原生通信有限，所以uni-app x在iOS上提供js和swift双选逻辑层。这个框架解决跨平台的思路无疑是领先其他框架的，但是无疑工作量是巨大的，不仅要完善自己创建的编程语言，还要解决好各个平台的编译场景，以及完善对应的生态。Dcloud没有大公司的背书，在人力投入上以及持续的维护上是有很大的挑战性。能否流行起来，还是要看后续的运营维护以及后续的持续投入上。
最后，如果客官觉得文章还不错，👏👏👏欢迎点赞、转发、收藏、关注，这是对小编的最大支持和鼓励，鼓励我们持续产出优质内容。
9. 关于我们
MoonWebTeam目前成员均来自于腾讯，我们致力于分享有深度的前端技术，有价值的人生思考。
