细数阿里开源的前端项目及实践

朱雀 2022-11-14 13:28 465阅读 0赞

> ### 感谢[Alibaba][]提供如此丰富的前端开源项目 ###

### 1. WEditor ###

[官方GitHub地址][GitHub]

项目描述：编辑器能够提供辅助编写脚本，查看组件信息，调试代码等功能。

[2021-Windows下的python3和pip3安装与配置][2021-Windows_python3_pip3]

[Windows下WEditor安装和使用][Windows_WEditor]

### 2. react-intl-universal ###

[官方GitHub地址][GitHub 1]

[react-intl-universal][GitHub 1] is a React internationalization package developed by [Alibaba Group][].

react intl universal是阿里巴巴集团开发的react国际化软件包。

### 3. sentinel-nodejs ###

[官方GitHub地址][GitHub 2]

### 4. structure-view ###

[官方GitHub地址][GitHub 3]

Structure View是ATOM编辑器的结构视图，就像Eclipse中的Outline视图或IDEA/WebStorm中的Structure tool窗口一样，通过树状视图提供源代码符号的快速导航。

### 5. f2e-spec ###

[官方GitHub地址][GitHub 4]

「阿里巴巴前端规约」是在阿里经济体内广泛使用的一套前端编码和工程规范，致力于通过统一编码风格、普及最佳实践和代码缺陷检查帮助团队降低协作成本、提升前端项目的可维护性和稳定性。

### 6. camera-proxy ###

[官方GitHub地址][GitHub 5]

跨平台3D摄像机控制器。

### 7. schema-plugin-flow ###

[官方GitHub地址][GitHub 6]

schema-plugin-flow，简称 Sifo (\[sɪfɔ\])，是一个高扩展性、可二开的插件式前端开发框架。

*  导读
    
     *  这里的高扩展包括但不限于页面结构的修改、渲染组件的替换、组件属性的变更、组件事件的监听与阻断等。
     *  可二次开发（简称可二开）主要体现在：使用 Sifo 开发，使得开发者可以在不接触源代码的情况下，对业务逻辑和页面布局进行高扩展。
     *  Sifo 是开发框架，本身是与 UI 框架解耦的，React 框架下可以使用 sifo-react ，Vue 框架下可以使用 sifo-vue 。结合不同的模型插件，可以实现丰富的个性功能。 
     *  Sifo 的另一个特点是插件式开发，这使得不论是在 React 下还是 Vue 下，开发者写的逻辑代码几乎是一样的 ，二次开发者同样如此。
 *  [sifo-model][] 是 Sifo 的内核，它使用 JSON （称为 schema）来描述页面结构，使用插件来控制逻辑。有三类插件：模型插件、页面插件和组件插件。关于 Sifo 的基础信息和使用方法请阅读此包的 README。
 *  [sifo-react][] 是封装了 sifo-model 和 sifo-singleton 的一个React 组件。sifo-react 还提供了 `sifoAppDecorator` 功能，可以使一个普通的 React 组件拥有扩展能力，详情请见 README 或在线示例。
 *  [sifo-vue][] 是封装了 sifo-model 和 sifo-singleton 的一个 Vue 组件。sifo-vue 还提供了 `sifoAppDecorator` 功能，可以使一个普通的 Vue 组件拥有扩展能力，详情请见 README 或在线示例。
 *  [sifo-singleton][] 是一个全局扩展容器。所有的扩展插件和扩展组件都注册到这里。

### 8. tofu.js ###

[官方GitHub地址][GitHub 7]

The official web framework for WebAR.

WebAR的官方web框架。

### 9. Trescope ###

[官方GitHub地址][GitHub 8]

Trescope是一个综合性的3D机器学习开发工具，致力于提高3D领域的开发经验和速度，帮助研究人员和开发人员标记、调试、可视化各种3D数据

### 10. online test platform ###

[官方GitHub地址][GitHub 9]

MagicOTP (Online Test Platform)是一个开源的线上测试平台，思想是通过回放大批量线上真实请求，并结合规则验证的形式对服务返回的结果进行校验。相对于传统测试用例设计中固定的输入和输出数据方式，更能提高数据的覆盖度，对系统稳定性监测提供有力的保障。请求数据来源于线上服务真实请求的收集，验证规则又不依赖于具体请求数据，大大节省了开发和维护的成本。依托此线上测试平台，您只需要根据业务需求梳理添加功能点的校验规则，即可完成接入，快速完成对线上服务的业务逻辑验证工作。

### 11. intelligent-test-platform ###

[官方GitHub地址][GitHub 10]

Markov(阿里妈妈功能测试平台)是在测试转型大背景下自研的新一代功能测试平台，相较于传统的功能测试框架具有着诸多的优点，比如可视化用例编写管理、分布式的沙盒环境和测试数据构建、测试流程pipeline管理。此外，基于该平台还衍生出了许多智能化测试技术，如基于朴素贝叶斯的用例推荐、参数组合膨胀过滤的用例推荐、基于用例编排算法的智能回归技术、基于用例画像的智能排查系统、精准智能测试等。我们可将Markov视为新一代的功能测试框架，相对于传统经典的测试框架(如pytest)+jenkins的模式，Markov模式对于使用者的门槛更低，能让不懂测试的开发和算法同学简单的进行自助测试，达到了让天下没有难做的"测试"的目标。

### 12. UI-Recorder ###

[官方GitHub地址][GitHub 11]

UI Recorder 是一款面向多端的 UI 自动化录制工具，类似于[Selenium IDE][] 但比Selenium IDE 更加强大!

UI Recorder 非常简单易用，零成本解决测试回归问题。

### 13. Entrypoint wrapper webpack plugin ###

[官方GitHub地址][GitHub 12]

一款用于包装 Entry 配置的 Webpack 插件。

### 14. AnyProxy ###

[官方GitHub地址][GitHub 13]

AnyProxy是一个基于NodeJS的，可供插件配置的HTTP/HTTPS代理服务器。

### 15. BindingX ###

[官方GitHub地址][GitHub 14]

基于 `weex / React Native` 的富交互解决方案。

它提供了一种称之为 `表达式绑定(Expression Binding)` 的机制可以在 weex 上让手势等复杂交互操作以60fps的帧率流畅执行，而不会导致卡顿，因而带来了更优秀的用户体验

### 简要介绍 ###

由于 `weex/RN`框架底层使用的 `JS-Native Bridge` 具有天然的异步特性，这使得 `JS` 和 `Native` 之间的通信会有固定的性能损耗，因此在一些复杂的实时交互场景中(如手势)，JS 代码很难以高帧率运行，这极大地限制了框架的能力。目前官方并没有很好的方式解决。

而我们通过探索，提出了一种全新的方式用来解决这个问题，方案称之为 `Expression Binding` 。它的核心思想是**将"交互行为"以表达式的方式描述，并提前预置到Native从而避免Native与JS频繁通信。**

### 16. DIMBIN ###

[官方GitHub地址][GitHub 15]

High-performance serialization for multi-dimension arrays

针对大量数据网络传输设计的序列化方案，用于储存多维数组

通过*直接内存操作*实现高于 JSON 多个数量级的性能和更小的传输体积

### 17. Plover ###

[官方GitHub地址][GitHub 16]

Plover是一个专注于 **模块化方式构建web应用** 的NodeJs MVC web框架。不同于其它web框架，它提供完整的应用和模块化模型可以让复杂的业务功能可以方便地抽象成多个模块的方式进行独立开发，让应用可以像搭积目的方式拼装模块而成。

Plover基于[koa][]构建，它可以很方便地独立部署或者集成到其他koa的应用一起部署。

Plover专注于 **模块化** ，为 **快速构建web应用** 提供最佳方案 。

### 18. hbase-client ###

[官方GitHub地址][GitHub 17]

Asynchronous HBase client for Node.js, pure JavaScript implementation.

### 19. tmallgenie-miniapp-api-demo ###

[官方GitHub地址][GitHub 18]

天猫精灵语音小程序示例

### 20. vanex ###

[官方GitHub地址][GitHub 19]

Vanex 是基于 mobx 的 React 数据流管理框架，旨在借助 mobx 提供的基础能力，帮助用户组织更大规模的 React 项目。

### 21. dla-connector-for-tableau ###

[官方GitHub地址][GitHub 20]

DLA Connector for Tableau

### 22.  nQuery ###

[官方GitHub地址][GitHub 21]

Generic SQL engine for Web and Big-data.

用于Web和大数据的通用SQL引擎

### 23. JS Memory Analysor ###

[官方GitHub地址][GitHub 22]

JS Memory Analysor 是一种用于检测Javascript/NodeJS内存泄漏的工具。

### 24. Atom-js-debug ###

[官方GitHub地址][GitHub 23]

A JavaScript / Node.js debug client for Atom

### 25. Atom-js-debug ###

[官方GitHub地址][GitHub 23]

A JavaScript / Node.js debug client for Atom

### 26. form-render ###

[官方GitHub地址][GitHub 24]

易用的跨组件体系的表单渲染引擎 - 通过 JSON Schema 快速生成自定义表单配置界面。

### 27. pipcook ###

[官方GitHub地址][GitHub 25]

A JavaScript application framework for machine learning and its engineering.

[知乎-pipcook - 让前端拥抱智能化的一站式算法平台][-pipcook -]

### 28. Dawn  ###

[官方GitHub地址][GitHub 26]

[中文文档][Link 1]

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

### 29. Butterfly ###

[官方GitHub地址][GitHub 27]

基于JavaScript/React/Vue2的流程图组件

*  丰富DEMO，开箱即用
 *  全方位管理画布，开发者只需要更专注定制化的需求
 *  利用DOM/REACT/VUE来定制元素；灵活性，可塑性，拓展性优秀

### 30. Rax  ###

[官方GitHub地址][GitHub 28]

[中文文档][Link 2]

Rax 是用于构建移动跨端应用的渐进式 React 框架。

## 特性 ##

超轻量，高性能，易上手的前端解决方案。一次开发多端运行，解放重复工作，专注产品逻辑，提升开发效率。

*  最佳实践：通过 [Rax App][] 集成路由、跨端开发、SSR、性能优化等最佳实践。
 *  可视化开发：通过 VS Code 插件集合 [Iceworks][] 简化前端工程复杂度，提供可视化、配置化等能力。
 *  丰富的组件和 API ：提供丰富的 Rax 组件 ，[Fusion][] Mobile 组件以及跨端 API。

### 31. Rax-map ###

[官方GitHub地址][GitHub 29]

Rax-map 基于 rax 与高德地图，快速开发无线地图类业务需求

*  帮助你轻松的接入地图到 Rax 项目中;
 *  目前提常用地图组件，能满足大部分简单的业务场景;
 *  同时也提供了组件的扩展能力,自定义组件;
 *  如果你有更复杂的需求，或者觉得默认提供的组件功能不够,可以参考[高德][Link 3]api配置,提供更丰富的开发能力;

### 32. Funcraft ###

[官方GitHub地址][GitHub 30]

[Fun][] 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件（template.yml），协助您进行开发、构建、部署操作。

### 33. Beidou ###

[官方GitHub地址][GitHub 31]

***Beidou(北斗)*** 是 ***NodeJS & React*** 同构框架，基于[Egg.js][]开发。

[beidou-cli介绍及使用][beidou-cli]

### 34. F2etest ###

[官方GitHub地址][GitHub 32]

F2etest是一个面向前端、测试、产品等岗位的多浏览器兼容性测试整体解决方案。

注：F2e test = Front to End Test = 前端测试

*  最新文档：[语雀文档][Link 4]、[Github Page][]

[F2etest-web 基于树莓派部署][F2etest-web]

### 35. Timeline ###

[官方GitHub地址][GitHub 33]

时间线管理器

在一个 Timeline 中管理所有的动画和 shedule 任务，WebMedia-like 接口，致力于稳定、流畅地实现复杂动画并易于调试。

**支持多线程、multi-context 同步。**

Timeline 的设计原则是：无论何时从任意时间跳到任意时间，总能保证最终结果的正确。

### 36. scalable-form-platform ###

[官方GitHub地址][GitHub 34]

[中文文档][Link 5]

基于动态表单协议（[JSON Schema][]）的表单解决方案，提供了基于 [ant-design][] 和 [ant-design-mobile][] 的前端表单渲染引擎sdk、可视化表单编辑器和可独立部署镜像。

### last one. ali-sdk ###

[官方GitHub地址][GitHub 35]

[ali-sdk介绍及实践][ali-sdk]

未完待续

[Alibaba]: https://github.com/alibaba
[GitHub]: https://github.com/alibaba/web-editor
[2021-Windows_python3_pip3]: https://blog.csdn.net/wz_coming/article/details/115320272
[Windows_WEditor]: https://blog.csdn.net/wz_coming/article/details/115320632
[GitHub 1]: https://github.com/alibaba/react-intl-universal
[Alibaba Group]: http://www.alibabagroup.com/
[GitHub 2]: https://github.com/alibaba/sentinel-nodejs
[GitHub 3]: https://github.com/alibaba/structure-view
[GitHub 4]: https://github.com/alibaba/f2e-spec#
[GitHub 5]: https://github.com/alibaba/camera-proxy#
[GitHub 6]: https://github.com/alibaba/schema-plugin-flow#
[sifo-model]: https://github.com/alibaba/schema-plugin-flow/blob/master/packages/sifo-model
[sifo-react]: https://github.com/alibaba/schema-plugin-flow/blob/master/packages/sifo-react
[sifo-vue]: https://github.com/alibaba/schema-plugin-flow/blob/master/packages/sifo-vue
[sifo-singleton]: https://github.com/alibaba/schema-plugin-flow/blob/master/packages/sifo-singleton
[GitHub 7]: https://github.com/alibaba/tofu.js#
[GitHub 8]: https://github.com/alibaba/Trescope#
[GitHub 9]: https://github.com/alibaba/online-test-platform
[GitHub 10]: https://github.com/alibaba/intelligent-test-platform
[GitHub 11]: https://github.com/alibaba/uirecorder#
[Selenium IDE]: http://docs.seleniumhq.org/projects/ide/
[GitHub 12]: https://github.com/alibaba/entrypoint-wrapper-webpack-plugin
[GitHub 13]: https://github.com/alibaba/anyproxy#
[GitHub 14]: https://github.com/alibaba/bindingx#
[GitHub 15]: https://github.com/alibaba/dimbin
[GitHub 16]: https://github.com/alibaba/plover
[koa]: http://koajs.com/
[GitHub 17]: https://github.com/alibaba/node-hbase-client#
[GitHub 18]: https://github.com/alibaba/tmallgenie-miniapp-api-demo
[GitHub 19]: https://github.com/alibaba/vanex#
[GitHub 20]: https://github.com/alibaba/dla-connector-for-tableau
[GitHub 21]: https://github.com/alibaba/nquery
[GitHub 22]: https://github.com/alibaba/JS-Memory-Analysor#js-memory-analysor
[GitHub 23]: https://github.com/alibaba/atom-js-debug#
[GitHub 24]: https://github.com/alibaba/form-render
[GitHub 25]: https://github.com/alibaba/pipcook
[-pipcook -]: https://zhuanlan.zhihu.com/p/98193356
[GitHub 26]: https://github.com/alibaba/dawn#
[Link 1]: https://alibaba.github.io/dawn/docs/
[GitHub 27]: https://github.com/alibaba/butterfly
[GitHub 28]: https://github.com/alibaba/rax
[Link 2]: https://rax.js.org/docs/guide/about
[Rax App]: https://github.com/alibaba/rax/tree/master/packages/rax-app
[Iceworks]: https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks
[Fusion]: https://fusion.design/
[GitHub 29]: https://github.com/alibaba/rax-map
[Link 3]: https://lbs.amap.com/api/javascript-api/summary
[GitHub 30]: https://github.com/alibaba/funcraft#
[Fun]: https://github.com/aliyun/fun
[GitHub 31]: https://github.com/alibaba/beidou
[Egg.js]: https://github.com/eggjs/egg
[beidou-cli]: https://blog.csdn.net/wz_coming/article/details/115299820
[GitHub 32]: https://github.com/alibaba/f2etest
[Link 4]: https://www.yuque.com/artist/f2etest
[Github Page]: https://alibaba.github.io/f2etest/build/#/artist/f2etest/intro
[F2etest-web]: https://blog.csdn.net/wz_coming/article/details/115306961
[GitHub 33]: https://github.com/alibaba/timeline
[GitHub 34]: https://github.com/alibaba/scalable-form-platform#
[Link 5]: https://scalable-form-platform.github.io/#/
[JSON Schema]: http://json-schema.org/
[ant-design]: https://github.com/ant-design/ant-design
[ant-design-mobile]: https://github.com/ant-design/ant-design-mobile
[GitHub 35]: https://github.com/ali-sdk
[ali-sdk]: https://blog.csdn.net/wz_coming/article/details/115323172