性能與動態兼得的Weex

Weex被阿里定義為“移動端的高性能動態化方案”,并稱之為“性能與動態兼得”。聽上去似乎很玄乎,那么Weex究竟如何?且看下面的內容。

移動開發:性能與動態兼得

目前的移動開發者面臨的最大痛點就是面對極其復雜的環境,對此,莊卓然給出一個公式,移動開發的復雜度=應用數量×平臺數量×要適配的各種各樣的機型。

如何解決這個問題呢?在解決問題之前,首先要對移動開發的未來有著精準的研判。

阿里認為,移動開發的未來必定更加平衡,也就是說必須是性能與動態兼得,如此,才能夠滿足未來用戶的需求。另外,移動開發在未來也必定是開放互聯的狀態,移動互聯網將來肯定是基于更加大眾化的技術體系,沒有平臺之間的隔閡,而且簡單易用。

所以,阿里結合移動開發的現狀并圍繞其愿景推出了Weex解決方案。



事實上,在去年的雙11活動中,Weex就得到了實戰的驗證,且表現不俗。時至今日,Weex已經被阿里技術團隊多次運用,并“創造”出各種豐富的場景,整體的表現非常優異。

把移動端所有界面拆分成各個page,然后中間設置有路由的控制邏輯,同時,將移動端各種各樣的能力通過各種API提供給開發者。這是阿里對移動開發模型的理解。

Weex通過標準化的東西,包括HTML、CSS和JS這些前端非常快速易用好學的語法作為開發體驗,提供給開發者。另外,Weex的語法設計尊重還Web的標準。

Weex的性能、擴展和兼容能力如何?


Weex設計之初就考慮到在三端(iOS、安卓和H5)上能夠得到展現。在最上面的DSL,阿里一般稱之為Weex文件(.we),通過Transformer轉換成js-bundle,再部署到服務器,這樣服務端就完成了。在客戶端,第一層是JS-Framework,最后到RenderRengine。
輸入是Virtual DOM輸出是native或者H5 view,還原成內存中的樹型數據結構,再創建view,把事件綁定在view上,把view基本屬性設上去。Weex Render會分三個線程,不同的線程負責不同的事情,讓JS線程優先保障流暢性。

Weex的性能、擴展性以及可用性究竟怎樣呢?

性能方面,阿里對Weex做了多次壓測。在加載時間、幀率、內存消耗、CPU占用(包括靜默和峰值)等多個方面,Weex都表現得非常出色。


在談及性能之時,幀率和加載時間幾乎都會被提及,但是往往忽略了一個事實,那就是Native UI開發中通常沒有JS資源在服務器端加載。Weex會把JS內置到客戶端里,以免除下載的問題,從而更為有效地提升性能。

兼容性是Weex非常重視的問題,對此,阿里是這樣來解決的。

首先是單測保證,包括JS和H5的單測,保證最基礎的UT(Unit Test)本身所帶來的含義。

其次是UI的自動化,分為兩個部分,一是截圖對比,將最終產生的結果和意料中的結果進行圖形對比;二是Layout Results,包括Model以及其他的布局類的,通過基本的信息完成測試的過程。



在擴展性方面,Weex可以寫很多頁面,而且通過路由機制幫助開發者將頁面進行串聯。

Weex已開放內測,可用性方面正在逐步完善。包括Playground、調試工具、腳手架、AppHub、編輯器等多個方面,一些工作已經完成就緒,絕大部分工作將在5、6月份完成。

最后,是Weex的三種工作模式。

1.全頁模式

目前支持單頁使用或整個App使用Weex開發(還不完善,需要開發Router和生命周期管理),這是主推的模式,可以類比RN。

2.Native Component模式

把Weex當作一個iOS/Android組件來使用,類比ImageView。這類需求遍布手淘主鏈路,如首頁、主搜結果、交易組件化等,這類Native頁面主體已經很穩定,但是局部動態化需求旺盛導致頻繁發版,解決這類問題也是Weex的重點。

3.H5 Component模式

在H5種使用Weex,類比WVC。一些較復雜或特殊的H5頁面短期內無法完全轉為Weex全頁模式(或RN),比如互動類頁面、一些復雜頻道頁等。這個痛點的解決辦法是:在現有的H5頁面上做微調,引入Native解決長列表內存暴增、滾動不流暢、動畫/手勢體驗差等問題。

另外,WVC將會融入到Weex中,成為Weex的H5 Components模式。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,565評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,115評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,577評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,514評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,234評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,621評論 1 326
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,641評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,822評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,380評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,128評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,319評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,879評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,548評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,970評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,229評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,048評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,285評論 2 376

推薦閱讀更多精彩內容