過去三年使用前端框架的感受
作者：王力國
來源：https://zhuanlan.zhihu.com/p/194311058
Angularjs
背景：2016.10-2017.7，某云計(jì)算公司，客服云平臺(tái)
Angularjs 是我參加工作之初接觸的第一個(gè)前端框架(大概是 16 年底到 17 年中)，我想沒有人會(huì)否認(rèn) Angularjs 在前端框架方面所作出的貢獻(xiàn)，它所提倡的聲明式 UI 在后來變成了前端開發(fā)的主流。但是它又讓我感覺有些矛盾，使用它我確實(shí)不再需要直接操作 Dom 就可以編寫出優(yōu)美的用戶界面，但是我卻花了更多的心思去研究這個(gè)框架本身，我需要搞清楚 scope 的區(qū)別，也需要搞懂為什么寫定時(shí)器需要使用 $timeout...
現(xiàn)在回過頭來看，2016 年底到 2017 年初這是一個(gè)非常有意思的時(shí)期，因?yàn)樵谶@段時(shí)間里，Angular 和 Vue 都發(fā)布了 2.x 版本，而在當(dāng)時(shí)，從 Angularjs 升級(jí)到 Angular 和升級(jí)到 Vue2 成本是相當(dāng)?shù)?，如果是你來做技術(shù)發(fā)展趨勢(shì)的預(yù)判你會(huì)如何判斷？
我們的選擇是大概花半年時(shí)間將公司所有長期維護(hù)的存量代碼全部遷移到 Vue2，還構(gòu)建了自己的組件庫，主要基于幾個(gè)考慮：
Angular 的不兼容更新和較大升級(jí)成本讓人感到沮喪 Vue2 在國內(nèi)開始爆發(fā)式增長，覺得學(xué)習(xí)成本遠(yuǎn)低于 Angular Vue2 的性能幾乎可以完勝當(dāng)時(shí)的 Angular
ok，畢竟 Angularjs 已經(jīng)落伍了，pass...
Vue
背景：2017.7-2019.2，某云計(jì)算公司，容器云平臺(tái)
我當(dāng)時(shí)所在的團(tuán)隊(duì)負(fù)責(zé)維護(hù)公司最大的云計(jì)算產(chǎn)品，業(yè)務(wù)邏輯也較為復(fù)雜，Vue2 配套的 Vuex 很難滿足我們的需求，于是我們選擇 Rxjs 來構(gòu)建數(shù)據(jù)層。后來維護(hù)的同學(xué)越來越多，團(tuán)隊(duì)協(xié)作問題就變得很突出，對(duì)類型的需求變得越來越明顯，我們不得不考慮如何接入 TypeScript，很遺憾我們很快就失敗了，這源于 Vue2 本身設(shè)計(jì)是比較靈活的，它允許各種方式(mixin，extend，prototype...)往組件實(shí)例上增加屬性方法，這讓類型推斷變得很災(zāi)難。再到后面我們又遇到了在 Angularjs 時(shí)期同樣的各種性能問題，我們最終發(fā)現(xiàn)原來性能瓶頸大部分情況下不是框架的問題，而是取決于工程師的技術(shù)功底。
兜兜轉(zhuǎn)轉(zhuǎn)到最后發(fā)現(xiàn) Vue2 + TypeScript + Rxjs 不就是 Angular 的閹割版？不過即使這段 Vue2 使用經(jīng)歷并不算愉快，我仍然認(rèn)為 Vue2 是一個(gè)非常成功的框架，它讓我們?cè)诤芏虝r(shí)間內(nèi)完成了遷移。
順便說說 Vue3：
實(shí)際上我一直在關(guān)注 Vue3 的進(jìn)展，但 Vue3 的設(shè)計(jì)目標(biāo)大部分我都不是很感冒，我只關(guān)心是否有某些新特性可以讓我的應(yīng)用更健壯更穩(wěn)定，所以唯一讓我感到開心的是它通過使用 TypeScript 重寫框架實(shí)現(xiàn)了對(duì) TypeScript 非常友好的支持。
但同時(shí)又讓我有一些擔(dān)憂就是撤銷 Class API 并引入 Composition API，首先我非常認(rèn)同在前端組件開發(fā)里“組合優(yōu)于繼承”，但我真的很難接受講所有組件邏輯揉進(jìn)一個(gè) setup 函數(shù)，這可能會(huì)讓代碼可讀性變得很差，也是基于這個(gè)原因我在后面編寫 React 組件時(shí)候，只有在組件足夠簡單的時(shí)候我才會(huì)使用 Function Component 來代替 Class Component，我覺得 Class Component 很大優(yōu)勢(shì)就是他可以把你的代碼整理的井井有條(當(dāng)然 Composition 亦可，只不過需要你有更好的功底)。當(dāng)然拿 Vue3 的 Composition API 和 React 的 Hooks API 相比可能不太合適，Vue3 顯然在設(shè)計(jì)上是有優(yōu)勢(shì)的。
不過不管怎么樣，確實(shí)看起來 Vue3 要比 Vue2 要好很多，這讓我更加愿意在之后的技術(shù)選型里著重考慮 Vue3。
React
背景：2019.2-至今，某人工智能公司，低代碼開發(fā)平臺(tái)
我在第二份工作之前我從未用過 React，實(shí)際上使用 React 是一個(gè)非常隨意的選擇，我在入職新公司之后負(fù)責(zé)啟動(dòng)一個(gè)新產(chǎn)品，這個(gè)項(xiàng)目是一個(gè)低代碼開發(fā)平臺(tái)(兩個(gè)桌面應(yīng)用，一個(gè)Web管理后臺(tái))，而當(dāng)時(shí)公司里的前端技術(shù)棧只有 Angular 恰巧我自己又沒用過，于是我問了另一位同事的想法：
···
我：hi，兄弟，我們要做一個(gè)低代碼開發(fā)平臺(tái)，我們現(xiàn)在只有 Angular，但我不是很熟悉，Vue 和 React 你想用哪個(gè)？
同事：Vue 用太久了，要不一起學(xué)學(xué)使用 React？
我：可以啊，那就 React + Electron
···
實(shí)際上現(xiàn)在回過頭來看，這是一個(gè)非常隨意，但是卻重要而正確的選擇，在一個(gè)靈活性很高需要高速迭代的產(chǎn)品里，使用 React 是非常合適的，我們?cè)谳^短的時(shí)間里實(shí)現(xiàn)了非常復(fù)雜的拖拽模塊，虛擬列表，動(dòng)態(tài)表單，也封裝了 Hooks 庫....最終我們高質(zhì)量交付了產(chǎn)品，大概十萬行 TS 代碼。
但選擇 React 也不是十分完美，不得不承認(rèn)在這個(gè)過程中我浪費(fèi)了很多時(shí)間在配套技術(shù)選型和項(xiàng)目配置優(yōu)化上，從 ES6 到 TypeScript，從 Redux 到 Mobx，到 Webpack 的各種優(yōu)化...
雖然我深度使用過 React 的幾乎所有 API，也用它構(gòu)建過非常大型的商業(yè)軟件，但我至今沒有完整閱讀過 Redux 和 React-Router 文檔，他們實(shí)在是太多了，就一個(gè) Router 而言，它有單獨(dú)使用的文檔，有 Hooks 用法的文檔，有結(jié)合 Redux 使用的用法...我覺得它提供了太多選擇，我不知道這對(duì)不對(duì)，但我不是很喜歡。
另外選擇 React 你基本上就要忍受大量的模版代碼，不僅僅是狀態(tài)管理庫之類的模版代碼，還要接受因?yàn)?React 本身 API 缺乏導(dǎo)致的大量模板代碼，比如最常見的“雙向綁定”
class?MyInput?extends?React.Component?{
??constructor(props)?{
????super(props);
????this.state?=?{value:?''};
??}
??handleChange?=?(event)?=>?{
????this.setState({value:?event.target.value});
??}
??render()?{
????return?(
???????<input?type="text"?value={this.state.value}?onChange={this.handleChange}?/>
????);
??}
}
當(dāng)然社區(qū)有很多庫可以繞過或者解決這個(gè)問題，但這就又回到了上面提到的一個(gè)問題就是選擇太多了，而我很難有把握每一次都選對(duì)，我可不想每天都在重構(gòu)代碼。不過你本身就很喜歡折騰的話，那這可能就是優(yōu)勢(shì)了。
我目前的感受是，React 在 Vue3 面前似乎沒有什么比較大的優(yōu)勢(shì)？
Angular
背景：2019.2-至今，某人工智能公司，后臺(tái)管理系統(tǒng)
在上面說的這個(gè)產(chǎn)品里有一部分是后臺(tái)管理模塊，因?yàn)楣局饕夹g(shù)棧是 Angular，我就自然而然接觸到了 Angular，但我個(gè)人之前一直對(duì) Angular 的印象不是太好，我一直給它打著諸如“臃腫”“喜歡破壞性更新”“很難”之類的標(biāo)簽，直到我深度使用 Angular(最近使用 Angular9) 之后，我真的被這個(gè)框架所徹底折服，ng-cli 非常強(qiáng)大加上官方提供各種解決方案(HttpClient，Router，Rxjs，CDK，懶加載)都讓我可以將精力更專注的放在業(yè)務(wù)開發(fā)上，而不是無窮無盡的技術(shù)選型和改進(jìn)上。
Angular 給我的感覺，就像是一個(gè)非常高級(jí)的大師給了我一個(gè)神器可以輕松編寫出可維護(hù)性強(qiáng)的代碼，并且它時(shí)不時(shí)就過來告訴我更新一下這個(gè)神器的版本，然后你不用額外學(xué)習(xí)任何東西，你就可以獲得一個(gè)更強(qiáng)的神器。但這有一個(gè)前提，就是你得絕對(duì)信任這個(gè)大師，因?yàn)楹芏鄷r(shí)候你可能搞不懂它是如何做到的，不過大師會(huì)告訴你，這個(gè)神器再交給你用之前它已經(jīng)在 Google 內(nèi)部進(jìn)行過無數(shù)次試驗(yàn)。
國內(nèi)很多人不使用 Angular 是覺得說它的學(xué)習(xí)成本太高，但是我可以負(fù)責(zé)任的說，絕對(duì)不會(huì)比 React 更高。不信你可以嘗試用三大框架去構(gòu)建一個(gè)商業(yè)應(yīng)用雛形(包括路由攔截，數(shù)據(jù)管理，登錄表單，發(fā)送請(qǐng)求，時(shí)間格式化，單元測(cè)試...)，看看哪個(gè)可以在最短時(shí)間內(nèi)完成，我想這個(gè)實(shí)驗(yàn)做完之后你也會(huì)愛上 Angular，我始終覺得在多人協(xié)作構(gòu)建大型中后臺(tái)應(yīng)用時(shí)使用 Angular 是真的非常合適。
另外覺得性能差，很臃腫....那就是 Angularjs 時(shí)代遺留下的偏見了，最好的方式就是嘗試去接觸它再做評(píng)價(jià)，畢竟 Angular 的好，只有用過才知道。
Svelte
實(shí)際上我還沒有在生產(chǎn)環(huán)境使用過 Svelte，我最近在嘗試學(xué)習(xí)這個(gè)框架，看看是否有業(yè)務(wù)場(chǎng)景可以落地，它確實(shí)很酷，尤其像我這種不喜歡 vdom 的人。先占個(gè)位置，之后有生產(chǎn)環(huán)境落地之后再來補(bǔ)充，另外我想知道國內(nèi)有公司在使用 Svelte 么，請(qǐng)告訴我？
說在最后，各個(gè)框架都有自己的優(yōu)勢(shì)，單看 Star/Issue 數(shù)很難看出差距，還是需要自己親自上手使用之后才會(huì)有真切的感受，真正去選擇框架時(shí)候還是需要結(jié)合實(shí)際場(chǎng)景再討論。
