552
移動Web富應用框架RAIS發布
先看看RAIS能做什麼
簡介
RAIS是專注移動端的Web富應用解決方案，它提供開發Rich Web App的MVVM框架、基礎組件、編譯工具、調試插件等全鏈路開發工具，幫助開發者快速高效構建具備優秀交互體驗的Web應用。
更多信息請參見官網 https://rais.tmall.net
為什麼？
從hybrid模式興起到現在已有數年，依托海量的Web開發者群體與PC時代積累的基礎設施，Web在移動端的占比大幅攀升。但在用戶體驗要求越來越高的今天，Web頁麵的體驗瓶頸也愈發明顯：
打開速度慢。以高度動態化為核心的設計思想在今天的高速網絡環境下反而拖累了加載速度，僅僅加載一個頁麵的基礎UI部分就需要10-20個網絡請求，並且悲催的是部分資源是需要順序執行的，這在爭分奪秒，哦不，爭秒奪毫秒的移動端上顯然水土不服，雖然通過各種緩存策略得以緩解，但是由於需要保證資源加載時序，“單點故障”效應仍然是拖累加載速度的最大殺手。天貓H5頁麵平均秒開率在iPhone 65%(均值1200ms)，Android 35%(均值2000ms)左右，這讓“H5頁麵打開慢”的標簽難以撕掉。
交互瓶頸。Web內核在移動端交互層麵的支持遠不及Native UI，這導致在下拉刷新、切頁動畫、多頁狀態保持、頁麵滾動等等交互體驗上與Native UI有明顯差異，所以大多數人選擇在Native中實現視圖功能和瀏覽鏈路，而在Web內實現單個頁麵的UI元素，這使得每個頁麵切換都需要重新載入頁麵，聞起來還保持的上世紀PC頁麵的氣息。
體係化框架缺失。在今天崇尚簡單快速操作的移動端，缺乏體係化的組件框架和開發工具，多數開發者在開啟一個項目前，往往要糾結於技術選型，而最終隻能選擇用零散的組件拚湊頁麵。
我問過不少同學，如何區分H5頁麵與Native頁麵？得到的答案五花八門，比如：“頁麵布局不穩定，從上往下加載的是H5”、“滾動沒停止時圖片出不來的是H5”等等，當然最多的答案還是“打開要白屏一兩秒鍾的是H5”
所以RAIS的初衷，正是解決移動Web的交互體驗和全鏈路開發體驗問題。
而近兩年站在風口的React Native以及我們自己的WEEX，與其說給Web端開發者帶來了希望，倒不如說，NativeUI+WebDSL的興起讓我們看到了他們對移動端H5的絕望。好，那麼問題來了，我們為什麼要死磕H5呢？
我們認為，Web的優勢在於高度動態化、靈活的UI模型以及海量的開發者群體。如果用一句話來概括WebUI的靈活性，那就是“沒有什麼UI布局是一個 position:absolute 搞不定的，如果有，那就兩個”。當然，這是句玩笑話。NativeUI+WebDSL的硬傷在於任何WebDSL終究無法還原真正的WebUI模型，這使得其開發效率要追趕H5，尚需些時日。而Web標準是所有Web開發者多年達成的共識，短時間內難以被新標準取代。 而今天移動端Web的窘境，是我們還遠沒有做好。許多人相信“H5是終局”，但是要“再等等”，那句話叫什麼來的？“幸福不會從天降，共產主義等不來”（原諒我抄了這麼low的slogan）。而且，在手機硬件更新換代遠快於PC的年代，我們相信在一兩年內，將會是移動Web的大時代。回想當年PC，BS大規模替代CS的時代，又用了幾年呢？
另外，Apple對除自身的 built-in webkit 外的動態SDK的態度比較曖昧，2017.3.8 發出的大量開發者警告可見一斑。
RAIS是如何解決這些問題的？
體驗瓶頸突破與基礎組件封裝
打開速度。RAIS會將資源打包，將代碼請求減少到1個（使用預加載情況下則無請求）；首屏通過數據配置實現優先渲染。一般用戶從看到界麵到手指滑動界麵通常在1.5s以上，極端情況也至少需要800ms，因此在首屏展示至用戶操作間，可以讓用戶在無感知間完成二次渲染。RAIS目前的線上頁麵iPhone秒開率達到93%（均值430ms），Android秒開率達到82%（均值860ms）。
滾動阻塞。在UC3內核和iOS的UIWebView中存在使用滾動頁麵時，JavaScript停止執行的問題，導致在滾動期間的懶加載圖片以及節點回收等無法執行。RAIS提供了ScrollView組件解決此問題，並保證較好的性能。
下拉刷新。基於ScrollView的實現，純Web的下拉刷新也成為可能，RAIS提供了pulldown-scrollview以支持下拉刷新操作。
長列表實時回收。RAIS提供ListView組件，以支持長列表實時進行UI對象回收，在ListView裏可以看到加載10000條數據流暢滾動的例子。
曝光事件。RAIS提供appearance模塊，以支持元素曝光/隱藏時的事件派發
MVVM與高性能
RAIS提供了MVVM的App框架，並在內置的directive提供了針對移動端模式的性能優化方案。比如在 repeat directive 中，提供了from x to x功能，開發者可以更改顯示範圍，repeat directive 能夠以最佳複用率複用UI對象，ListView就是基於此功能實現的。
多頁應用
RAIS可構建高性能的單視圖應用，也提供了多視圖和路由係統，提供可自定義切頁動畫的視圖切換。同時，支持視圖緩存，可在路由中配置當前視圖在下次訪問時使用上次的緩存對象還是重新渲染。使用緩存視圖可保持上次一操作的狀態，比如上一次列表滑動的位置。
更多特性可以移步官網 https://rais.tmall.net 查看。
RAIS提供哪些框架和工具？
- RAIS框架 & 移動端基礎組件庫
- 編譯器 & 工程腳手架 & 周邊工具和Chrome開發插件
- RAIS 模塊貢獻機製 & 最佳實踐
RAIS Chrome 調試插件
自己試試？
請移步這裏 https://rais.tmall.net/guide/rais/quickStart/ 快速搭建一個RAIS App
目前已知的問題和解決方案
- Android低端機在U3內核下滾動有卡頓現象，預計3月中旬支持在U4及Chrome內核上使用native-scroller
- 暫不支持橫劃手勢返回，預計在3月中旬支持
- 在Chrome56上調試時，滾動Scrollview時會有警告。此為Chrome在56版本中的更新修改的特性，預計在3月中旬修複
最後
對WebApp方向有興趣的同學歡迎隨時向我們吐槽、建議、貢獻、合作。
RAIS框架 https://gitlab.alibaba-inc.com/groups/rais
移動組件庫 https://gitlab.alibaba-inc.com/groups/rais-mobile
最後更新：2017-04-25 16:00:39