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

2023年12月30日

💎 加入 E+ 成長計畫 與超過 400+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

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) 的问题,例如后端做了某个改动,但前端还没有更新相对应的改动,导致两者之间有偏差。这种问题不是单一元件的问题,而是需要系统性的解决。举例来说设计机制,确保前端永远会请求到相对应版本的后端。

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們