作为“为大型前端项目”而设计的前端框架,Angular 其实有许多值得参考和学习的设计,本系列主要用于研究这些设计和功能的实现原理。本文作为背景和铺垫,先简单以我自身的了解来介绍一下 Angular 这个框架把吧。

# 前端框架

# 三大前端“框架”

虽然这几年前端的发展和变化十分迅猛,但被公认为前端“框架”的 Top3 位置却没有什么变化,依然是 Angular/React/Vue。

其中,React/Vue 专注于构建用户界面,在一定程度上来说为一个 Javascript 库;而 Angular 则提供了前端项目开发中较完整的解决方案。我们可以简单粗暴地这样认为:

Angular = React/Vue + 路由库(react-router/vue-router) + 状态管理(Redux/Flux/Mobx/Vuex) + 脚手架/构建(create-react-app/Vue CLI/Webpack) + ...

# 低热度的 Angular

作为三大前端框架之一,Angular 在国内的热度实在是低。个人认为原因包括:

  • AngularJS 到 Angular2 的断崖式升级,失去了很多开发者的信任
  • Angular 除了依赖注入(Provider/Service)、指令/管道等功能设计,在断崖升级时引入的 Typescript/Decorator/模块化组织/AOT/JIT 等新的能力,对当时大多数前端开发带来了不少的学习门槛
  • Angular 针对大型应用而引入的设计和功能,对于大多数前端应用来说无法物尽其用,反而增加了学习成本
  • Angular 提供了一整套完整的解决方案,反而不像 Vue/React 等库灵活,可以随意搭配其他的状态管理、构建库等(其实也是可以的,可能成本和门槛会高一些),显得笨重

由于以上原因,大家在选框架的时候常常讨论的是用 React 还是 Vue,虽然同样作为热门框架,Angular 似乎在无形中就被大家排除在外。使用 Angular 框架的人越少,相关的中文相关的文档和教程也会很少,大家对它的了解和认知都容易不够全面。

其实,很多人会问我喜欢 React 还是 Vue,我总会告诉他们我喜欢 Angular,他们也总会觉得很奇怪哈哈哈哈。实际上,AngularJS 是我最早接触的一个前端框架,我也曾经使用过断崖式升级的 Angular2,它们带给我的除了很多未知的知识和领域,还有拓宽了我对前端编程的一些认知。我想,喜欢 Angular,也可能是因为有一些缘分在内的原因叭~

# 我对 Angular 的理解

Angular2 的出现时间大概在 2017 年前后,那会 React 的函数式编程正开始受到很多人追捧,而 Vue 也开始进入大家的视野中。但 Angular2 带来的技术和设计很是前卫,以至于对很多人来说门槛太高。

但是,如今 2021 年了,我们再来回看一下,Angular 框架中使用到的很多技术和设计,都渐渐地被更多的人在使用了。

其中最火的便是 Typescript,显然,如今对大多数前端开发来说,Typescript 都是需要掌握的。在 Angular 之后,React、Vue 也都支持了 Typescript,Vue3 更是直接使用 Typescript 来重构了。

除此之外,模块化、AOT/JIT、依赖注入等设计,以及 Rxjs 、元数据(Reflect.metadata)的引入等,也被更多的产品和工具库使用。当然,这里并不是说这些产品和工具是参考了 Angular。Angular 中的这些设计理念,大多数也并不是由 Angular 第一个提出的,但 Angular 大概是第一个在前端框架中(甚至是在前端领域中)将它们毫无违和感地一起引入并使用的。

这样的趋势,我认为很大的原因是前端应用的规模在不断变大,这也是因为前端的技术栈在不断拓展,负责的领域也逐渐在扩大。前端应用慢慢地变得复杂,比如 VsCode 编辑器、在线文档编辑这些,项目本身的复杂度和规模都不小,而这样大型的项目里肯定需要往模块化组织的方向发展,那么想必各个模块间的依赖耦合会很严重,因此依赖注入便是一个很好的方式来管理,VsCode 便是这样做的。

当然,即使在未来,大型项目在所有前端项目中的占比肯定也不至于很高,但大型项目如何设计和管理这块领域对前端来说依然比较陌生。我们可以借助常见的后台系统架构设计来进行参考和反思,比如微服务、领域驱动设计、职责驱动设计等。但这些终究是设计思想,如何才能很好地落地,对前端开发都是不小的考验。

我接触过各式各样的项目,而当这些项目在面对项目的规模变大的时候,虽然新人的加入、每个人都按照自己的想法去开发,最终总会变得难以维护,历史债务十分严重。而 Angular 则是唯一一个能限制开发的自由发挥的,可以让经验不足和经验丰富的开发都写出一样易维护的代码。

回归主题,既然 Angular 提供了大型前端应用的完整解决方案,那么我们不妨多些对它的学习和了解,当我们真正遇到问题的时候,便多了一个可落地方案的参考,这也是为什么我们要不断汲取新知识和技术的原因。

# Angular 框架解读

源码阅读对很多人来说,都是一件挑战很大的事情,对我来说也一样。

虽然我有较多地阅读过 Vue 的源码(可参考《深入理解 Vue.js 实战》 (opens new window)这本书),但前提是我对这个框架有足够多的理解和使用经验,在尝试介绍和解说时,也更是倾向使用者的角度来进行。而对于 React,则是因为理解和使用经验的缺乏,未曾有机会深入地去了解它,但也有阅读过写得不错的源码解读(可参考《React 技术揭秘》 (opens new window)一书)。

对于阅读源码来说,最好的方式便是从已知的理解和认知中开始。阅读源码,并不是为了熟悉掌握源码本身,更是为了掌握其中的一些值得借鉴的思考方式和设计,因此我也尽可能减少代码占据的篇幅,使用自己理解后的方式来进行描述。

那么,后面我会从自己认为最值得参考和学习的地方开始,一点点学习其中的精华。以我当前有限的认知,大概会包括以下内容:

  • 依赖注入整体框架的设计
  • 组件设计与管理
  • Provider 与 Service 的设计
  • NgModule 模块化组织(多级/分层)的设计
  • 模板引擎/模板编译过程的整体设计
  • Zone 设计:提升计算速度
  • JIT/AOT 设计
  • 元数据设计:(Reflect.metadata)的引入和使用思考
  • 响应式编程:Rxjs 的引入和使用思考

在时隔 3 年之后再次接触 Angular,还是直接以阅读源码的方式来进行,对我来说是个不小的挑战。但这些年来,我也一直在尝试做各种不同的新的事情,如果因为觉得困难而放弃,那么这个天花板便是我自身,而不是什么“环境所迫”、“没有时间”这样的借口。或许我会写得很慢,但我依然希望自己能一点点去细细钻研,也希望至少以上的内容能最终掌握。

这是一个大工程,因为我写下这篇文章来给自己预热,也希望能打打气,更是尝试立下一个 FLAG 吧。

# 结束语

这是一篇从我个人的理解出发的文章,同样的这个系列也会以我一个人这样局限的角度来出发进行介绍。因此它们或许可能存在片面和局限的时候,但我希望即使是这样的内容,也能给你们带来一些思考和收获。

分享和交流,并不是为了各自的理由而争执,而是为了弥补自己看不到的一面,共同进步,不是吗?

部分文章中使用了一些网站的截图,如果涉及侵权,请告诉我删一下谢谢~
温馨提示喵