阿里更受欢迎的16个前端开源项目

大家好，我是Echa。

今天小编要说的主角是阿里巴巴，一说到阿里，作为程序员的小编，马上就能联想到阿里巴巴中的达摩院，达摩院人才济济，能进去的人都是有一技之长，都是绝世高手。小编盘点阿里巴巴的达摩院的前沿实验室就有五大类前沿技术的实验室，那是神一般的存在地方。也是国人的骄傲。具体如下：

机器智能实验室数据计算实验室机器人实验室金融科技实验室X实验室

今天小编先简单分享阿里更受欢迎的16个前端开源项目，希望对大家有所帮助。至于复杂的达摩院实验室相关项目先发个预告，后续小编挨个挨个给大家分析讲解。

全文大纲ant--蚂蚁金服开源的一套企业级的前端设计语言和基于 React 的前端框架实现。g2-数据驱动的高交互可视化图形语法，一条语句即可构建出各种各样的可交互的统计图表。-企业级中后台 UI 解决方案，旨在提升设计与开发之间 UI 构建效率的工作方式。-基于 G2 封装的 React 图表库，数据可视化项目可能会用到egg-企业级 Node.js 框架umi-基于 React 的前端框架dawn-前端构建和工程化工具，简化并统一了开发人员的日常构建与开发相关的工作。G3D-一个基于 WebGL 的 3D 绘图引擎。Weex-跨平台移动开发工具。Weex Ui-基于 Weex 的 UI 组件库Ant 动效语言& React 框架动效解决方案。Hilo- HTML5 互动游戏引擎。这个项目可以帮助开发者快速创建HTML5游戏。.js - 模板引擎。React Web -通过与 React 一致的 API 构建 Web 应用。Mock.js -模拟数据生成器，帮助前端开发者独立于后端进行开发，帮助编写单元测试。-基于React的表单解决方案。ant-

官网：

：

antd 是基于 Ant 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

特性

如下图：

g2

官网：

：

G2 起源于 的图形语法：《The of 》，但又不止于图形语法。

G2 是一个简洁的、渐进式的可视化语法。文档将按照下面的顺序去分别介绍每一个模块，你可以把它当做一个字典去搜索和查询。

特色

如下图：

官网：

：

-企业级中后台 UI 解决方案，旨在提升设计与开发之间 UI 构建效率的工作方式。

特色

企业级的中后台设计系统解决方案

基于对阿里集团中后台业务的总结和抽象， 提供了一套开箱即用的核心模式

强大的配置平台，轻松维护品牌统一

通过设计系统站点，统一管理设计物料和前端物料； 使用 Token，轻松定制全局样式

模块化研发，让效率突飞猛进

配合前端工具，开发模块模板更高效

原生插件，让设计和研发无缝衔接

设计系统里所有设计物料和前端物料，都能通过 插件直接使用，真正做到 to Code

如下图：

官网：

：

- 基于 G2 封装的 React 图表库，数据可视化项目可能会用到。

特性

如下图：

egg

官网：

：

Egg.js 为企业级框架和应用而生，我们希望由 Egg.js 孕育出更多上层框架，帮助开发团队和开发人员降低开发和维护成本。

设计原则

我们深知企业级应用在追求规范和共建的同时，还需要考虑如何平衡不同团队之间的差异，求同存异。所以我们没有选择社区常见框架的大集市模式（集成如数据库、模板引擎、前端框架等功能），而是专注于提供 Web 开发的核心功能和一套灵活可扩展的插件机制。我们不会做出技术选型，因为固定的技术选型会使框架的扩展性变差，无法满足各种定制需求。通过 Egg，团队的架构师和技术负责人可以非常容易地基于自身的技术架构在 Egg 基础上扩展出适合自身业务场景的框架。

Egg 的插件机制有很高的可扩展性，一个插件只做一件事（比如 模板封装成了 egg-view-、MySQL 数据库封装成了 egg-mysql）。Egg 通过框架聚合这些插件，并根据自己的业务场景定制配置，这样应用的开发成本就变得很低。

Egg 奉行『约定优于配置』，按照一套统一的约定进行应用开发，团队内部采用这种方式可以减少开发人员的学习成本，开发人员不再是『钉子』，可以流动起来。没有约定的团队，沟通成本是非常高的，比如有人会按目录分栈而其他人按目录分功能，开发者认知不一致很容易犯错。但约定不等于扩展性差，相反 Egg 有很高的扩展性，可以按照团队的约定定制框架。使用 可以让框架根据不同环境定义默认配置，还可以覆盖 Egg 的默认约定。

与社区框架的差异

是 Node.js 社区广泛使用的框架，简单且扩展性强，非常适合做个人项目。但框架本身缺少约定，标准的 MVC 模型会有各种千奇百怪的写法。Egg 按照约定进行开发，奉行『约定优于配置』，团队协作成本低。

Sails 是和 Egg 一样奉行『约定优于配置』的框架，扩展性也非常好。但是相比 Egg，Sails 支持 REST API、 这样可扩展的 ORM、前端集成、 等，但这些功能都是由 Sails 提供的。而 Egg 不直接提供功能，只是集成各种功能插件，比如实现 egg-，egg- 等这样的插件，再使用 sails-egg 框架整合这些插件就可以替代 Sails 了。

特性

如下图：

umi

官网：

：

Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

Umi 是蚂蚁集团的底层前端框架，已直接或间接地服务了 10000+ 应用，包括 Java、Node、H5 无线、离线（）应用、纯前端 应用、CMS 应用、 应用、 应用等。他已经很好地服务了我们的内部用户，同时也服务了不少外部用户，包括淘系、飞猪、阿里云、字节、腾讯、口碑、美团等。在 2021 年字节的调研报告中，Umi 是其中 25.33% 开发者的选择。

Umi 有很多非常有意思的特性，比如。

1、企业级，在安全性、稳定性、更佳实践、约束能力方面会考虑更多

2、插件化，啥都能改，Umi 本身也是由插件构成

3、MFSU，比 Vite 还快的 打包方案

4、基于 React 6 的完备路由

5、默认最快的请求

6、SSR & SSG

7、稳定白盒性能好的 和 Jest

8、React 18 的框架级接入

9、 更佳实践

如下图：

dawn

官网：

：

dawn 前端构建和工程化工具，简化并统一了开发人员的日常构建与开发相关的工作。

Dawn 取「黎明、破晓」之意，原为「阿里云·业务运营团队」内部的前端构建和工程化工具，现已完全开源。它通过 和 将开发过程抽象为相对固定的阶段和有限的操作，简化并统一了开发人员的日常构建与开发相关的工作。

有什么特点？

如下图：

G3D

官网：

：

G3D 是一款基于 WebGL 实现的 3D 渲染引擎。本系列教程将教会你如何使用 G3D。

基础

遵循以下几个步骤，以创建最基础的 3D 场景。

创建一个渲染引擎()，传入 对象。创建一个场景(Scene)，传入刚刚创建好的渲染引擎。创建一个相机。在大多数情况下，你需要创建透视相机()，这里我们创建一个环绕透视相机(era)，它继承自透视相机。创建一些光源。G3D 提供了几种不同类型的光源，这里我们创建了一个平行光源()。创建一些网格体(Mesh)。这里，我们创建了一个球形的网格体和一个矩形平面的网格体。使场景开始渲染。

如下图：

Weex

官网：

：

Weex - 跨平台移动开发工具

如下图：

weex-ui

官网： #/

：

weex-ui 基于 Weex 的 UI 组件库 。

如下图：

Ant

官网：

：

动效

界面动效能加强用户认知且增加活力。

动效价值#

衡量动效意义#

衡量一个动效是否有意义，我们可以通过以下几个标准来考核：

如下图：

Hilo- HTML5

官网：

：

Hilo是一个跨终端的互动游戏解决方案。他有以下几个特点值得被推荐。

Hilo作为一个跨终端的互动游戏解决方案。它的源码和架构是无依赖的，模块化的。同时也是开源的。

为了满足使用不同脚本模块加载器的同学的喜好。Hilo提供了多种模块范式的包装版本，请看这里不管你属于哪一个阵营，都能找到你爱的哪一个。

Hilo对于跨终端的解决方案是：永远保持最小内核，以渐进增强的独立Shim 的方式去包容不同终端。

Hilo不仅仅是一个渲染引擎，它更是一个集成了 Hilo Audio, Hilo 等游戏构建服务的综合解决方案。

除此之外，Hilo为动画纹理集的产出提供了一套自动化的输出方案，力求为你的构建带来更多的便利。

如下图：

.js

：

.js是模板语法的实现。

特性

如下图：

React Web

：

通过 React 兼容的 API 构建无线 Web 应用

如下图：

Mock.js

官网：

：

模拟数据生成器，帮助前端开发者独立于后端进行开发，帮助编写单元测试。

如下图：

官网：

：

介绍

在 React 中，在受控模式下，表单的整树渲染问题非常明显。特别是对于数据联动的场景，很容易导致页面卡顿，为了解决这个问题，我们将每个表单字段的状态做了分布式管理，从而大大提升了表单操作性能。同时，我们深度整合了 *** ON 协议，可以帮助您快速解决后端驱动表单渲染的问题。

特性

如下图：

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。