跨平臺(tái)開發(fā)是目前開發(fā)較熱門的方向，React Native 在這方面取得了很大的成功，同時(shí) Flutter 也獲得了非常多的關(guān)注。React Native 采用 Web 框架開發(fā)并使用 Native UI 進(jìn)行渲染，很大程度上降低了 Native 開發(fā)的門檻并且提高迭代的效率，但是也不可避免地存在一些不足之處。

本人作為 RN 的長期開發(fā)體驗(yàn)者，深知在有些技術(shù)在現(xiàn)有的 RN 這類框架上沒法得到很好的解決。比如首屏的速度，復(fù)雜的跟手動(dòng)畫，和原生 Android 和 iOS 上的體驗(yàn)確實(shí)有一定的差距的。當(dāng)然這些小小的毛病不能阻礙跨平臺(tái)開發(fā)技術(shù)的發(fā)展。本人也在持續(xù)的關(guān)注 Flutter，這個(gè)框架解決了RN上性能的問題，但是也增加了學(xué)習(xí)成本。

Lynx

最近發(fā)現(xiàn)了跨平臺(tái)的一個(gè)新框架 Lynx ，從官方簡介來看這個(gè)框架還處于 alpha 狀態(tài)，目前還沒有完整的文檔，只有體驗(yàn) demo 。不過在體驗(yàn)了這個(gè)框架提供的 demo之后，感覺還是可以持續(xù)關(guān)注下去的。Lynx 官方宣稱擁有和 Native 一致的首屏速度和交互體驗(yàn)，體驗(yàn) demo之后發(fā)現(xiàn)首屏速度和交互的確很優(yōu)秀。

體驗(yàn)

正好在之前編譯 RN 和 Flutter 已經(jīng)下載好了 Android SDK 和 NDK ，按照 How To Build 進(jìn)行編譯還是比較方便的。

最終效果和官方給出的動(dòng)圖是一致的，就是整體的 demo 還是比較少的，略簡單。頁面開發(fā)流程暫時(shí)還沒嘗試，只能先看看效果。

在 Lynx 的介紹里面看到了和其他現(xiàn)有的跨平臺(tái)框架相比的一些不一樣的特性，根據(jù)自己的體驗(yàn)和官方介紹簡單說一下：

頁面首屏展示，看到給出的 demo 就可以知道，這個(gè)和原生的 Android 和 iOS 頁面一樣，都可以做到直出的，基本沒有任何白屏的狀況。這一點(diǎn)相比于 RN 確實(shí)是一個(gè)不錯(cuò)的點(diǎn)。

交互動(dòng)畫，就是跟手動(dòng)畫，在 RN 上要去實(shí)現(xiàn)這類動(dòng)畫確實(shí)是比較難（本身因?yàn)橹虚g還要過一層 JSBridge 的原因），要么自己拓展 Native 的模塊。而在 demo 上的交互動(dòng)畫非常順暢，并沒有出現(xiàn)任何的卡頓，在效果上甚至比 Flutter 幀率更高。

JSBinding 機(jī)制，根據(jù)官方的說法有更高效的 JSBridge，但是體驗(yàn)上暫時(shí)沒感覺出來，稍后去研究一下代碼

動(dòng)態(tài)發(fā)布測試，這個(gè)是所有跨平臺(tái)框架必須有的，不算什么新鮮事。這個(gè)看文檔的介紹需要結(jié)合腳手架 lynx-cli 。

頁面直接展示和滿幀的交互動(dòng)畫的實(shí)現(xiàn)原理是什么呢？官方給出了一個(gè)簡單的工作流程圖和介紹。理解了這個(gè)就基本知道這個(gè)問題的答案了，頁面展示快的原因是因?yàn)閷⑹灼恋恼故咀兂闪伺虐嫖募?#xff0c;從而略過了 JS 的執(zhí)行生成首屏元素的步驟，而交互動(dòng)畫的實(shí)現(xiàn)也是通過了中間的交互動(dòng)畫引擎在接收到事件后直接響應(yīng)，從而略過了 JS 的中間步驟。

體驗(yàn)完Lynx，覺得這個(gè)框架還是值得后續(xù)觀望，看下能做到什么程度。

最后

Lynx 框架現(xiàn)在還是在 alpha 階段，暫時(shí)還不能直接用來開發(fā)要上線的應(yīng)用，功能也尚不完備，但是可以關(guān)注它的發(fā)展，畢竟這個(gè)技術(shù)在實(shí)現(xiàn)上和 RN 有所區(qū)別，也希望能有新的想法，在滿足先在的需求的情況下突破現(xiàn)有的局限。

嘗試 demo 之后，準(zhǔn)備去看看代碼，一探內(nèi)部實(shí)現(xiàn)。Lynx 的倉庫也給出了可以使用的 API 列表，后續(xù)會(huì)根據(jù) API 進(jìn)行簡單實(shí)踐。希望能有更多的跨平臺(tái)開發(fā)框架出現(xiàn)，推動(dòng)技術(shù)的發(fā)展。

附上 Lynx 倉庫地址：https://github.com/hxxft/lynx-native

更多專業(yè)前端知識(shí)，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的跨平台开发框架 Lynx 初探的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。