打造可规模化前端应用的 6 个原则

本篇最早收录于《ExplainThis 全端双周报》第 6 期

Vercel 现任 CTO (同时是前 Google 首席工程师) Malte Ubl 先前给了一个《Principles for Scaling Frontend Application Development》讲座，谈前端应用规模化的六个原则。

排除障碍 (Tear down the barriers)：

在规模化的过程中，会遇到多个团队要共用元件的情境。过去可能用 NPM 来管理共用的元件，但这种方式不仅麻烦且难管理。Malte 的建议是采用 monorepo，可以让共享的阻碍变低

让删除代码变简单 (Make it easy to delete code)：

大型代码库很长会变难以维护的原因在于，新接手的人不敢删掉一些没有在用的代码，因为担心影响到其他有关连的代码。要缓解这问题，Malte 推荐尽可能用共置的形式，例如用 TailwindCSS 会把 CSS 跟元件写一起，这样要删就能确保相关的东西会一并处理掉，不担心删了某个 CSS 结果影响到其他元件。

渐进式迁移 (Migrate incrementally)：

一次行大规模迁移往往容易导致迁移失败，而且可能会遇到发现某个错误，整个大规模迁移都要回滚的问题。逐步的迁移可能会因为时间拉长而在过程中被质疑迁移成效，面对这状况要尽早用范例来证明迁移是有价值的。

永远变更好就不会变更差 (Always get better, never get worse)：

要维持代码的品质，可以引入一些工具，例如 Linting 工具。越早引入工具，会让未来写的新代码，越早被检查，同时让引入工具的价值提高。

拥抱缺乏知识 (Embrace lack of knowledge)：

新加入团队的人，对于大型代码库一定会缺少相关的背景脉络，作为团队领导人要做的是接受这个事实，并打造一个让人即使有缺乏的背景知识，仍能做对事的系统。前一点提到的 Linting 工具就是一种方式，新加入的人不用有代码写法的背景脉络，但如果有不符团队的写法，系统中会有机制来自动提醒。

减少系统复杂度 (Eliminate systematic complexity)：

在 Google 这类的大厂很常会有版本偏差 (version skew) 的问题，例如后端做了某个改动，但前端还没有更新相对应的改动，导致两者之间有偏差。这种问题不是单一元件的问题，而是需要系统性的解决。举例来说设计机制，确保前端永远会请求到相对应版本的后端。