我們?cè)��?jīng)認(rèn)為太陽(yáng)圍繞地球運(yùn)行，把瘟疫看作神對(duì)人類的懲罰，而現(xiàn)在我們堅(jiān)信MVC架構(gòu)和雙向數(shù)據(jù)綁定就是構(gòu)建Web UI程序的最佳方式。

過(guò)去，人們沒(méi)有更好的方式來(lái)探尋這個(gè)世界，由于認(rèn)知的局限，人們對(duì)這些“誤解”深信不疑。

最終，天文學(xué)家證明了日心說(shuō)，醫(yī)生發(fā)現(xiàn)疾病是由細(xì)菌引起的。類似的，React引入了單向數(shù)據(jù)流的概念。

這些發(fā)現(xiàn)都沒(méi)有立刻得到大眾認(rèn)可。伽利略的理論被認(rèn)定為異端邪說(shuō)。Semmelweis 博士發(fā)現(xiàn)疾病源于細(xì)菌，然而同事不接受他的這一研究成果，最后遺憾的在一庇護(hù)所中含恨而終。而如今，我們?nèi)匀徽`認(rèn)為所有的UI架構(gòu)都是平等的。

我堅(jiān)信React，或者類似的東西，將是用戶界面開發(fā)的未來(lái)。此刻，希望你不要立刻跳到文章末尾表達(dá)贊同或者反對(duì)意見(jiàn)，請(qǐng)先耐心看完文章正文，我會(huì)告訴你我這么認(rèn)為的理由。

React的視野更為廣闊

React是一個(gè)由聰明人創(chuàng)造的聰明想法的集合。當(dāng)React首次公布時(shí)，主要的賣點(diǎn)在于它的渲染方式：如果將應(yīng)用程序結(jié)構(gòu)與底層渲染DOM分開，我們可以實(shí)現(xiàn)聲明式的視圖渲染語(yǔ)法，同時(shí)仍然能夠應(yīng)用最優(yōu)的DOM突變。

它的思想別具一格，比如，它認(rèn)為通過(guò)將代碼分離為HTML、JavaScript和CSS來(lái)跨越技術(shù)邊界的方法并沒(méi)有實(shí)質(zhì)性的效果。React認(rèn)為，為了創(chuàng)建具有高內(nèi)聚和低耦合的程序，我們最好將UI的呈現(xiàn)、行為和狀態(tài)放在一個(gè)JavaScript文件里。這種方法為開發(fā)人員帶來(lái)了阻礙，那就是在普通的JavaScript中難以創(chuàng)建UI。鑒于此，React附帶了一個(gè)名為JSX的擴(kuò)展語(yǔ)法。

很多開發(fā)者非常討厭JSX擴(kuò)展語(yǔ)法。如果你不是Web前端開發(fā)人員，也許很難理解開發(fā)者為什么會(huì)對(duì)擴(kuò)展語(yǔ)法充滿排斥情緒。

? ?

React發(fā)布時(shí)激起了熱烈的討論

沒(méi)有人愿意看到自己深信不疑的東西被否定，這是人的天性。因此，在高速發(fā)展的前端領(lǐng)域，React的核心價(jià)值經(jīng)常被忽略。

React是一個(gè)組件平臺(tái)

React的核心在于它的組件。虛擬DOM是一項(xiàng)很酷的技術(shù)，但它只是一個(gè)實(shí)現(xiàn)細(xì)節(jié)，如果React不需要它也可創(chuàng)建，那它也就沒(méi)有存在的必要。JSX是一項(xiàng)不錯(cuò)的技術(shù)，但它只是語(yǔ)法糖。

如今，組件已經(jīng)是一個(gè)非常成熟的概念了，它在React之前就已經(jīng)存在。當(dāng)React發(fā)布時(shí)，Web組件規(guī)范早已標(biāo)準(zhǔn)化。就像伽利略并非第一個(gè)發(fā)現(xiàn)日心說(shuō)的人一樣，組件也不是React發(fā)明的，React只是重新定義了它。

React組件的優(yōu)點(diǎn)主要在于它的可組合性和封裝性。其次是它的函數(shù)組件和多用途。下面我將對(duì)其進(jìn)行詳細(xì)說(shuō)明：

• 可組合性 使我們能夠使用多個(gè)小的程序來(lái)組件一個(gè)大的程序，這些小程序使用的模板并不依賴其他組件，代碼可以獨(dú)立于系統(tǒng)中的其他代碼進(jìn)行自由修改、刪除和替換，甚至可以在未來(lái)的代碼存在之前編寫。
• 封裝 包含組件的整個(gè)表現(xiàn)、行為和狀態(tài)。這意味著外部代碼不能影響其行為，除非包裝成了一個(gè)組件。
• 函數(shù)式 風(fēng)格的編程接收Props進(jìn)行渲染，這使得React組件更加健壯，它們的行為易于記錄和理解，從而使得開發(fā)人員能夠使用其他人開發(fā)的組件，而無(wú)需了解其工作原理。
• 多用途 意為組件既可以是負(fù)責(zé)數(shù)據(jù)和行為的容器組件（控制器），也可以是呈現(xiàn)組件的視圖。這種分離的方式一直是MV *體系結(jié)構(gòu)的關(guān)鍵，而優(yōu)雅的React組件API可以在保留可組合性和封裝性的同時(shí)，實(shí)現(xiàn)真正的分離。

這種小巧且集中的組件抽象方式提供了開發(fā)者需要的所有特性，比如：易于學(xué)習(xí)和記憶，更好的用戶使用體驗(yàn)，并且能夠生成便于維護(hù)和協(xié)作的程序。

還有一個(gè)我沒(méi)提到的組件，事實(shí)上，這是最重要的組件。

組件是創(chuàng)新原語(yǔ)

雖然我是React的忠實(shí)支持者，但我不得不承認(rèn)React并不完美；React核心團(tuán)隊(duì)正在積極對(duì)其進(jìn)行優(yōu)化，一些新的想法在不斷討論、實(shí)施和丟棄。雖然目前React的生態(tài)系統(tǒng)很強(qiáng)大，包含了大量的庫(kù)、模式和多種實(shí)踐，但它依然有提升空間。我們甚至不能確定是否需要高階組件、渲染Props、函數(shù)式Props、或者 組件的組件 ！

雖然豐富的選項(xiàng)有時(shí)會(huì)令人疲倦，但這正是React組件模型的真正優(yōu)勢(shì)所在。有了通用的、小型的、可組合的、靈活可靠的構(gòu)建模塊，我們就可以在不丟棄現(xiàn)有工作的情況下討論、測(cè)試和接受新的想法。

遍布世界各地的個(gè)人開發(fā)者構(gòu)建了像 Redux 、 Apollo 或 樣式化組件 這樣革命性的庫(kù)，應(yīng)用開發(fā)者可以將這些新工具與現(xiàn)有工具一起使用，而無(wú)需修改現(xiàn)有的代碼，并且可以不影響其他模塊的情況下單獨(dú)替換某些特定的模塊，這都令我難以置信。

這些庫(kù)各自都在React領(lǐng)域之外實(shí)現(xiàn)了復(fù)雜的功能，但他們卻沒(méi)有相互限制，因?yàn)檫@些工具都可以利用組件組合模型。 因此，React組件模型不僅僅是一個(gè)UI原語(yǔ)，它是一個(gè)創(chuàng)新原語(yǔ)。

與漸進(jìn)式JavaScript的不同之處在于，React采用新工具時(shí)不必重構(gòu)大量的代碼。與Ember或者Angular這樣的整體型框架不同，React具有足夠的靈活性來(lái)應(yīng)對(duì)不可避免的變化。

變化不可避免

平臺(tái)應(yīng)當(dāng)能夠適應(yīng)變化，這一點(diǎn)非常重要，因?yàn)?變革總是不可避免并且代價(jià)高昂。

聰明人不會(huì)突然停止對(duì)問(wèn)題的觀察，并為其提出解決方案。人們不會(huì)停止對(duì)存在的限制感到沮喪，并且不會(huì)停止對(duì)自由的追求。作為開發(fā)者，發(fā)現(xiàn)更好的工具時(shí)，我們也不會(huì)強(qiáng)忍著不去使用。無(wú)論你多想保持現(xiàn)狀，歷史的車輪總是滾滾向前。

當(dāng)改變發(fā)生時(shí)，一個(gè)系統(tǒng)最理想的狀態(tài)是它能夠適應(yīng)變化，如果完全替換代價(jià)將非常巨大。

在過(guò)去十年的框架戰(zhàn)之后，我們現(xiàn)在生活在前所未有的繁榮與和平時(shí)期。React等工具使我們能夠構(gòu)建和維護(hù)杰出的產(chǎn)品。

如果我們的工具阻礙了進(jìn)步，我們必須保持前進(jìn)而不得不放棄它們。革命的代價(jià)是毀滅現(xiàn)有：我們將不得不更換所有的庫(kù)，重新認(rèn)識(shí)新方法，重新培訓(xùn)我們的團(tuán)隊(duì)，重復(fù)我們的錯(cuò)誤，改寫或重構(gòu)大量的代碼，而不是專注于我們正在創(chuàng)造的產(chǎn)品。

革命無(wú)法抗拒

創(chuàng)新的階段分為兩部分：

- 快速改革的爆發(fā)期

- 緩慢增長(zhǎng)的長(zhǎng)尾期

? ?

革命期增長(zhǎng)迅速，細(xì)化階段增速平緩。

React是一場(chǎng)革命。它推翻了當(dāng)前的最佳實(shí)踐，幾乎在一夜之間對(duì)開發(fā)人員體驗(yàn)方面進(jìn)行了重大改進(jìn)。目前我們正在快速進(jìn)行迭代，我們對(duì)這種快速的創(chuàng)新已經(jīng)習(xí)以為常，但是不久之后，創(chuàng)新的速度將會(huì)趨于平緩。

但曲線并不會(huì)真正決定創(chuàng)新的速率。只要我們保持創(chuàng)造活力和創(chuàng)新精神，同時(shí)開發(fā)者積極做決策，我們的生態(tài)系統(tǒng)依然能夠快速變化。

讓我們編寫軟件積極應(yīng)對(duì)變化

無(wú)論我們是在React生態(tài)系統(tǒng)內(nèi)部使用其他框架，構(gòu)建無(wú)框架的漸進(jìn)式Web應(yīng)用程序，還是根本不構(gòu)建與Web平臺(tái)相關(guān)的軟件，我們都可以從React及其生態(tài)系統(tǒng)中學(xué)習(xí)這些經(jīng)驗(yàn)教訓(xùn)，能夠靈活應(yīng)對(duì)變化而不需要顛覆現(xiàn)有的代碼。

• 用小模塊來(lái)構(gòu)建大系統(tǒng)： 使用多個(gè)小巧的特定功能單元來(lái)構(gòu)建軟件，盡量避免使用整體性的架構(gòu)。設(shè)計(jì)API和接口時(shí)要仔細(xì)考慮，方便他人使用。
• 讓代碼易于復(fù)制和刪除，而不容易更改 ： 相比于繼承和混入最好使用組合。把行為進(jìn)行封裝。把一件事做好。
• 優(yōu)先為人而不是機(jī)器編寫代碼： 讓代碼變得更好理解。編寫代碼時(shí)盡量意圖簡(jiǎn)單明了，不要過(guò)于學(xué)術(shù)。做到命名準(zhǔn)確，書寫必要的文檔，保證代碼規(guī)范，方便他人使用。
• 密切使用編程語(yǔ)言： React能夠利用新的JavaScript語(yǔ)言功能和生態(tài)系統(tǒng)工具，因?yàn)樗�只使用JavaScript而已，雖然它有一套JSX語(yǔ)法。避免使用基于字符串的DSL和非慣用接口，因?yàn)檫@會(huì)降低兼容性。
• 除非逼不得已，否則不要打破現(xiàn)有狀態(tài)?： 穩(wěn)定性本身就是一種價(jià)值，因?yàn)楦淖儠?huì)導(dǎo)致額外的工作和浪費(fèi)產(chǎn)生，或者在最糟糕的情況下，甚至?xí)�發(fā)生諸如廢棄AngularJS這樣的結(jié)局。要么最初就更換技術(shù)方案，否則最好不要在中途進(jìn)行替換，使用 代碼模塊 或類似的工具來(lái)適應(yīng)變化。在你自己的代碼中，不要僅僅為了它而采用新的庫(kù)，請(qǐng)充分衡量成本與收益。
• 保持開放的態(tài)度： 如果遵循了前面的規(guī)則，那么最后這一條也是必然的。有時(shí)候，新的想法也許讓人恐懼，變化可能會(huì)帶來(lái)不便，但革命總是偶爾會(huì)發(fā)生。不要太過(guò)一成不變，保持開放的態(tài)度，聽取人們的意見(jiàn)。

React是開發(fā)者的福音

UI領(lǐng)域技術(shù)更迭非常之快，簡(jiǎn)直變幻莫測(cè)，我相信React會(huì)是UI的終極選擇。

雖然我個(gè)人并未重視虛擬DOM，但它已被證明是React最具前景的功能之一。由于虛擬表現(xiàn)層和UI實(shí)現(xiàn)層的分離，React非常適合服務(wù)器端渲染和通用Web應(yīng)用程序。原生移動(dòng)平臺(tái)是用戶界面開發(fā)中難以忽略的一部分； React Native 正好可以在該領(lǐng)域?yàn)槲覀兲峁┐罅�幫助�?recoil 讓React在Kotlin和Swift中都大有可為。 ReasonML 和 ReasonReact 可以幫助我們將React范例擴(kuò)展到JavaScript之外的平臺(tái)。隨著未來(lái)增強(qiáng)和虛擬現(xiàn)實(shí)技術(shù)的蓬勃發(fā)展，我希望 React VR 和其他類似的實(shí)驗(yàn)可以幫助我們預(yù)測(cè)風(fēng)暴。

最終，React將被其他東西取代。我們還不知道強(qiáng)制函數(shù)會(huì)是什么，也許是WebAssembly，我們不知道接下來(lái)會(huì)發(fā)生什么。不管怎樣，我都會(huì)懷以激動(dòng)的心情期待它。

就目前而言，由于React的強(qiáng)大存在，我相信短時(shí)間內(nèi)UI領(lǐng)域會(huì)保持專一、穩(wěn)定并欣欣向榮。

原文鏈接： https://medium.com/@jevakallio/the-present-future-of-user-interface-development-ebd371255175

感謝覃云對(duì)本文的審校。

 

來(lái)自：http://www.infoq.com/cn/articles/the-present-future-of-user-interface-development

 

標(biāo)簽： 代碼 服務(wù)器 服務(wù)器端 開發(fā)者 移動(dòng)平臺(tái)

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。