擁有10多年Web開發經驗也是FullstackRocks.com創辦人的呂維德認為React不只上手容易,甚至可能會影響未來開發Web應用方式。

圖片來源: 

iThome

日前在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)」策略。


熱門新聞

Advertisement