Kbone 簡介
1、導語
小程序作為一種新興地鏈接用戶與服務的方式,相信大家都或多或少接觸過。對于開發者來說,它是一種類似 Web 但又不同于 Web 的開發模式,它提供了一套自定義的 API 和文件組織方式,這無疑帶給開發者一定的學習成本和維護成本,所以我們也在嘗試能否提供一個方案來抹平這個差異。——引自Kbone作者june在云加社區微信群中的分享
隨著小程序的發展,Web 端和小程序同構的呼聲也越來越大,為此微信官方提供了 Kbone 這一套方案。旨在讓開發者可以用最熟悉的方式來完成一個多端 APP 的開發,降低開發門檻。
Kbone——微信小程序同構方案新思路。
微信小程序的底層模型和 Web 端不同,我們想直接把 Web 端的代碼挪到小程序環境內執行是不可能的。kbone 的誕生就是為了解決這個問題,它實現了一個適配器,在適配層里模擬出了瀏覽器環境,讓 Web 端的代碼可以不做什么改動便可運行在小程序里。
2、Kbone的優勢
因為 kbone 是通過提供適配器的方式來實現同構,所以它的優勢很明顯:
· 大部分流行的前端框架都能夠在 kbone 上運行,比如 Vue、React、Preact 等。
· 支持更為完整的前端框架特性,因為 kbone 不會對框架底層進行刪改(比如 Vue 中的 v-html 指令、Vue-router 插件)。
· 提供了常用的 dom/bom 接口,讓用戶代碼無需做太大改動便可從 Web 端遷移到小程序端。
· 在小程序端運行時,仍然可以使用小程序本身的特性(比如像 live-player 內置組件、分包功能)。
· 提供了一些 Dom 擴展接口,讓一些無法完美兼容到小程序端的接口也有替代使用方案(比如 getComputedStyle 接口)。
3、Kbone 誕生背景
首先我們先進入背景部分的介紹。之所以會有 Kbone 這個方案出現,源自于一個需求:微信開放社區當時只有 Web 端,為了讓信息可以更方便地傳播、分享和使用,希望實現社區小程序版,交互體驗盡量貼近于 Web 端。
此次同構到小程序端需要考慮幾個因素:多端代碼復用、盡可能支持已有的特性和性能要有保證。其實最主要的就是要在盡量不改動現有代碼的情況下來完成小程序的開發。
4、選擇
業內其實已經出現了很多關于同構的解決方案了,每個方案都有自己的優劣,不存在能夠完美解決所有問題的方案。kbone 也一樣,它的優勢在上面提到過,而它的不足也是它的實現原理帶來的。kbone 是使用一定的性能損耗來換取更為全面的 Web 端特性支持。
所以關于性能方面,如果你對小程序的性能特別苛刻,建議直接使用原生小程序開發;如果你的頁面節點數量特別多(通常在 1000 節點以上),同時還要保證在節點數無限上漲時仍然有穩定的渲染性能的話,可以嘗試一下業內采用靜態模板轉譯的方案;其他情況就可以直接采用 kbone 了。