帶你入門前端工程（一）：技術選型

技術選型應該對很多程序員都不陌生了，無論是大到技術框架、編程語言，還是小到工具庫的選擇，都屬于技術選型的范圍。個人認為技術選型應該按照以下四個指標進行選擇：

1. 可控性
2. 穩定性
3. 適用性
4. 易用性

由于沒有統一的叫法，所以以上四個指標的名稱是我自己定的。下面就讓我們一起來深入了解一下如何進行技術選型吧。

可控性

可控性是技術選型中非常重要的一個指標?？煽?，就是指如果這門技術因為 BUG 對項目造成了影響，團隊中有人能夠解決它，而不是等待官方修復。作為技術團隊的負責人，一定要是能夠兜底的那個人。如果團隊解決不了，你必須能夠解決。

例如一些公司內部獨有的由于“個性化”需求產生的各種魔改版 Vue、React，就完美體現了可控性。

穩定性

穩定性，表示一門技術更新迭代比較穩定，不會有特別大的修改，比較靠譜。即使有，也很容易做到向后兼容（遷移簡單、成本?。?。

做為一名程序員，我想大家都有過這種想法。希望自己在做項目時能用上最新、最熱門的技術，這樣就可以一邊工作一邊學習了?？墒抢硐牒苊篮?，現實卻是骨感的。新技術往往意味著不確定性，很有可能一步一坑。所以不建議在核心項目中使用新技術。

使用成熟穩定的技術，意味著你的項目比較安全。在這一點上有兩個很典型的反例，那就是 Angular 和 python。例如 python2 升級到 python3，除了語法、API 不兼容之外，python3 的各個版本之間也有差異，直到現在才逐漸穩定下來。

從穩定性上來看，該如何進行技術造型呢？可以根據以下四點來進行選擇：

1. 社區是否活躍、配套插件是否豐富。
2. 是否經常維護，可以通過 git commit 查看。
3. 官方文檔是否齊全。
4. 更新是穩定、小步的迭代，而不是非常激進的更新。

剛才說到不建議在核心項目中使用新技術，但為了團隊成員自身的發展抑或為了其他原因，是可以嘗試一下新技術的。但一定要在邊緣項目或者小項目上進行嘗試，嘗試完如果發現這門新技術非常適合你們的項目，那就可以進一步考慮是否在核心項目中使用了。

適用性

適用性，是指需要根據業務場景和團隊成員來選擇技術。

業務場景

生命周期

從項目的生命周期來看，并不是所有的項目都需要做到滴水不漏的。例如節假日特定的活動頁面，生命周期只有一兩天。這種頁面就算用 JQuery 寫也是可以的，唯一的要求就是快。

與之相反的是，公司需要長期維護的核心項目。它們需要使用成熟穩定的技術棧，在開發語言上也要使用 TypeScript 而不是 JavaScript。

兼容性

由于項目必須在各種各樣的設備上運行，所以兼容性也是一個需要考慮的點。

web 項目需要考慮不同瀏覽器的兼容性，app 需要考慮 IOS 和 Android 的兼容性。除了必須保證不能有死機、白屏、卡頓等明顯 BUG 外，樣式也需要盡量保持一致。

團隊成員

團隊成員不一定所有人都使用相同的技術棧，在這一點上需要權衡大家的長短處進行選擇。

但我建議盡量將團隊成員的權重放到比較低的位置，選擇約束性比較強的技術是一個更好的選擇（如果團隊成員不會，就讓他學）。要用長遠的眼光來為團隊考慮，太過自由的技術，往往會造成災難。例如使用 TypeScript 已經被很多大公司和開源項目證明過是一個更好的選擇。

易用性

易用性，顧名思義就是這門技術好不好上手，容不容易理解。如果兩門技術各方面指標及應用場景差不多，易用性強的將成為贏家。

最典型的例子就是 Angular 和 Vue。Angular 學習曲線陡峭，需要比較長的學習時間；而 Vue 在熟練掌握 JavaScript 的情況下，看文檔一兩天就能上手干活。

從 Google、百度的趨勢圖就能看出來，它們在國內的受歡迎程度有相當大的差別。

易用性，決定了你的團隊好不好招人，這一點對小公司和不在一線城市的公司來說非常重要。我在天津（二線城市）工作快 4 年了，招前端的基本上每個公司都要求會 Vue，而要求會 Angular 的基本沒有。

小結

如果同時綜合以上 4 點來考慮，該如何做技術選型呢？我建議按照以下順序來做選擇：

1. 必須可控。
2. 核心項目必須使用成熟穩定、可靠的技術棧，邊緣小項目可以使用新技術給團隊成員練手或者踩坑。
3. 在第 2 點的基礎上，再按適用性做選擇。
4. 在第 3 點的基礎上，再按易用性做選擇。

為了幫助大家理解，我畫了一個流程圖：

雖然說前端目前只有三大框架可以選擇，但技術永遠是在發展的，框架也是在不斷的更新迭代。學會如何進行技術選型，則不管當下流行的是什么技術，都可以減少你在進行技術選型時可能會犯的失誤。

參考資料

• 技術選型指南

帶你入門前端工程 全文目錄：

1. 技術選型：如何進行技術選型？
2. 統一規范：如何制訂規范并利用工具保證規范被嚴格執行？
3. 前端組件化：什么是模塊化、組件化？
4. 測試：如何寫單元測試和 E2E（端到端） 測試？
5. 構建工具：構建工具有哪些？都有哪些功能和優勢？
6. 自動化部署：如何利用 Jenkins、Github Actions 自動化部署項目？
7. 前端監控：講解前端監控原理及如何利用 sentry 對項目實行監控。
8. 性能優化（一）：如何檢測網站性能？有哪些實用的性能優化規則？
9. 性能優化（二）：如何檢測網站性能？有哪些實用的性能優化規則？
10. 重構：為什么做重構？重構有哪些手法？
11. 微服務：微服務是什么？如何搭建微服務項目？
12. Severless：Severless 是什么？如何使用 Severless？