Qnext大会 | React Web——浏览器端复用React Native代码解决方案

原创专栏|杨乾军

自2008年开始接触前端,至今已有8年的前端开发经验,是一名资深前端攻城狮。目前在去哪儿平台事业部前端架构组。

1 背景

一直以来,移动开发的肩上扛着iOS、Android、Touch三座大山,一个应用需要维护三套代码,面临开发慢迭代慢成本高的问题。如何能够提升效率、快速开发及迭代?

几年前,大牛们推出Write Once Run Anywhere概念基于WebView的hybrid的应用解决方案,可以使用HTML、CSS、JavaScript构建多端app,极大的提升了开发效率,但是始终存在无法突破的反应慢、性能差的瓶颈。

Facebook近期推出倡导Learn Once Write Anywhere理念的React Native,他提供了一套基于JavaScript的,构建性能一流原生APP的解决方案,极大降低了开发人员的学习和使用成本,单凭JavaScript就可搞定Android和iOS。

剩下的问题就是React Native没覆盖到Touch,如何实现Write Once Run Anywhere,React Native代码能不能直接运行在浏览器上?

2 实现机制

我们团队在React Native上深度定制【Qunar React Native】,新增了许多组件和API,在框架层面抹平了iOS和Android的平台差异,使得主要的业务逻辑可以在无需修改的情况下,无差异的运行于 iOS和 Android 平台。

对应的,我们也设想推出一套框架,抹平Native和Web的平台差异,力求实现业务逻辑在浏览器上也是可以无差异运行——这就是React Web。

React Web的设计思路就是通过在浏览器端一模一样的补齐React Native的组件和API,使得业务代码通过构建工具,分别构建出支持Native和Web的版本,从而实现业务代码的复用。

3 React Web的优势

内置 - React web内置在 React Native内,创建一个项目,不需要区分Native和Web,只安装一个react-native node_module即可。

完成度高 – React Web高度实现了React Native、Qunar React Native的几乎所有组件和API,并且业务组件库react-natie-ui的十几个组件也可以不做任何修改直接复用在Native和Web平台。

兼容性-React Web的高完成度,保证了Web和Native平台的高度兼容,确保了一套代码、多端运行;此外,React Web在Web端,测试了主流,包含Chrome、QQ、Safari、Android原生、UC、360、百度、微信X5、Hy内置WebView等浏览器,确保在框架层面解决了浏览器兼容性问题。

调优-React Web一直在持续的进行性能优化,包括动画、事件响应方面的性能优化;并且提供统一的抽离的公用库CDN来提升页面加载性能及项目构建效率;此外,React Web还内置了一些辅助工具如数据mock中间件等来提升使用体验。

4 使用与示例

5 总结

React Web提供了一套快速低成本复用React Native代码的解决方案,会极大的提升开发效率。通过持续的优化以及用户设备性能的不断提升,React Web的优势将愈发明显,愈发值得尝试。

欢迎勾搭,提问、建议和贡献代码。

原文发布于微信公众号 - 携程技术中心(ctriptech)

原文发表时间:2016-11-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

最美动画特效库,你们值得收藏

昨天,我抽时间整理了一下我收藏的一些开源库,真的是收藏了很少看,但是昨天整理的时候,感觉到了一些真的不错的开源动画特效的库,在这里分享给大家。 1 Slid...

2518
来自专栏知晓程序

创作从未如此简单!这个小程序,简直就是微信里的「简书」

这些年,喜欢写文字的人都开了公众号,许多公司甚至以公众号的阅读量作为 KPI 进行考核。

1205
来自专栏phodal

分享下 Backbone、Vue、Angular、React 在项目上的使用经验

上周,知乎上有几篇关于 Angular 和 Vue 对比的文章。本来想着的是,这些文章倒是可以指导下新手,作一些技术选型。可遗憾的是,开始的文章失去了一些偏颇,...

3626
来自专栏草根博客站长有话说

展望 WordPress 5.0 会给我们带来哪些更新?

目前 WordPress 最后的一个正式版已经到 4.9.7 了, WordPress 5.0 也即将到来了,那么 WordPress 5.0 会给我们带来哪些...

2233
来自专栏葡萄城控件技术团队

MultiRow中文版技术白皮书

引言 Microsoft .NET是一项比较成熟的技术开发框架,很多的商业应用都是基于.NET开发的,在这些商业应用中,作为数据展示和录入的表格控件,是不可或缺...

2075
来自专栏编程微刊

移动端iPhone系列适配问题的一些坑

2062
来自专栏IMWeb前端团队

深入浅出React(一):React的设计哲学 - 简单之美

本文作者:IMWeb 刘起 原文出处:IMWeb社区 未经同意,禁止转载 编者按:自2013年Facebook发布以来,React吸引了越来越多的开发...

2095
来自专栏PHP在线

HTML5移动应用开发

1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构...

3718
来自专栏KK的小酒馆

几个作品

3.拥有置于前台的服务,实现Notification的播放、暂停按钮与其他界面同步。

943
来自专栏星流全栈

新手向:Vue 2.0 的建议学习顺序

995

扫码关注云+社区