本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)。

今天是2018年夏天。我的老板阿德里安(Adrian)請(qǐng)我與加拿大一家大公司的首席技術(shù)官詹姆斯(James)一起進(jìn)行Skype通話。

在相互了解的同時(shí)，我發(fā)現(xiàn)詹姆斯是一個(gè)有雄心壯志的聰明人。他的愿景是將大規(guī)模的桌面WPF應(yīng)用程序遷移到云中的Web。

我喜歡他的友好態(tài)度，可以說出他渴望與我們合作。他已經(jīng)在印度擁有開發(fā)合作伙伴，但是他們?nèi)狈?gòu)建Web應(yīng)用程序的經(jīng)驗(yàn)。

我和Adrian在這種情況下遵循標(biāo)準(zhǔn)方法。我們還有幾個(gè)電話，然后我們開始發(fā)現(xiàn)階段，在此階段我們試圖把握全局并找到非功能性需求。這些是我們應(yīng)重點(diǎn)關(guān)注的要點(diǎn)：

一個(gè)大型應(yīng)用程序-超過220頁，其中大多數(shù)是維護(hù)屏幕，其中大約20%是高度定制的。

顯示大量數(shù)據(jù)，尤其是在具有各種功能的網(wǎng)格中：分組，列凍結(jié)，行擴(kuò)展，自定義列，即可為其命名。

模塊化架構(gòu)，允許多個(gè)團(tuán)隊(duì)同時(shí)處理項(xiàng)目。

多年項(xiàng)目。新功能將隨著時(shí)間的推移而增加。

不需要離線支持。

為新團(tuán)隊(duì)成員快速入門，特別是對(duì)使用舊桌面應(yīng)用程序的.NET開發(fā)人員而言。

作為一名架構(gòu)師，我的任務(wù)是創(chuàng)建一個(gè)技術(shù)提案，其中包含架構(gòu)細(xì)節(jié)，方法，路線圖，指南，最重要的是將要使用的技術(shù)棧。

James多次提到他想要一種面向未來的技術(shù)，他不贊成Angular，因?yàn)樵贏ngularJS被棄用之后，它的聲譽(yù)很差。

我已經(jīng)使用Angular和React成功地實(shí)現(xiàn)了一些中小型項(xiàng)目，因此我對(duì)其中的任何一個(gè)都沒有真正的興趣。我覺得任何一個(gè)都能勝任。

對(duì)于這個(gè)項(xiàng)目，我選擇React with Redux…兩年后我會(huì)后悔的。

我們指定了一個(gè)由三名開發(fā)人員組成的團(tuán)隊(duì)來進(jìn)行概念驗(yàn)證，兩個(gè)月后，它成功了。超級(jí)響應(yīng)的用戶界面，超快的構(gòu)建時(shí)間和高開發(fā)速度。每個(gè)人都很開心。

障礙1：.NET開發(fā)人員加入團(tuán)隊(duì)

經(jīng)過概念驗(yàn)證后，是時(shí)候讓客戶外包團(tuán)隊(duì)的開發(fā)人員加入了。我們還沒有開始知識(shí)共享會(huì)議，CTO給我發(fā)送了一封電子郵件，說：“嘿，拉茲萬。我們真的必須明天與我的外包團(tuán)隊(duì)見面。”

我們開會(huì)，技術(shù)負(fù)責(zé)人向我提出問題和解決方案：

“依賴注入在哪里?“不需要一個(gè)是什么意思?”這是一個(gè)：InversifyJS!

“功能組件?不不不。我們不喜歡他們。讓我們使用類組件!”

“為什么這些函數(shù)只是四處徘徊，為什么不將它們封裝在服務(wù)類中以使其靜態(tài)化?”

“ API的重試策略在哪里?讓我們使用PollyJS實(shí)現(xiàn)一個(gè)。”

“當(dāng)類名是PascalCase時(shí)，為什么文件名會(huì)變成破折號(hào)?它應(yīng)反映類名，因此從現(xiàn)在開始，我們將其命名為SomePageComponent.tsx。”

而且，最讓我煩惱的是：“如何使用Visual Studio而不是Visual Studio Code運(yùn)行它?”

對(duì)我來說很清楚他們想在React中使用.NET準(zhǔn)則和設(shè)計(jì)模式。我已經(jīng)多次看到這種情況發(fā)生-開發(fā)人員很難適應(yīng)新技術(shù)的工作方式。因此，我不害怕就為何這些是React的異常模式展開辯論。

但是在這種情況下，CTO支持他的團(tuán)隊(duì)，這很正常。在與團(tuán)隊(duì)合作多年的時(shí)候，他認(rèn)識(shí)我只有兩個(gè)月。我必須做出讓步，并同意他們的建議。

我剛剛意識(shí)到React不是Java或.NET開發(fā)人員友好的。由于類似的設(shè)計(jì)模式，在這種情況下，Angular會(huì)是更好的選擇。

障礙2：永遠(yuǎn)只有React

React是一個(gè)沒有觀點(diǎn)的庫，這意味著它對(duì)如何實(shí)現(xiàn)跨領(lǐng)域關(guān)注沒有意見。因此，您和您的團(tuán)隊(duì)有責(zé)任就如何使用它，尤其是要使用的其他庫提出意見。當(dāng)然，您將使用第三方庫，因?yàn)槟幌胫匦掳l(fā)明輪子。在React中，有很多選項(xiàng)可供選擇。

對(duì)于概念驗(yàn)證，我已經(jīng)對(duì)如何處理大多數(shù)跨領(lǐng)域問題有意見。現(xiàn)在，他們必須與新的團(tuán)隊(duì)成員一起重新驗(yàn)證。這是討論的基本主題列表：

應(yīng)該使用哪個(gè)路由器?

除了Redux，異步動(dòng)作還應(yīng)該使用什么?Trunk?Saga

我們應(yīng)該使用Axios還是訪存瀏覽器API?

Redux-Forms，F(xiàn)ormiq還是Final-Form?

樣式組件，makeStyle，SASS還是純CSS?

國際化庫?

因此，我們又花了三個(gè)星期來做出這些決定。我可以感覺到您對(duì)我尖叫：“快點(diǎn)，伙計(jì)!不可能花三個(gè)星期的時(shí)間來挑選那些庫!”

好吧……歡迎來到企業(yè)項(xiàng)目。有很多決定。對(duì)于每一項(xiàng)，您都必須創(chuàng)建決策標(biāo)準(zhǔn)，進(jìn)行研究，通過創(chuàng)建概念證明來驗(yàn)證發(fā)現(xiàn)，提出發(fā)現(xiàn)，在決策日志中記錄所有內(nèi)容以及使庫保持最新。這花費(fèi)了瘋狂的時(shí)間，而且甚至沒有樂趣。

而且，我什至沒有考慮每個(gè)開發(fā)人員花費(fèi)在學(xué)習(xí)所有這些第三方庫上的時(shí)間。我從未見過兩個(gè)具有相同依賴項(xiàng)，項(xiàng)目結(jié)構(gòu)和準(zhǔn)則的React項(xiàng)目。這意味著知識(shí)無法在項(xiàng)目之間轉(zhuǎn)移，就像在Angular或Vue中一樣。

在實(shí)施功能用戶故事方面未取得任何進(jìn)展的三周后，CTO開始擔(dān)心。

障礙3：React Hooks受歡迎

九個(gè)月后，我們創(chuàng)建了50多個(gè)頁面。開發(fā)人員注意到功能組件與類組件一樣好，并開始使用它們。因此，現(xiàn)在該項(xiàng)目不再遵循原始的編碼準(zhǔn)則。對(duì)于每個(gè)開發(fā)人員來說，這更像是個(gè)人選擇。對(duì)我來說，那沒關(guān)系。

React Hooks已發(fā)布并廣受歡迎。球隊(duì)有百感交集。有人認(rèn)為類會(huì)使人和機(jī)器混淆，有些開發(fā)者對(duì)此感到不滿，而另一些人則熱衷于新的編碼模式。

我們正在使用的所有第三方庫都增加了對(duì)Hooks的支持，整個(gè)React世界似乎都朝著這個(gè)方向發(fā)展。那我們該怎么辦呢?我們是否應(yīng)該偏離原始的編碼準(zhǔn)則，并添加實(shí)現(xiàn)組件的第三種方法?無法退回并將現(xiàn)有頁面和組件遷移到Hooks!

該團(tuán)隊(duì)贊成使用Redux Hooks，因?yàn)椴恍枰褂肦edux connect()并將轉(zhuǎn)儲(chǔ)組件與容器分開。這是有道理的，我們同意從現(xiàn)在開始，新頁面和新組件將使用Hooks。我們將保留舊的。

這就是我們最終得到三種處理方式的方式。不再有一致性。

更糟的是，一些開發(fā)人員開始提出不再使用Redux而是使用useState的想法。這意味著我們將破壞擁有一個(gè)單一全球狀態(tài)的想法。

懸念仍然是實(shí)驗(yàn)性功能。我擔(dān)心它發(fā)布后會(huì)發(fā)生什么。

障礙4：開發(fā)放緩

當(dāng)我們進(jìn)行持續(xù)集成的設(shè)置時(shí)，構(gòu)建大約花了三分鐘，包括npm安裝。但是現(xiàn)在，一年后，大約需要15分鐘。

我們還必須配置Node.js以將RAM擴(kuò)展到4GB，因?yàn)?GB不夠了。這不是大問題。令人擔(dān)憂的是，開發(fā)人員已開始抱怨構(gòu)建時(shí)間太長，在45-60分鐘的開發(fā)后熱加載就停止工作，并且重新啟動(dòng)要花5分鐘以上的時(shí)間-特別是對(duì)于那些使用Windows機(jī)器(顯然是Linux系統(tǒng)的用戶)對(duì)于Node.js來說要快得多)。有時(shí)，他們不得不完全刪除node_modules并再次下載依賴項(xiàng)，因?yàn)榉駝t它將無法正常工作。

當(dāng)node_modules中有1200多個(gè)依賴項(xiàng)，總大小為600MB時(shí)，您會(huì)期望什么?

對(duì)于企業(yè)應(yīng)用程序，一切都與成本有關(guān)。假設(shè)開發(fā)人員每天必須以每小時(shí)$ 40的速度重新啟動(dòng)六次。六次/天x五分鐘x 240天/年x $ 40 /小時(shí)x八個(gè)開發(fā)人員= $ 38,400 /年對(duì)于企業(yè)而言，這并不是一筆大數(shù)目，但是對(duì)于項(xiàng)目發(fā)起人來說，這是一筆不錯(cuò)的年度獎(jiǎng)金。畢竟，它等于全新的Tesla Model 3。

障礙5：Redux-Saga快死了

大多數(shù)開發(fā)人員不同意我的觀點(diǎn)，但是我認(rèn)為大部分業(yè)務(wù)邏輯都在Redux異步操作內(nèi)部。在大多數(shù)情況下，它是唯一可以進(jìn)行驗(yàn)證，API調(diào)用，錯(cuò)誤處理，觸發(fā)redux突變或觸發(fā)通知烤面包機(jī)的地方。如果不將這些視為前端應(yīng)用程序上的業(yè)務(wù)邏輯，那又是什么?

我們使用Redux-Saga，這是一個(gè)糟糕的決定，因?yàn)樗黾恿瞬槐匾膹?fù)雜性。Thunk足夠好了。

在企業(yè)應(yīng)用程序中，您必須不時(shí)地升級(jí)并重新驗(yàn)證依賴關(guān)系。這是一個(gè)好習(xí)慣，因?yàn)槟Ｍ踩?，性能改進(jìn)和較小的增量API更改，同時(shí)希望不進(jìn)行重大更改?？磥鞷edux-Saga已落伍。上一次更新是一年多以前的，而沒有任何人修復(fù)它們，GitHub問題的數(shù)量仍在增加。

開發(fā)人員喜歡React的原因有三個(gè)：簡單性，靈活性和生態(tài)系統(tǒng)。React的團(tuán)隊(duì)喜歡嘗試新的想法，但這正在破壞生態(tài)系統(tǒng)!他們應(yīng)該勇敢承擔(dān)責(zé)任!

實(shí)際上，React大多是向后兼容的，但是React周圍的生態(tài)系統(tǒng)卻不是。開發(fā)人員和第三方庫將始終使用最新的功能和體系結(jié)構(gòu)模式，而舊的實(shí)驗(yàn)將被淘汰。對(duì)于中小型項(xiàng)目，這應(yīng)該不成問題，因?yàn)槟梢愿p松地進(jìn)行調(diào)整。但是對(duì)于大型的多年項(xiàng)目，這些實(shí)驗(yàn)可能會(huì)破壞交易。

已經(jīng)是2020年9月，我決定將React-Saga納入技術(shù)指導(dǎo)委員會(huì)的風(fēng)險(xiǎn)評(píng)估結(jié)果中。

因?yàn)?0%的業(yè)務(wù)邏輯都在saga中，所以我將其標(biāo)記為高風(fēng)險(xiǎn)。那是當(dāng)我們開始項(xiàng)目時(shí)，首席技術(shù)官發(fā)脾氣，并責(zé)怪我做出了錯(cuò)誤的決定。

這只是產(chǎn)品經(jīng)理需要的火花。他以此為契機(jī)開始提出如下問題：

“為什么我們必須花很多時(shí)間來升級(jí)庫?”

“為什么發(fā)展放緩?”

“為什么應(yīng)用程序變得有bug和不穩(wěn)定?”

事情升級(jí)到管理層。我花了很多時(shí)間尋找證據(jù)來證明我們當(dāng)時(shí)做出了最好的決定，而不是我想度過周末的方式。

幾次回顧會(huì)議之后，我們再次駛過平靜的水面。畢竟，該項(xiàng)目即將完成。即將進(jìn)入維護(hù)模式。

結(jié)論

我愛React。我將其用于我的所有個(gè)人項(xiàng)目，并希望將其推薦用于新的工作計(jì)劃。但是，在經(jīng)歷了令人不愉快的經(jīng)歷之后，我將不鼓勵(lì)將其用于企業(yè)應(yīng)用程序。再?zèng)]有。

順便說一下，我并不孤單。

原文鏈接：

https://medium.com/better-programming/i-almost-got-fired-for-choosing-react-in-our-enterprise-app-846ea840841c