- 前端架构:从入门到微前端
- 黄峰达
- 1972字
- 2020-08-27 20:42:11
2.2 技术准备期:探索技术架构
这个阶段的业务与技术的优先级是,技术第一,业务第二。在这一个时期里,我们关注的三个点是:
◎ 架构设计,即设计系统的架构。
◎ 概念验证,验证先前设计的架构是否可行。
◎ 迭代0,搭建系统的基础设施。
这三点都是与强技术相关的内容,需要花费大量的时间。
2.2.1 架构设计
当开始一个新的项目时,我们便要做大量的技术准备工作——搜索相关的技术资料,评估相关的技术方案等。这些在第1章中介绍了,这里不再赘述。
2.2.2 概念验证:架构的原型证明
在完成架构的设计之后,我们需要从技术上证明它的可行性。这个可行性的阶段,称为概念验证(PoC):
概念验证(Proof of Concept,简称PoC)是对某些想法的一个较短而不完整的实现,以证明其可行性,示范其原理,其目的是验证一些概念或理论。概念验证,通常被认为是一个有里程碑意义的实现原理。[wiki_poc]
在这个概念验证阶段里,我们所实践的是对架构理论的探索。比如我们选择了微服务、微前端等新技术,又或者GraphQL等新框架,并且尝试在这个项目中使用。那么我们就需要去验证它,看看它是否能真正地被用上?
为此,我们需要使用这些新技术编写一个简单的“Hello, World! ”,将我们所设计的各个部分串联到一起,构建一个完整的、基础的系统。如果我们计划使用微前端技术结合React+Angular框架开发的应用,那么第一步便是将空白的React和Angular应用结合到一起。从概念上证明它是可行的,下一步才是将现有的应用进行整合。
当我们预先设想的技术和架构不能应用时,我们应该采用原有的系统架构,还是重新设计一个合理的架构,这是一种考验,在这个时候到底第一优先级是什么,是技术、业绩还是业务?然而不可避免的是,我们又得花费大量的时间在一个新的概念验证上。
因此,在尝试新的架构和设计之前,请务必先在业余时间有所实践,再拿到项目中使用,这也是笔者所推荐的模式。直接在项目中使用的弊端,便是在时间上的浪费。项目上每多一个人,这个浪费的成本就会扩大一些。笔者就曾经在项目上经历过这样的事件,我们花费了两三周的时间来证明四种不同的技术方案的优缺点。由于架构未定,其他成员也不能编写相应的业务代码,只能尝试练习相关的东西,搭建持续集成等,直到完成相应的架构证明。
在这个概念阶段,我们并不会进行业务代码的编写,只给出简单的架构相关示例。
2.2.3 迭代0:搭建完整环境
完成概念验证之后,就开始了迭代0,以完成项目配套的技术准备工作。
迭代0(Sprint 0),又名为I0(Iteration 0),从名称就可以发现它与敏捷软件开发的关系。当我们开始一个项目的时候,进入的是迭代1的开发,那么迭代0呢?我们可以将其视为在所有迭代之前的准备工作。尽管我们从概念上将迭代0与概念验证阶段划分开来,但是在这种定义之下,如果项目不复杂,那么概念验证阶段会被列入迭代0的工作范围中。而对于复杂的项目而言,概念验证阶段则会独立于迭代0。不过,在人力充足的情况下,会有一部分人进入与迭代0相关的工作。
在迭代0,我们所要做的基本事项有:
◎ 创建应用脚手架。
◎ 创建项目的代码库。
◎ 搭建持续集成、持续交付。
◎ 进行各种权限配置,如各种不同的环境账号准备、开发人员的账号配置等。
◎ 配置配套的工具,如代码审查、自动化原生应用上传等。
◎ 更细粒度的技术选型。
除了技术准备工作,迭代0还需要进行内部的技术培训——只是简单的技术培训,用于介绍系统的架构,开发注意事项等。当然,即使已经有了相应的培训,还需要准备基础的架构方面的文档,以及必要的一些规范。
此外,在概念验证阶段,我们编写的是粒度较粗的代码,并且为了追求效率和验证,可能有大量的Code Smell(代码坏味道),诸如注释的代码、未使用的代码、不经测试的代码,等等。我们还要进行部署的准备工作,尝试进行第一次测试环境的部署。
这个阶段结束的标志是:项目成员可以进行正常的项目开发,并且此时的开发方式和未来没有太大的区别。
2.2.4 示例项目代码:体现规范与原则
在大部分项目中,经验丰富的开发人员往往只是少数,有些经验丰富的开发人员会分配到重要的项目上,成为新团队的技术负责人,或者某个团队的骨干。因此,除了这些经验丰富的开发人员,往往还存在一定数量的缺少编程经验的程序员。对于这些“年轻”的程序员来说,需要有人能指点其编写代码,以提升团队的平均技术水平,使之能按时完成任务。
为了有针对性地规范代码,并帮助其他成员了解代码,一个相应的举措便是编写相应的项目示例代码。通过这些示例代码,可以展现好的编程模式、范式,将它们融入项目中。有了这样一个基本的雏形,哪怕是刚毕业的学生,也能照猫画虎地编写业务代码。
例如,对于前端页面来说,登录的功能,便是一个相对比较完整的示例。它涉及一系列与前端相关的内容:状态管理、网络请求、数据模式、表单提交、UI交互等。其中每一个小部分,几乎都是我们在第1章中提到的代码级架构。在日常编码中,对于这些基本的东西更要花费精力。稍有不慎,就会与我们最初设计的风格相去甚远。