Ant Motion

Ant Motion 是从蚂蚁金服的 Ant Design 中提炼出来的动效语言。它不仅仅是动效语言，同时也是一套 React 框架动效解决方案，提供了单项，组合动画，以及整套解决方案，帮助开发者更容易的在项目中使用动效。

• 增加体验舒适度： 让用户认知过程更为自然。

• **增加界面活力：**第一时间吸引注意力，突出重点。

• **描述层级关系：**体现元素之间的层级与空间关系。

• **提供反馈、明确意向：**助力交互体验。

地址：

https://motion.ant.design/index-cn

Ant Motion

多页面切换场景统一解决方案 UltraViewPager

================================

UltraViewPager 是阿里开源的一个封装多种特性的 ViewPager ，主要是为多页面切换场景提供统一解决方案。

UltraViewPager继承自RelativeLayout，将ViewPager和indicator置于其中，同时UltraViewPager提供了一些ViewPager常用方法的代理，这样在日常使用上保持和ViewPager无差异，如果需要调用ViewPager的所有方法，可通过getViewPager()方法拿到真正的ViewPager进行操作。

竖向滑动是通过在ViewPager的onInterceptTouchEvent和onTouchEvent中交换横竖向的event location，同时设置特殊PageTransformer实现，详见源码。

地址：

https://github.com/alibaba/UltraViewPager

模块化 UI 界面方案 Tangram UI

==========================

Tangram UI

Tangram，七巧板，几块简单的积木就能拼出大千世界。我们用Tangram来命名这套界面方案，也是希望他能像七巧板一样可以通过几块积木就搭出丰富多彩的界面。

特性：

• **跨平台支持：**已有Android&iOS支持，一份数据，多端渲染一致

• **面向业务：**流式布局，瀑布流布局，吸顶，浮标，轮播，内置布局可适应大多数场景，开放的API，易于拓展自己的布局和解析器

• **高性能：**高效的回收复用算法，可定制化的复用粒，适应复杂布局的场景，为丝滑般顺畅提供基础

• **动态组件：**通过 VirtualView，支持自定义 XML 动态创建组件视图

• **TAC：**配套的后端微服务设施，灵活构建 Tangram 业务所需的数据

地址：

http://tangram.pingguohe.net/

Tangram

自动化测试解决方案 Macaca

====================

Macaca

Macaca 是一套面向用户端软件的测试解决方案，提供了自动化驱动，环境配套，周边工具，集成方案，旨在解决终端上的测试、自动化、性能等方面的问题。

其有如下特点：

• **跨平台：**支持在移动端和PC端的Native, Hybrid, 移动端Web应用

• **支持真机：**支持真机和模拟器，以及大量样板示例

• **更加容易：**支持多种语言栈编写脚本，提供调试，元素查看器，数据Mock，录制回放等周边

• **提供CI方案：**提供持续集成方案及持续集成平台的私有部署方案

地址：

https://github.com/alibaba/macaca

Macaca

基于 React 的中后台应用解决方案 飞冰 ICE

==============================

Ice

飞冰(ICE) 是一套基于 React 的中后台应用解决方案，ICE 包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用。

面向设计者端，ICE 提供了 ICE Design 设计语言，来给 UI 界面提供专业的视觉指导。面向开发者端，ICE 提供了 Iceworks 工具，这是一个图形化界面的开发平台，它承载了 ICE 的物料体系和开发体验。

地址：

https://alibaba.github.io/ice/

Ice

HTML5 互动游戏引擎 Hilo

=====================

Hilo

Hilo 是阿里巴巴集团开发的一款HTML5跨终端游戏解决方案，ta可以帮助开发者快速创建HTML5游戏。

主要特性

• Hilo 支持多种模块范式的包装版本，包括AMD，CMD，COMMONJS，Standalone多种方式接入。另外，你可以根据需要新增和扩展模块和类型；

• 极精简的模块设计，完全面向对象；

• 多种渲染方式, 提供DOM，Canvas，Flash，WebGL等多种渲染方案（目前已经申请专利）；

• 全端浏览器的支持和高性能方案，独有的Flash渲染方案，即使在低版本IE浏览器下也可以跑起来“酷炫”游戏； DOM渲染方案能显著解决低性能手机浏览器遇到的性能问题；

• 物理引擎支持——Chipmunk，支持自扩展物理实现；骨骼动画支持——DragonBones，同时内建骨骼动画系统——Tahiti（目前内部使用）；

• 案例丰富，框架成熟，已经经历多届阿里巴巴双十一，年中大促互动营销活动考验；

地址：

https://github.com/hiloteam/Hilo

Hilo

JavaScript 模板引擎 Velocity.js

===============================

Velocity.js 是 velocity 模板语法的 JS 版本实现。Velocity 是基于Java 的模板引擎，广泛应用在阿里体系的各个子公司项目。Velocity 模板适用于存在大量模板使用的场景，支持各种复杂的逻辑运算，包含 基本数据类型、变量赋值和函数等功能。Velocity.js 支持 Node.js 和 浏览器环境。

地址：

https://github.com/shepherdwind/velocity.js

Velocity

非侵入式运行期 AOP 框架 Dexposed

===========================

Dexposed 是一个功能强大但非侵入性的运行时 AOP（面向方面编程）框架，用于 Android 应用程序开发，基于ROOT 社区著名开源的 Xposed 框架项目的工作。其改造剥离了 ROOT 部分，演化为服务于所在应用自身的 AOP 框架。它支撑了阿里大部分 App 的在线客户端 BugFix 和线上调试的能力。

地址：

https://github.com/alibaba/dexposed

Dexposed

自动化测试解决方案 UI Recorder

=========================

UI Recorder

UI Recorder 是一款零成本的整体自动化测试解决方案，一次自测等于多次测试，测一个浏览器等于测多个浏览器！

地址：

https://github.com/alibaba/uirecorder

UI Recorder

Android 应用热修复工具 AndFix

==========================

AndFix 是阿里巴巴开源的一个为 Android 应用提供热修复工具，帮助 Anroid 开发者能够及时修复应用的线上问题。Andfix 是 “Android hot-fix” 的缩写。

地址：

https://github.com/alibaba/AndFix

AndFix

基于 Node.js 的自动化持续集成 Reliable

================================

Reliable

Reliable 是分布式架构的持续集成系统，由Macaca 团队的成员开发。适用于集成构建、集成构建等场景。她是典型的主从结构，分为reliable-master 与 reliable-slave 两部分。

地址：

https://github.com/macacajs/reliable

Reliable

模拟数据生成器 Mock.js

===================

Mock

Mock.js 是阿里巴巴开源的一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

• 根据数据模板生成模拟数据

• 模拟 Ajax 请求，生成并返回模拟数据

• 基于 HTML 模板生成模拟数据。

地址：

https://github.com/nuysoft/Mock

React 应用的服务器渲染框架 Beidou

===========================

Beidou(北斗) 是阿里巴巴开源的一个 NodeJS & React 同构框架，基于Egg.js开发。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。