移动Web富应用框架RAIS发布

先看看RAIS能做什么

简介

RAIS是专注移动端的Web富应用解决方案，它提供开发Rich Web App的MVVM框架、基础组件、编译工具、调试插件等全链路开发工具，帮助开发者快速高效构建具备优秀交互体验的Web应用。
更多信息请参见官网 http://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就是基于此功能实现的。

ListView 10000条数据渲染效果

多页应用

RAIS可构建高性能的单视图应用，也提供了多视图和路由系统，提供可自定义切页动画的视图切换。同时，支持视图缓存，可在路由中配置当前视图在下次访问时使用上次的缓存对象还是重新渲染。使用缓存视图可保持上次一操作的状态，比如上一次列表滑动的位置。

更多特性可以移步官网 http://rais.tmall.net 查看。

RAIS提供哪些框架和工具？

RAIS框架 & 移动端基础组件库
编译器 & 工程脚手架 & 周边工具和Chrome开发插件
RAIS 模块贡献机制 & 最佳实践

RAIS Chrome 调试插件

自己试试？

请移步这里 http://rais.tmall.net/guide/rais/quickStart/ 快速搭建一个RAIS App

目前已知的问题和解决方案

Android低端机在U3内核下滚动有卡顿现象，预计3月中旬支持在U4及Chrome内核上使用native-scroller
暂不支持横划手势返回，预计在3月中旬支持
在Chrome56上调试时，滚动Scrollview时会有警告。此为Chrome在56版本中的更新修改的特性，预计在3月中旬修复

最后

对WebApp方向有兴趣的同学欢迎随时向我们吐槽、建议、贡献、合作。
RAIS框架 http://gitlab.alibaba-inc.com/groups/rais
移动组件库 http://gitlab.alibaba-inc.com/groups/rais-mobile