天天看點

選擇 React 是商業問題而不是技術問題

選擇 React 是商業問題而不是技術問題

概要

react 是一個建構可組合的使用者界面的工具庫。其它類似的有 angular、backbone、knockout 和 ember,但是相對來說,react 的成長更展現了解決商業問題而不是技術問題。下面我們會讨論為什麼 react 很重要,以及它是如何有利于團隊工程化的。

規避風險

react 足夠穩定 - facebook 聚集了衆多優秀的工程師,并投入了大量資源在 react 項目(newsfeed,instagram,messenger 以及 ads marketplace 等)上。這種投入,以及 facebook 公司自己的産品對 react 的測試,都是其它競品所不具備的。至少有 571 位(截止 2015 年 12 月份)貢獻者參與了 react 的一系列會議以及定期版本的更新。

使用 react 的産品:airbnb,asana,atlassian,bbc,chegg,cloudflare,cnn.com,codecademy,coursera,craftsy,dailymotion,dropbox,expedia,facebook,feedly,flipboard,hipchat,imdb,imgur,instagram,khan academy,kissmetrics,mattermark,minerva project,netflix,okcupid,rackspace,rally software,ralph lauren,reddit,redfin,salesforce,squarespace,the new york times,trunk club,twitter,uber,university of cincinnati,venmo,whatsapp,wired,wix,wordpress,yahoo,zendesk。

研發效率

健壯的遷移方案 - 不論頁面整體是如何建構的,react 都可以在其中的一小塊區域落地實作,這樣開發者可以以任意節奏進行遷移。需要注意的是 react 需要一個運作時基礎庫(react v0.14.0 版本大約 gzip 後 39.4kb),是以在舊的基礎庫被完全移除之前,這種不完整的遷移狀态會增加頁面資源體積。

性能第一 - react 的設計模式讓寫出糟糕的代碼變得非常困難(對于運作時性能來說,如果明白一部分 react 的工作原理,寫出糟糕的代碼還是很容易的——譯者注)。此外,因為 react 避免了直接操作 dom,不僅可以替換已有的視圖層(angular、backbone 或 ember)邏輯,也可以避免對 jquery 一類工具的依賴,而 jquery 往往是編寫出大量代碼的禍端。

seo - 搜尋引擎優化需要把頁面從伺服器渲染到浏覽器。react 在設計時考慮到了 seo,除了可以運作在浏覽器上之外,通過 node 也可以運作在服務端。其它的競品需要大量不穩定的 hack 和衆多開發者維護才能達到類似的目的。react 建構起來更簡單,降低了維護成本。

增強的代碼複用 - react 具備提供高性能和管理完整的元件生命周期的獨特能力,顯著地增強了開發者的人機工程學特性。通過更簡單地建立、分發和使用獨立的可複用元件,開發者可以更有效通過抽象公共特征來節約時間。這對像按鈕一樣的低級元素以及像手風琴一樣的進階元素都奏效。

提升開發者效能

減少同級資源的複雜性 - react 把 html 和 javascript 糅合在了一起,其原理是 html 和 javascript 總是不可避免地耦合在一起,分離它們僅僅是分離了技術而不是分離關注點。這種思想也可以引申為包含 css,通過隔離變量作用域解決了全局命名下的 css 開發所遭遇的一連串問題。 詳見 radium 和 react: javascript 中的 css 。

更快的錯誤隔離 - facebook 向浏覽器提供了 react 開發者工具,可以調試建立 ui 的元件和資料。

簡單可了解的代碼:當今大多數工具中,模型(model) 代表資料,視圖(view) 将資料生成為豐富的 ui 和互動。通常模型或視圖(例如商城購物車模型)的改變會對其它依賴相同模型的視圖産生級聯的影響。如果項目足夠大,那麼這個依賴圖譜會變得複雜,以至于修改時不可避免地會産生副作用。

選擇 React 是商業問題而不是技術問題

提升可測性:元件作為 react 最基本的抽象單元,将資料作為輸入,輸出 dom 而不會有其它副作用。避免了 dom 在使用和建立中的狀态發生耦合,元件變得更原子和可測。

團隊收益

快速上手 - react 的 api 非常精簡。組合式的聲明文法和 ui 元素的元件化讓新人上手更快 - 特别是應屆生以及對前端領域不熟悉的人。

校正:許多人指出 google 在内部大量使用了 angular。我的意思不是 google 一點也沒有使用 angular,隻是我不知道 google 有把 angular 用在哪一個擁有海量使用者的産品中。這個差別很重要,因為隻有這種産品才能真正展現出在維護性、可用性以及人機工程學上的水準,對于有興趣把工具應用于實際産品的人來說也是一個參考和橋梁。

繼續閱讀