跳至主要内容

2 篇文章 含有標籤「conference」

檢視所有標籤

從 2024 React Conf 看 React Native 發展

· 閱讀時間約 9 分鐘
Ashley
Front End Engineer

今年的 React Conf 除了眾所矚目的 React 19 ,同時以 meta 開發團隊開發的 React Native 也帶來了不少亮點。有關於 React Native 的討論都集中在第二天的議程

New Architecture 上 beta 了

截至 2024 年 3 月 React Native 的在 npm 上的每週下載數突破了220萬,越來越多的開發者使用;同時 React Native 開發團隊也宣布 New Architecture 終於上 beta 了,從 0.68 版本 2022 年 3 月在 React Native 加入了 New Architecture 到現在升級到 0.74 版本後使用 react-native-cli 可以分別在 Android 的 gradle.properties 啟用、iOS 則是在 iOS 的位置執行 bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install、使用 Expo 則可以 Expo 51 的設定檔案分別開啟 iOS 跟 Android 是否支援 New Architecture。官方是建議大家可以先玩看看新架構,然後如果有遇到問題的話幫忙回報一下 issue。

至於為什麼要改整個大改呢?這就要回歸到現在 React Native 的架構,目前的 Javascript 用 bridge 的方式和原生構通,透過 JSON 反序列化和序列化經由 bridge 來傳遞訊息,但使用 bridge 來溝通一次只能有一端通過,而且每傳遞一次就要用 JSON 反序列化和序列化來轉換資料,是相當耗費的效能的。

那麼 New Architecture 是如何改善這個問題呢?主要使用 JavaScript Interface(簡稱 JSI )讓 JavaScript 與原生進行溝通,JSI 是用 C++ 寫的,他使用 memory sharing 的方式讓 JavaScript 層與 native 層溝通,也可以讓 JavaScript 同步運行在 native 層,直接讓 JavaScript 程式碼呼叫原生程式碼的函數,更有效率地去直接溝通原生層。

官方建議使用 React native framework - Expo

這次官方也宣布他們改了 React native 的官網,從 0.75 開始版本開始,直接建議開發者使用 Framework 來開發,例如:Expo,先針對先前對於 Expo 的原生支援度不足等原因而採用 react-native-cli 作為開發選項的痛點,Expo 這次更新了一些功能以提升開發者體驗:

原生的支援

對於原生的支援 Expo 提供了

  • Expo sdk : 提供了一些原生的 api,例如:camera、location、notification...等 Expo sdk

  • Expo module api : 使用 Expo module api 可以寫自己原生 kotlin、swift 的 module 引入 React-Native 專案

Expo module api

expo router

採取 file system-based routing 的設計,分別針對 iOS 跟 Android、web 、 tv OS 給出不同的 UX 設計。

管理原生程式碼

使用 continuous native generation 管理原生程式碼 cng

整體看下來,如果 Expo 這些功能可以解決原生支援度不足、可以整合自己寫原生的引入專案、再加上整合 build 跟 deploy 的平台,整體的開發者體驗相較使用 react-native-cli 來的好很多,如果有用過 Xcode build ipa 檔案或 android command line build apk 檔案、aab 檔案就可以心領神會其中的痛苦~但是我覺得這背後有一個隱憂就是 Expo 是一間私人的公司,會不會當使用者累積到一個量後,使用 Expo 的服務就會新增一些要考量的開發成本?

順道一提,React Conf 的 App 就是使用了 Expo 開發的,當然也有包含上方提及的新功能,都可以在 https://github.com/expo/react-conf-app 的 repo 中看到實際的應用。

多元的開發應用

React native 除了可開發出支援 iOS 、 Android、 Mac OS 、Window 系統的應用程式,React 可以開發這麼多不同的系統,就是基於 react 可以在 Render 階段則是將 Reconciler 時定義好的描述結構轉換使用專屬的 Render 去轉成 Native 的元件。

在這一次的 conf 中可以看到 React native 也可以開發出支援 Apple vision pro 的應用程式,又 Amazon 的工程師也分享了如何 React native 去開發支援 TV OS 系統應用程式的經驗。

React native 未來的發展

最後 Meta 的 React native 開發團隊分享了未來十年 React native 的開發藍圖:提升 React native 與 Web 的相容性與一致性,確保在不同的平台都有相同開發的體驗,以降低學習曲線。例如:ˋflexboxˋ 這個屬性在 React native 的 styleSheet 跟 CSS 在 web 瀏覽器的應用有一些不同。

React Native core

現行的 React Native 使用 React Native Core 將 React Element 轉換成原生的元素。

在 React Native core 中,Yoga 這個 layout 引擎負責計算 React Native layout 跟 styling 位置,後經過 React Native Runtime 後交由 React Native Renderer 去負責渲染各個平台的視圖,例如: Webview 、UI kit 、 Android ...等。

React DOM

React 則是使用 React DOM 將 React Element 繪製成瀏覽器實際 DOM 元素。

React strict DOM

React strict DOM

為了要提升 React code sharing 以整合 codebase 在 UI 上支援 web 瀏覽器和 VR 介面...等,React strict DOM 就是基於這個目的而開發的,它可以整合 React Native 和 React ,讓 web api 也可以在 React Native 中使用。

例如:

Unified Styling
import { css } from "react-strict-dom";
const styles = css.create({
container: { borderTopWidth: 1 },
h1: {
padding: 10,
backgroundColor: "#EEE",
},
content: {
padding: 10,
},
div: {
paddingTop: 50,
backgroundColor: "#000",
},
});

可以把 web css api 支援到 React Native ,像是偽元素、 media query。

Unified markup
import { html } from "react-strict-dom";
<html.div style={style.container}>
<html.h1 style={style.h1}>{title}</html.h1>
<html.div style={style.content}>{children}</html.div>
</html.div>;

可以在 React Native 中去使用 HTML 開發 web 。

結論

React strict DOM 最終的目的是讓 codebase 整合成一個,但是共享整個 codebase 跨平台並非主要的目標,應該是合理的去共享這些 code,這樣才可以花更多時間在處理各個平台的不同 UI 細節,而未來新的 web 功能將隨著時間的推移發佈到 React Native ,以提升 web 的相容性。

目前使用 React 開發 web 跟使用 React Native 開發 app 的體驗是截然不同的,在樣式方面 web 使用 css api、React Native 則是使用 styleSheet;同樣是寫 JSX 的標籤 react 不需要引用、React Native 則是需要從 React Native module 引入 component ,再加上其實有很多支援瀏覽器的屬性現階段在 React Native 是不支援的。

透過 React strict DOM 的開發可以看見開發團隊欲將 React 的生態系整合的決心,如果真的可以將 web 的 api 都可以整合到 React Native 中,那麼就可以真正的實踐 Learn once, write anywhere. ,目前看起來整合的複雜度很高、要解決的問題也不少,還需要一段時間等待。

有關於 React strict DOM 的討論可以參考這個 [RFC: React DOM for Native (reduce API fragmentation) ]https://github.com/react-native-community/discussions-and-proposals/pull/496

Web Conf 2023 心得與收穫

· 閱讀時間約 11 分鐘
Ashley
Front End Engineer

2023 Web Conf

2023 Web Conf

參加的動機

一直以來沒有參加過這種大型付費的 conference,又聽說這是睽違十年後再次舉辦 的 webConf ,所以就算現在幾乎都在開發 APP 還是想來看看,畢竟 Web 領域是我剛轉職時主要學的。況且學習前端技術的過程中,讀過不少這次議程講者的書籍或文章,甚至是課程,參加這個活動某種程度上是偶像見面會的概念(?另外,就是想透過這次的 conf 知道現在外面主流開發的方式與技術是什麼?

剛好之前買過的書都有擔任這次活動的講者,另外 PJ 、Summer 的文章在我學習前端的過程中也幫助我不少


會後的感受

可以說是既興奮又焦慮,但焦慮的部分多了一些。

得到了很多新的觀點跟技術,以及開發想法的啟發,這些都讓我感到很興奮,前端的講者都很有料!3400 元值回票價!但同時又覺得憂慮,這兩天議程下來得到技術和工具超多,越知道更多的新知識,越覺得自己對這個領域的認知好渺小(能力也是,一時之間不知道可不可以吸收完這些大神的精華?AI 目前在程式開發的應用,所增進的開發體驗有限,但未來的發展可以說是指日可待,會不會哪一天就不需要工程師了?哇~原來別的開發團隊原來都是利用這些 CICD工具去提升開發的效率,增進團隊溝通,為啥自己待的開發團隊什麼都沒做?


收穫

前端工程師的不同樣貌

雖然職稱都掛著前端工程師,但每一個前端工程師所著重的技術都不太一樣,在這次議程的主講者中,有的就是著重於網頁互動設計、WebGL、動態特效 ; 有的著重於 Frontend Infra 前端基礎建設,也就是前端架構師 ; 有的則是網頁產品開發 ; 我自己也算是個蠻異類的前端,主要的技能樹都點在 React Native APP 跨平台開發。

開發者體驗(Dev Experience)的重要性

兩天的議程下來,不同的講者分別都強調了開發者體驗的重要性,很多時候我們在開發產品時很重視使用者體驗(User Experience),往往忽略了開發者體驗(Dev Experience) ,然而開發者體驗可以帶給開發團隊的好處是提升開發效率和產品產量,當然也可以減少重複造輪子。在 Kyle 和 PJ 的分享中分享了不少關於如何在產品開發的過程中加入工具去提升團隊開發的品質,例如:CI/CD pipeline 優化的工具、利用透過 Script 或 Hooks 去自動化團隊專案的 Coding Style 讓機器人去擋下不符合規範的提交,也可以減少直接對人糾正的尷尬。在 Summer 的分享中則是怎麼樣去衡量網頁效能,並且利用 Sentry 去追蹤與記錄問題、觀察使用者的操作情況,進而打造一個自動化的效能系統,提升產品的穩定度。(以上的內容都很精彩,詳細的分享文章我整理在下方。)

不過,要如何去應用這些工具和制定流程,主要還是要看開發團隊的文化和業務情況,依照不同的情境導入相對合適的工具,才會對整體開發體驗產生良好的影響,否則就失去了提升開發效率的美意了。 我也要好好的去思考有哪些工具可以放入我的專案中了~

前端技術迭代速度好快,快到學不動了

剛轉職時有寫過一段時間的 Vue2 + Vuex ,後來都在寫 React 就快把 Vue 忘光了,趁著這次 Kuro 分享 Vue.js 的狀態管理模式,稍微的快速複習了 Vue ,發現 Vue 3 的 compostion api 在處理狀態和重用邏輯的部分與 React 的 hook 相似,看起來貌似比 Vue2 好寫多了。在狀態管理的部分以前用 Vuex 處理全域狀態都要透過從 Vuex 的 store state 拿出存放資料拿出來至vue compomnent => 若有非同步處理則還需要從 compomnent 更新觸發 Action =>Action 函數中調用 commit 方法來觸發 Mutations=> 更新 Vuex 中的狀態,一連串的要更新一個狀態需要很多繁瑣的步驟,反之,在 Vue 3 官文文件中直接將全域的狀態更新工具改成了 Pinia ,語法操作更簡單,取消了 mutation,跟 TypeScript 整合度更好。真是感嘆前端技術迭代太快了~沒想到不到兩年的時間又有更新更好用的東西,也不知道多久後又會有新的技術出來取而代之呢?

剛好聽到幾個講者在講十年前專精於 Flash 的技術(老實說我是第一次聽到,原來十年前的前端是要點的技能是這個),但現在的瀏覽器的都不支援了,就更有感。或許,身為開發者都要有這樣的覺悟:這一行本來就是沒辦法只學某幾種技術就能一輩子以此為生,也不是說舊的技術不好,一定會有公司需要人維護(除非就像 flash 死透了),但如果能 open mind 去學習新的技術,在職涯的路上選擇會比較寬闊。

原生 HTML element + Web api + CSS 就很好用

做表單 Form 一直是我覺得前端處理很麻煩的部分,又要透過 DOM 取值做資料驗證,又要顧及使用者體驗。Paul 在分享中,展示了許多用 HTML 原生 element 、CSS 、web api 的就可以處理的功能。例如:

HTML
<input type="checkbox" />
<input type="range" />
<progress></progress>

HTML 本身的屬性就可以做到基本 Type 檢查,搭配 Web api ,就可以避免使用 Javascript 去處理,減少效能浪費,更讚的是,可以輕鬆的延續使用者的體驗。


逛攤位的戰利品

我蠻喜歡去搜集貼紙的,趁機搜刮了一些貼紙~還在六角的攤位玩了一個心理測驗,測出來的結果是:

在天瓏的攤位用便宜的價錢入手了這本書,對這本書的印象是在星巴哥的技術專欄上看到有關這本書重構技巧的分享,希望我有時間可以看完它。


最後,分享覺得整場最有道理的一句話:


講者分享連結整理

備註

本篇文章原先發佈於Medium,之後會陸續將 Medium 撰寫的內容慢慢遷移到這個網站。