我們在2013年推出了Cloud Elements整合平臺的v1版本,這個產品在過去幾年裡一直為客戶和公司發展提供了良好的服務。但是2017年,Web技術迅速演變,從而使使用者期望也進一步發展。現在是我們重新思考整個開發者流程的時候了,這也為我們重新思考我們的技術棧提供了一個機會。
在產品釋出週期和釋出期限的世界中,技術的選擇至關重要。以下是我們一路走來的歷程,幫助你揭開一些關於React的實用亮點。
我們來自哪裡
在React之前,我們使用AngularJS,這可能是當時被選中的最流行的前端框架。 但是如上所述,時過境遷,AngularJS v1.x的統治已被其年輕的小弟Angular 2所篡奪。
離開AngularJS v1.x的一個主要目的是這個框架的生命結束的可預見性。 雖然它仍然得到積極的支援,但這是一個向新事物轉變的好機會。
使用 JavaScript 框架的優點
開發團隊知道繼續使用 JavaScript 框架將提供幾個顯著的優點:
效率:通過結構良好的預構建模式和功能,可以更快地實現過去需要數月和數百行程式碼才能實現的專案。
安全性:JavaScript 框架內建安全測試,並且可以得到由成員和使用者也作為測試人員的大型社群支援。
成本:大多數框架是開源和免費的。由於它們可以幫助工程師更快地構建定製解決方案,因此 Web App 的最終價格將會降低。
為什麼選擇 React
當在考慮構建我們新 UI 的不同選擇時,React 顯然是一個明智的選擇,因為它的描述性,高效性和靈活性。與 Angular 不同,ReactJS 是一個基於 JavaScript 的開源庫,帶有 JSX 編譯器。它主要關注使用者介面,允許我們建立可重用的 UI 元件。
React 都是基於元件的。使用 React 構建應用程式是將這些元件中的許多組合在一起,將應用程式 UI 帶入生活 — 非常像樂高玩具!這些封裝的元件管理自己的狀態,因為元件邏輯是用 JavaScript 而不是模板編寫的,你可以輕鬆地通過應用程式傳遞豐富的資料,而不用擔心 DOM 中的狀態。
你可以為應用程式中的每個狀態設計一個簡單的檢視,並且 React 會在資料更改時處理元件的呈現。
雖然有些人將爭取完全無狀態的元件,但 React 的真正威力和效能來自於接受應用程式狀態概念。
使用 React,你應該永遠記住,它實際上並不是一個 JS 框架,而是一個用於渲染檢視的庫。
雖然有許多框架可供選擇(例如,Vue,Ember 和 Angular 2),但 React 具有一些關鍵優勢:
- JSX 是一種 JavaScript 語法,它啟用了 HTML 的引用,並使用 HTML 標籤的語法來渲染子元件。它促進機器可讀程式碼的構建,並提供了一個在編譯時驗證檔案中組合元件的能力。
- 由於使用虛擬 DOM,與 Angular 1.x 相比,它帶來了極大的效能提升。除此之外,React 元件可以在應用程式之間建立和重用。
- ReactJS 和 AngularJS 的主要區別在於 React 是以 JS 為中心的,而 AngularJS 是以 HTML 為中心。JavaScript 要比 HTML 更強大,這使得 React 更加簡單,集中和一致。
React 如何改進了我們開發者的開發體驗
React 通過 Stackoverflow,Reactiflux Chat,Freenode IRC,Facebook 和 Twitter 等論壇提供支援,這也讓我們在選擇時更容易做出決定。
React 可能不會做任何事情,但它提供了一個補充工具的列表,包括除錯工具,元件工作臺,JSX 整合,基本入門工具包,全棧入門工具包,模型管理以及與其他平臺緊密合作的其他工具。
React 是 Facebook 和 Instagram 的使用者介面使用的框架,這也顯示出了它動態,高流量應用程式的效率。React 可能是增長最快的JS“框架” —— 截至今天,GitHub 有超過 1,000 個貢獻者。
儘管 React 有一個學習曲線,但它使應用程式開發變得簡單易懂。此外,它非常適合複雜,高負載的場景和下一代軟體解決方案。
資料來源: https://insights.stackoverflow.com/survey/2017
React 提供了一些有用的開發者工具來建立需要零配置的應用程式。隨著平臺的不斷增長,React 不斷髮布新功能和升級。最近釋出的是 webpack 2,因直接編寫和匯入 ES6 模組,且不需要將它們編譯到 CommonJS 中而有名,這有助於捕獲更多的錯誤。
是什麼使得 React 與眾不同
React 本身不是一個框架。如前所述,它應該被認為是檢視渲染引擎或元件模型。
React 提供可重複使用的可配置元件,讓您快速入門。網路上有許多易用的 React 元件,幾乎涵蓋了所有方面:表單(react-form),狀態管理(Redux),SPA 路由(react-router),實時訊息(reactfire),管理非同步任務(react-axios),繪圖(react-sparklines)– 不勝列舉。
這是一個很好的圖表,顯示了 React 和 Angular 之間的主要區別:
資料來源: https://da-14.com/blog/reactjs-vs-angular-comparison-which-better
結論
當你考慮轉向使用 React 或基於 React 構建時,瞭解你的資料以及你希望將如何發展是你在邁步前進之前必須弄清楚的。例如,React 使用單向資料繫結,其中資料流僅以單一方式進行。因此,你將需要始終關注資料發生變化的地方,使其在大型應用程式中更容易進行除錯。
你還需要深入瞭解你需要解決的業務問題,以及你需要什麼資料來回答這些問題。我們是跨團隊的資料驅動型組織。因此,在工程中,我們使用監控和資料收集來了解哪些雖然需要花費時間來投入,以及如何最好地利用我們的資源。總的來說,在基於 React 上構建新的 UI,我們克服了困難,但我們從來沒有忘記過我們的主要目標 —— 減少耗費的時間以提升價值、資料的靈活性,同時留下進步和創新的空間。