前言
1．关于前端架构
独立开发一个前端项目，或身为前端技术负责人，编写代码时，总得多一分考虑。不同的场景、不同的时间、不同的角色，考虑的东西也是不同的。在多种因素的共同作用下，我们往往找不到最好的方案，只能找到最合适的方案。于是，我们需要从几个不适合的方案里选出最合适的一个，换句话说，就是从不太差的中选出最好的那个。“最合适”，便是这样相比较出来的。
过去，当人们讨论架构时，往往指的是后端架构。对于只使用后端API的前端来看，后端看上去像只做CRUD（增加（Create）、读取查询（Retrieve）、更新（Update）、删除（Delete））。然而，后端并不像看上去那么简单。从架构层面考虑，后端是要实现高并发和高可用的。在多数情况下，数据库是后端最大的瓶颈，存储的时候要考虑原子性、一致性、隔离性和持久性，使用的时候要考虑通过分表、存储、主从同步来提高性能和并发量，在这个过程中还要考虑备份、迁移、查询速度、效率等问题。此外，在代码实现上还有一系列的复杂问题：使用消息队列来解耦依赖，使用微服务来拆分单体应用……
架构，在前端会更复杂——涉及领域更广。前端在实现的过程中，除了考虑代码的可用性、性能、模型构建、组件复用等问题，还有前端特有的平台设定、浏览器兼容、交互设计、用户体验等相关的问题。而在“大前端”的背景之下，还需要深入移动端设计、桌面应用、物联网等相关的领域。
后端的发展比较稳定，更注重代码实现。而前端的发展比后端晚了好多年。大概从Google Map在2005年使用了大量的Ajax之后，人们才意识到原来前端还可以这么做。随后，产生了单页面应用，并诞生了一个又一个的前端应用，直至出于解耦的目的，前后端也开始分离了。
Web前端应用越来越复杂，使得架构在前端设计与开发也越来越受关注。规范、原则、模式、架构，是我们在前端架构中需要关注的内容。
2．本书结构
本书从结构上分为11个章节，除第9章、第10章存在一定的依赖性外，每一章都可以独立阅读而不受影响。
第1章 前端架构。介绍什么是架构、如何进行架构设计，以及相应的架构设计原则。同时，还介绍了前端架构的发展历史，以及如何通过层次设计来设计前端架构。
第2章 项目中的技术架构实施。介绍软件开发过程与架构的关系是怎样的，如何正确地实施架构，以及如何在过程中提升团队的能力。
第3章 架构基础：工作流设计。从代码的角度出发，展示前端架构的基础内容：基础规范、文档化、通过流程化提高代码质量和测试策略。
第4章 架构基础：设计构建流。从构建工具（webpack、Gulp、Grunt等）入手，讲述前端应用的构建流程、如何设计构建流、持续交付的构建等，它们用于构建完整的前端应用。
第5章 架构设计：多页面应用。介绍如何开发传统的多页面应用，并结合前端框架的知识体系，例如模板与模板引擎、双向绑定、前端路由等，讲解如何使用合适的技术栈开发多页面应用。
第6章 架构设计：单页面应用。关注如何开发单页面应用，相关的内容有前端MV*原理、前端应用如何选型、前端应用如何启动及服务端如何渲染。
第7章 架构设计：组件化架构。讲述组件化架构及其三种不同的展现形式：基础的风格指南、用于重用的模式库，以及进阶的设计系统。
第8章 架构设计：前后端分离架构。主要关注前后端分离及其API管理，介绍了不同的API管理模式、前后端独立的模拟API服务MockServer，以及服务于前端的后端（BFF）。
第9章 架构设计：微前端架构。包括6种微前端的介绍，从经典的路由分发式到多框架运行的前端微服务化等。并介绍如何划分、设计微前端应用，以及“微”害架构的相关概念。
第10章 微前端实战。以实战的方式，对第9章中介绍的6种微前端方案进行实践。
第11章 架构演进：演进式架构。介绍5 种架构演进的方式：更新、迁移、重构、重写、重新架构，以帮助开发人员更好地设计演进式架构。
3．本书目标
本书的目标是带领读者探索前端架构世界。我们将关注于解决有关前端应用的基础架构问题：
● 如何快速启动一个项目？
● 如何在组织内有效地共享代码、组件库、函数库等？
● 如何提升项目的代码质量？
● 项目的文档化采用什么策略？
● 采用怎样的策略进行代码测试？
……
本书还将介绍，在进行更高级的架构设计时，需要考虑的诸多因素：
● 应用的哪些部分可以在其他应用中快速重用？
● 应用内的组件采用怎样的通信机制？
● 是否通过拆分应用来降低复杂度？
● 如何对架构进行演进，以降低开发、维护成本？
● 如何让多个团队高效地进行并行开发？能否将不同应用、项目的代码隔离开来，而不是所有的人工作在一个代码库上？
……
此外，这并不是一本纯理论性书籍。书中配套了大量的相关实践代码，它们可以帮助读者更好地理解架构的实践。
4 代码
本书相关的代码都可以从GitHub上下载：https://github.com/phodal/aofe.code。这些代码遵循MIT开源协议，读者可以将这些代码用在学习、商业等用途的项目中，而不需要笔者同意。同时，笔者也不对这些代码的衍生代码负责。
5 遇到问题
在遇到问题时，欢迎随时与笔者取得联系。遇到代码问题时，建议直接在GitHub上创建一个相关的issue，以便帮助其他读者解决同样的问题。
遇到内容不清楚、代码相关等问题时，可以通过下面的方式联系笔者：
（1）GitHub上的相关项目参与讨论：https://github.com/phodal/aofe.code。
（2）知乎、微博：[@phodal]（http://weibo.com/phodal）。
（3）邮件：h@phodal.com。
（4）微信公众号：phodal-weixin。
你也可以在知乎、SegmentFault网站上进行提问，并@phodal来帮助你解决问题。
6．致谢
写一本书，初期靠的是激情，中后期靠的是耐心。编程亦如此，年少的时候，笔者进入这个行业靠的是比赛，长大后靠的是好奇心。17年过去了，笔者仍然想着不断地提升自己，因为编程领域有太多的新事物值得我们去探索。
感谢电子工业出版社博文视点的支持。
感谢女朋友@花仲马，在写作期间给予笔者的支持——笔者才能在下班之后，腾出大量的时间用于写作、编程及设计。
编码的乐趣在于创建“轮子”，在撰写本书相关内容的时候，笔者也编写了一个专用的Markdown编辑器Phodit（https://www.phodit.com/）。