2024年Web前端最全解密阿里前端技术体系，2024年最新面试官撕简历

2401_84411072

于 2024-05-11 15:21:06 发布

阅读量874

点赞数 22

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84411072/article/details/138717310

版权

程序员专栏收录该内容

215 篇文章 1 订阅

订阅专栏

对象篇

模块化编程-自研模块加载器

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

阿里巴巴集团一定是国内前端技术发展的高地，其完整经历了 PC 时代、移动时代和智能时代，具有非常繁杂的业务场景，同时沉淀开源了众多前端项目，因此非常值得学习借鉴。

蚂蚁金服体验科技

技术专栏：https://zhuanlan.zhihu.com/xtech

蚂蚁金服体验技术部，是阿里巴巴经济体内，一支以用户体验、大前端和创新产品为核心竞争力的年轻团队。「那些年的体验技术部」开源了 Ant Design、AntV、Egg.js、Umi 等一系列项目。

设计不只是好看，更关乎好用。体验科技就是技术与设计的融合，是服务与用户的连接。在前端技术上，不仅仅要实现页面的交互，更要通过产品、技术、设计的融合，实现好的用户体验。

蚂蚁金服体验科技提供了完整的前端解决方案：

淘系前端团队

技术博客：https://fed.taobao.org/

淘系前端团队是服务于淘宝、天猫、聚客宝等电商业务的前端团队，他们面临国内最复杂的电商系统，也需要面对大量的终端用户。在这个团队中孵化了许多开源项目，例如 Rax- 通用模板渲染引擎、飞冰 - 前端可视化搭建平台、imgcook- 前端智能化生成平台等等。

饿了么大前端团队

技术专栏：https://zhuanlan.zhihu.com/ElemeFE

饿了么大前端团队是一个集前端、iOS、Android、BFF 后端一起的技术研发团队，其最著名的是基于 Vue 的两个开源项目：

element：基于 Vue 的 PC 端的 UI 组件库。
mint-ui：基于 Vue 的移动端 UI 组件库。

同时还有各种基于 Vue 的封装组件库，例如 vue-amap 是一个高德地图组件，v-charts 是一个基于 Vue2.0 和 ECharts 封装的图表组件库。

闲鱼技术团队

技术博客：https://www.yuque.com/xytech

闲鱼技术团队过去一年在 Flutter 技术方向的沉淀非常丰富，目前已经大量采用 Flutter 于闲鱼 App 中，同时开源了若干 Flutter 生态相关的项目：

Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架，它特别适用于构建中大型的复杂应用。
FlutterBoost 是一个 Flutter 插件，它可以轻松地为现有原生应用程序提供 Flutter 混合集成方案。

基础设施

基础设施 依赖于阿里云的基础设施，提供 Serverless、AI、IoT、云计算、安全等基础能力。

Serverless 函数计算：阿里云提供了云函数计算能力，同时可以辅助与现有的 BaaS 能力，进行存储、数据库、通信的能力。

CDN：CDN 可以用于静态资源的存储，发放资源到用户就近的节点，极大地提高用户访问的速度体验。

移动测试平台：真机测试的云平台，帮助解决用户的真机兼容、性能等问题，提升用户体验。

应用实时监控服务 ARMS：一款应用性能管理产品，包含前端监控、应用监控和 Prometheus 监控三大子产品，能帮助你实现全栈式的性能监控和端到端的全链路追踪诊断。

Node.js 性能平台： 是面向中大型 Node.js 应用提供性能监控、安全提醒、故障排查、性能优化等服务的整体性解决方案。

前端服务层框架

BFF - Backend for Frontend

BFF 是目前一种前后端分离的常用研发模式，通常 BFF 作为胶水层，解决了终端对于数据多样性的问题，通过对后端微服务进行聚合，从而提供各种定制化的数据给到终端应用。

在 BFF 技术选型上，选用 Node 是为了技术栈的统一，从而可以让前端同学从前端 UI 实现到聚合层接口实现都通过 JavaScript 完成。这样服务端同学只需要按照领域设计原则暴露各个领域的标准化接口，其他部分前端同学可以通过灵活组合满足各种页面的数据服务需求，达到前后端的分离和研发效率提升。

前端服务层 基于 Node.js 和 Koa 实现了 Egg 框架，Egg.js 为企业级框架和应用而生，由 Egg.js 孕育出更多上层框架，帮助开发团队和开发人员降低开发和维护成本。Egg 提供了一个完善灵活的插件机制，并且奉行约定优于配置。在 Egg 上层，各个业务团队又各自封装了不同的服务层框架，例如蚂蚁 Chair、淘宝 Midway、UC Nut 等等。

BFF in Serverless

Serverless 是阿里内部一个非常重要的方向，目前阿里云已经提供云函数的能力，然后再基于现有的 BaaS 能力（通信、用户、存储、运维、通知），可以实现 BFF 层使用云函数来实现，从而大大减少了服务器资源的消耗，也极大地减少了前端开发同学对于服务器运维的要求。

前端应用层框架

TWA - Techless Web Apps

TWA 是期望能够实现技术无感化的应用，通过全栈研发框架，将前端客户端代码和服务端代码整合在一个代码仓库。通过一站式的研发运维平台，提供极简研发流程和自助式的运维体验，让研发更加关注业务实现，不用太关心“应用”、“构建”、“部署”、“流程”等细节。

前端应用框架 -Bigfish/Umi

Bigfish 是蚂蚁金服前端的开发框架，从上图中可以看到 Bigfish 是一个前端研发全流程的研发框架，涵盖设计师（设计师工具、资产市场、文档、培训）、开发者（部署、插件市场、基础开源框架），同时也包含外部服务（体验、监控等等）。

Umi 是一个可拔插企业级的 React 应用框架，它通过实现沉淀大量最佳实践，极大地实现了 React 应用框架的统一性，同时它也具备非常强的插件扩展能力。它有几大特点：

插件化：umi 的整个生命周期都是插件化的，甚至其内部实现就是由大量插件组成，比如 pwa、按需加载、一键切换 preact、一键兼容 ie9 等等，都是由插件实现。
开箱即用：你只需一个 umi 依赖就可启动开发，无需安装 react、preact、webpack、react-router、babel、jest 等等。
约定式路由：类 next.js 的约定式路由，无需再维护一份冗余的路由配置，支持权限、动态路由、嵌套路由等等。

前端 UI 组件库

阿里前端 UI 组件库包括：

Ant Design - 前端中后台 React UI 组件库。
Element - 前端中后台 Vue UI 组件库。
AntV - 数据可视化组件库。
…

Ant Design

Ant Design 服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

Ant Design 不仅仅是一套组件库，而且还是一种设计语言，基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

Ant Design 基于 React 框架，提供了总共 63 个 UI 组件，涵盖各种基本交互元素，例如按钮、布局、数据录入、数据展示等等。

Element

Element 是饿了么团队基于 Vue 打造的一套 UI 组件库，基于一致、反馈、效率、可控的设计原则。和 Ant Design 类似，它也提供了丰富的组件，并且提供了样式主题配置化以及国际化等功能。

Element 和 Ant Design 几乎已经成为中后台前端的标准 UI 组件库，往往根据不同的技术栈配合使用。Ant Design 往往配合 React 进行使用，而 Element 则会配合 Vue 进行使用。

AntV

AntV 3.0 已全新升级，主要包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑阿里集团内外 6000+ 业务系统。

AntV 作为数据可视化的组件库，从简单的线图到流程图，再到地理空间图应有尽有。下面给大家看几个例子：

跨平台

移动端跨平台、动态化始终是一个永恒不变的挑战，阿里巴巴作为电商平台也拥有众多 App，因此其在跨平台方面有非常丰富的尝试。首先就是基于 Vue 的 Weex 跨端解决方案，这是一个完全对标 React Native 的方案，在阿里淘系内部得到了大量实践。最近一年，闲鱼技术团队大量采用 Flutter，同时也沉淀了大量实践，开源了不少 Flutter 相关项目。