移动Web富应用框架RAIS发布

简介: ## 先看看RAIS能做什么 ---------------------------- ## 简介 ---------------------------- RAIS是专注移动端的Web富应用解决方案,它提供开发Rich Web App的MVVM框架、基础组件、编译工具、调试插件等全链路开发工具,帮助开发者快速高效构建具备优秀交互体验的Web应用。 更多信息请参见官

先看看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提供哪些框架和工具?


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


RAIS Chrome 调试插件

自己试试?


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

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


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

最后


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

目录
相关文章
|
1月前
|
安全 数据库 开发者
Python Web框架简介
【2月更文挑战第10天】Python Web框架简介。
90 2
|
15天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
【4月更文挑战第9天】本文对比了Python三大Web框架Django、Flask和Pyramid。Django功能全面,适合快速开发,但学习曲线较陡;Flask轻量灵活,易于入门,但默认配置简单,需自行添加功能;Pyramid兼顾灵活性和可扩展性,适合不同规模项目,但社区及资源相对较少。选择框架应考虑项目需求和开发者偏好。
|
9天前
|
前端开发 数据挖掘 API
使用Python中的Flask框架进行Web应用开发
【4月更文挑战第15天】在Python的Web开发领域,Flask是一个备受欢迎的轻量级Web框架。它简洁、灵活且易于扩展,使得开发者能够快速地构建出高质量的Web应用。本文将深入探讨Flask框架的核心特性、使用方法以及在实际开发中的应用。
|
21天前
|
前端开发 安全 Java
使用Java Web框架:Spring MVC的全面指南
【4月更文挑战第3天】Spring MVC是Spring框架的一部分,用于构建高效、模块化的Web应用。它基于MVC模式,支持多种视图技术。核心概念包括DispatcherServlet(前端控制器)、HandlerMapping(请求映射)、Controller(处理请求)、ViewResolver(视图解析)和ModelAndView(模型和视图容器)。开发流程涉及配置DispatcherServlet、定义Controller、创建View、处理数据、绑定模型和异常处理。
使用Java Web框架:Spring MVC的全面指南
|
25天前
|
前端开发 JavaScript 数据管理
描述一个使用Python开发Web应用程序的实际项目经验,包括所使用的框架和技术栈。
使用Flask开发Web应用,结合SQLite、Flask-SQLAlchemy进行数据管理,HTML/CSS/JS(Bootstrap和jQuery)构建前端。通过Flask路由处理用户请求,模块化代码提高可维护性。unittest进行测试,开发阶段用内置服务器,生产环境可选WSGI服务器或容器化部署。实现了用户注册登录和数据管理功能,展示Python Web开发的灵活性和效率。
14 4
|
1月前
|
数据库
最全三大框架整合(使用映射)——struts.xml和web.xml配置
最全三大框架整合(使用映射)——数据库资源文件jdbc.properties
10 0
|
1月前
|
前端开发 API 网络架构
Python 如何开发出RESTful Web接口,DRF框架助力灵活实现!
Python 如何开发出RESTful Web接口,DRF框架助力灵活实现!
|
1月前
|
XML JSON API
通过Flask框架创建灵活的、可扩展的Web Restful API服务
通过Flask框架创建灵活的、可扩展的Web Restful API服务
|
1月前
|
物联网 调度 开发者
构建高效Python Web应用:异步编程与Tornado框架解析
【2月更文挑战第27天】 在处理高并发的Web应用场景时,传统的同步阻塞模型往往难以满足性能需求。本文将深入探讨Python世界中的异步编程概念,并结合Tornado这一轻量级、非阻塞式Web服务器及框架,展示如何构建高性能的Web应用。通过实例驱动的方法论,我们将剖析Tornado的核心组件,包括其IOLoop、异步HTTP客户端和服务器端处理机制,以及与协程集成的细节。文章旨在为开发者提供一套实践指南,帮助他们利用Python实现快速响应和资源高效的Web服务。
29 2
|
1月前
|
设计模式 前端开发 API
简述 Python WEB 开发常用的框架有哪些?
【2月更文挑战第26天】【2月更文挑战第88篇】简述 Python WEB 开发常用的框架有哪些?