【直擊Modern Web 2015】Web開發框架React為何受矽谷歡迎

日前在Modern Web大會上，許多開發界高手相繼分享最夯開發技術，而擁有10多年Web經驗，也是FullstackRocks.com創辦人的呂維德則介紹了目前在矽谷相當火紅的Web開發框架React，他認為，這套工具將影響未來開發Web應用的方式。

呂維德過去曾是美商資訊業顧問公司總經理，旅美工作多年，從事軟體開發委外工作，也創立過多家公司。他觀察這2年間美國矽谷出現大規模轉換潮，例如Apple、Yahoo、Instagram、Netflix、微軟等都開始使用React，甚至，很多新創公司在開發上不是正使用React，就是在轉換到React途中。

到底React有什麼神奇的魔力，就連大公司和新創團隊都愛用。React是Facebook在2013年中開源的一個前端Web開發框架，主要在於幫助開發者提高Web應用效能。以往在開發前端Web網頁、App程式時，經常會因為不正確的操作導致程式出錯，甚至造成執行效能降低。

而React則是設計了虛擬的DOM架構，稱為VDOM，來解決這個不當操作產生的問題。這是記憶體內的一個小物件，網頁畫面有任何改變時，會先在記憶體內繪製完畫面後，才顯示給使用者，以降低不當操作影響效能的情形。目前Facebook的網頁元件多數都是以React開發。

React另一個好處是學習容易，呂維德也說，熟悉JavaScrip的開發者，只要花一天時間就能學會，而且框架的架構思維模式簡單，開發者不用像以往得經過複雜處理步驟，出錯機率又高，並且已有許多企業實例驗證可行。

用3概念介紹React的核心架構

呂維德分別將React的核心架構用Single Source of Truth、Thinking in Component <jsx />，以及Always Redraw（VDOM）這3個概念來介紹。

第一個「Single Source of Truth」指的就是要確保資料源是儲存在單一地方，而非四處散落。其次是「Thinking in Component」著重於構思出畫面組成或是元件使用方式，而最重要是「Always Redraw」，每當有資料改變，就會用VDOM將網頁畫面全部重繪，而無需過問到底做了哪些改變。

呂維德表示，以往開發者一遇到程式有問題直覺反應就是重新載入頁面，以獲得保證正確的可用頁面。而在React世界的理念上，則是每一次只要資料發生改變，就會將頁面立即重繪，來得到一個乾淨的頁面。

Facebook在今年初F8開發者大會上釋出開源行動裝置App開發框架React Native，其概念就是源自於React。React Native是一個使用JSX技術打造行動裝置App UI的開發框架，用JavaScript直接掛勾（Hook）裝置原生元件，以實作真正的原生App。

呂維德表示，因為React Native框架沒有使用Webview，而是可用 JavaScript、HTML、CSS等網站開發者熟悉的技術來編寫App程式，轉譯成各平臺原生介面，還可針對瀏覽器、手機、桌機平臺的特性來開發各自的專屬介面。

他說，現在App Store商店上不少App都是用React Native開發而成，每個按鈕或拖拉功能都是原生iOS已存在的行為，而使用在Android上也同樣如此。

只要懂React運用手法，「一天就能從無到有完成寫出一款麻雀雖小五臟俱全的App。」呂維德說。

React這套工具的出現，呂維德認為，不只徹底改變了既有的網頁開發作法，甚至也轉變開發架構策略，從以前「一次編寫，到處運行（Write Once, Run Anywhere）」到現在「一次學習，到處編寫（Learn Once, Write Anywhere）」策略。