首发于公众号 前端从进阶到入院，欢迎关注。
Hi，我是 ssh，今天带来一篇关于中型应用中需要什么、不需要什么的思考，避免过度设计，把精力放在最重要的技术功能中，才是你成功带领项目的关键：Stop Over-Engineering your Medium Size Front-End Application
开发一个小型应用很容易。然而，开发一个大型应用则非常困难。中型应用开发正处于这两者之间，是一个较少被关注的领域。那么，在不过度设计的情况下，编写可维护代码的最佳实践是什么呢？让我们探讨一下哪些流行的技术点可能对中型应用有益，评估一下它们是会对应用有益，还是会带来更多问题。
TypeScript
- 需要 ✅
现在是 2023 年，没任何借口在你的开发工作流中不使用 TypeScript。所有顶级前端框架都几乎推荐了它，而且易于接入使用。
TypeScript 是 JavaScript 的一个超集，添加了类型注解、接口等特性，可以编写可维护和可扩展的代码。它可以帮我们在开发过程尽早捕获类型错误，随着你的应用的增长，可以更容易重构代码。
10 Best TypeScript Courses for Beginners to Learn in 2023
状态管理
- 需要 ✅
对于任何中等规模的前端应用来说，状态管理都是需要考虑的重要因素。随着你的应用复杂性的增长，管理状态变得越来越困难。有许多库和框架可用于帮助解决这个问题，例如 Redux、MobX、Vuex 和 Pinia。这些工具可以帮助你维护一个一致的应用状态，并可以更容易地添加新功能。但是，要注意全局状态会产生耦合，你应该强烈考虑将 store 拆分成多个模块。另外，避免把一切东西都塞在里面导致冗余滥用，比如组件内部状态。
Feature Flag
- 需要 ✅
Feature Flag，也称为 Feature Toggle，允许我们在运行时切换代码库中的特定功能，而无需重新部署。这是一项黑科技，可以帮助我们在发布新功能的时候非常简单的执行 A/B 测试，高效管理开发和部署过程。可以带来更好的灵活性、更快的发布速度、减少与部署新功能有关的风险。有各种库和工具可用于在不同的语言和框架中实现 Feature Flag。
测试
- 要不要都行 ❓
测试是任何应用开发过程中必不可少的部分。单元测试、集成测试和端到端测试是比较常见的测试手段，长期来看节省时间和提高代码质量。总体上来说，易于测试的代码是更好的代码，并且在开发早期阶段创建测试用例，可以确保应用的 Bug 比较少，新人加入时更易上手。
另一方面，在大规模应用中，你可能会遇到中小型代码库中没必要存在的许多测试类型。比如突变测试（Mutation test）、负载测试、压力测试、性能测试、设计稿还原测试、快照测试等。
在中型应用中，重要的是在编写足够的测试以确保稳定性和不过度设计测试用例之间找到平衡。应该主要集中在创建充分的单元和集成测试来覆盖应用。
CI/CD
- 需要 ✅
现代软件开发中另一个不可或缺的部分是持续集成和交付。通过 CI/CD，你可以把构建、测试和部署过程自动化，节省时间、减少失误。一个良好的 CI/CD 工具可以提高开发过程的效率，并确保你的应用始终准备好部署。
16 Best tools to Design your CICD Engine ⚙️ 🚀
领域驱动设计 DDD
- 不要 ⛔️
领域驱动设计是一种软件开发方法，它强调对核心业务领域建模，建立开发人员之间的通用语言，并根据领域的复杂性设计软件组件。尽管领域驱动设计在具有复杂业务逻辑和多个团队协作的大规模应用中非常有用，但对于中型应用来说可能就是过度设计了。
对于中型应用，更简单的架构和关注整洁、模块化的代码通常就足够确保可维护性和可扩展性了。领域驱动设计可能会增加不必要的开销和复杂性，对项目没有显著的好处。考虑采用更简单的架构模式和实践，以促进代码组织、关注点分离和可重用性。
六边形架构
- 不要 ⛔️
六边形架构，也称为端口------适配器架构，是另一种架构模式，目的是在应用的核心业务逻辑与其外部依赖(如数据库、API 和 UI)之间创建清晰的分离。这种分离带来更好的灵活性、可测试性和可维护性。
与 DDD 类似，在具有复杂业务逻辑和众多外部依赖项的大型应用中实施六边形架构可能是有益的，但对于中型应用来说肯定是过度设计的。
微前端
- 不要 ⛔️
微前端是一种流行的架构模式，它根据功能或领域将大型应用拆分为较小的独立应用。这些更小的应用可以独立开发、测试和部署，允许更大的可扩展性和灵活性。
然而，对于中型应用来说，引入微前端就没必要了，增加复杂性和开销，超过了其带来的好处。在单体架构适当的使用组件组合，对于大多数中型应用更合适。如果未来有需要，可以再考虑迁移到微前端。
CDN
- 需要 ✅
使用 CDN 是通过缓存内容并从离终端用户更近的服务器提供内容来提高应用性能和可靠性的一种快速、简单且具有成本效益的方法。
Adding and Leveraging a CDN on Your Website
代码规范检查
- 需要 ✅
代码规范检查可以检测潜在错误、不一致性和偏离代码标准的情况。这是维护代码质量、尽早发现问题并提高可读性和可维护性的一种简单快速的方式。
Top 10 Front-end Linting Tools for Web Development
可观察性
- 需要 ✅
通过日志记录、指标收集和分布式跟踪等手段，可以轻松监控和排查应用的性能和运行状况。这对中型应用来说是必要的，可以节省大量时间和资金。
可访问性
- 需要 ✅
确保应用对所有用户都可访问，包括残疾人士，不仅是正确的事情，在某些国家也是法律要求。作为前端工程师，我们有责任创建可访问的网站。
设计系统 Design system
- 不要 ⛔️
设计系统是可重用组件、指南和原则的集合，用于在多个应用或平台上设计一致的用户界面。对于具有多个产品和团队的大型组织，使用设计系统可以带来巨大收益，但对于中型应用来说是没必要的。
与其投入时间和资源创建一个完整的设计系统，不如根据需求去灵活配置一个现有的组件库，并在应用内建立一组指南和可重用组件，以维护一致性并提高开发效率。
总结
过度设计是一切问题的根源。当谈到中型应用开发时，我们大多数人都会陷入一些过度设计的陷阱。一些工具和技术至关重要，而另一些则不值得投资，重要的是要建立和维护一致的编码风格，使用自动化防止生产环境带上 bug，并将技术债尽量保持在低水平。
首发于公众号 前端从进阶到入院，作者 ssh，工作 6 年+，阿里云、字节跳动 Web infra 一线拼杀出来的资深前端工程师 + 面试官，非常熟悉大厂的面试套路，Vue、React 以及前端工程化领域深入浅出的文章帮助无数人进入了大厂，关注后回复「指南」，获取高级前端、算法学习路线，是我自己一路走来的实践。