揭秘携程内部海量CRN项目解决方案

摘要

随着公司内部CRN项目的日益增多,越来越多的业务部门开始意识到,是否可以将CRN的项目直接运行在浏览器上,以免去他们在H5和SEO上的额外开发。甚至有的Web开发人员在想,是否能够在他们熟悉的浏览器上去开发CRN的项目,以便他们能更好、更快速的完成CRN项目。这次就是基于上述的场景,分享下我们内部的解决方案——CRN-WEB,希望能够帮助到大家。

视频内容

什么是CRN-WEB

背景

最早是React Native实现了用一种方式开发APP。由于种种原因和限制,我们公司基于RN和以往的API开发了CRN。CRN最简单的功能就是打通了Android和iOS,开发人员只要写一套代码就能在Android和iOS上运行。CRN还对iOS的控制、开发效率的提高以及Hybrid性能的问题都有所帮助。

CRN项目的大规模出现,使得BU对H5、SEO的需求更加迫切,开发的CRN代码是否能在浏览器上运行呢?

其实不止我们有这样的需求,在国外有一个React-Native-Web的项目,国内淘宝也做了一个React-Web。可见国内一些公司对这方面的需求还是比较大的。

CRN-WEB的出现

Hybrid团队最初的梦想只是让RN的代码运行在浏览器上,这样就不用再去额外开发一套H5的代码。

简介

于是CRN-WEB就是产生了。它的底层是基于ReactJS,兼容RN和CRN组件及接口的H5框架。CRN-WEB完成了RN的最后一公里,弥补了RN在H5上的短板。支持RN和CRN的项目类型。

特点

CRN-WEB可以快速生成已有或者即将开发的CRN项目的H5版本。它和CRN、RN的API保持一致,代码可以直接运行在CRN或H5环境中。开发体验友好,支持元素审查、源码改动动态刷新,运行时debug远程真机调试。CRN-WEB支持浏览器、微信等多个平台。

CRN-WEB的架构设计

功能组成

从大方向来说,功能组件包括了RN的组件和API。但要真正实现还需要样式、事件和生命周期等等。

要做自己的基于RN开发的Web框架,一定会用到自己公司的组件,比如Auth、Pay、UBT、ABTesting和Model。

还有可以拿来直接用的第三方插件React-Native-Web-Scrollable-Mixin。

CRN还有一些扩展的业务自己及API。应用层最外层的一个组件是用来封装APP里的路由,管理路由配置与Native交互,绑定Native暴露的变量与方法。对页面的封装功能是进行页面切换,PV自动埋点,页面生命周期自动管理。ViewPort可以理解为Web上的视口,页面展示的内容应该使用ViewPort包起来,根据导航栏的隐藏与否自动调整页面大小,优化页面切换卡顿问题。

运行环境有.Net上的H5、Hybrid和Node上的H5。

代码展示

如何使用CRN-WEB

开发环境工具

特点:

基于node.js,快速搭建开发环境。

使用简单,功能强大,支持源码调试。

源码修改,自动热更新。

几乎无修改的快速生成React-Native的H5版本。

生产环境工具

特点:

1、同时生成node.js项目、.net项目、hybrid项目。

2、自动提取BU用到的框架模块,使得框架代码可以根据BU的实际使用情况动态生成import{Navigator,Platform}from’react-native’;

成果就是攻略了FlightKnowAll页面(从giz250k优化到gzip131k)。

3、将原有的同步加载模式转为异步加载模式,使得BU的每个页面都可以实现按需加载。

CRN-WEB的现状及发展

组件数量

目前我们的框架总共提供了150多个component和API。其中我们自己扩展的CRN component大概有50个,涉及到react-native的API有30多个,react-native component有40个,module的其它功能组件有30个左右。

市场

以携程为例,目前我们的CRN项目大约有90多个,Hybrid项目有100多个,react-native项目有30多个。这些项目是完全可以转到CRN WEB上去做的,都是我们的潜在用户。

未来

接下来我们要做的事就是功能完善以及性能优化,完善浏览器端的兼容性问题。

我们正在和去哪儿团队合作开发YRN-WEB。我们两家维护同一套底层,每家的业务代码加上这个底层就可以运行在各自的APP里去。

还有想做的就是开发一些更快捷的工具,更多地推广CRN WEB,这样框架的问题才能暴露出来。

我今天的分享就到这里,感谢聆听!

原文发布于微信公众号 - IT大咖说(itdakashuo)

原文发表时间:2017-09-05

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏点点滴滴

关于Windows系统安装(一)

1166
来自专栏IT技术精选文摘

通过案例来学习TCP的MSS、MTU

问题的描述 最近要通过Docker的方式把产品部署到客户机房, 过程中需要部署一个hbase集群,hbase总是部署失败(在我们自己的环境没有问题) 发现hba...

2757
来自专栏Albert陈凯

5分钟弄懂Docker

尽管之前久闻Docker的大名了,但是天资愚钝,对其到底是个啥东西一直摸不清,最近花了一段时间整理了一下,算是整理出一点头绪来。 官网的介绍是这样的: Do...

3405
来自专栏吴伟祥

Docker学习——Kubernetes(八) 顶

853
来自专栏逸鹏说道

KVM基于内核的虚拟机概念理解与客户机浅析

作为一个KVM的学习者,如果你想要自己完善一个KVM样品级的解决方案,仅仅学会图形化界面使用和简单的配置(详情见上一篇文章)是远远不够的。在上文中感谢@laow...

3924
来自专栏北京马哥教育

Docker学习总结之Docker与Vagrant之间的特点比较

不分场景而直接比对vagrant和docker是不恰当的!在一些简单场景中,它们两款产品作用是重复的,但在更多场景中,它们两款产品无法相互替 代。事实上,vag...

2693
来自专栏FreeBuf

如何打造一款可靠的WAF(Web应用防火墙)

之前写了一篇《WAF防御能力评测及工具》,是站在安全运维人员选型WAF产品的角度来考虑的(优先从测试角度考虑是前职业病,毕竟当过3年游戏测试?!)。本篇文章从W...

3555
来自专栏云计算D1net

想要使用容器技术 这5类遗留工具就应该被淘汰

充分利用容器并不只是安装Dockers和激活容器应用程序那么简单。你需要改进的同样还有监控方法、安全性能等。 这么做的理由是,容器并不只是对你过去工作中使用到的...

3538
来自专栏DevOps时代的专栏

E2E 测试容器化实践

在互联网最初之时,没有任何容器化的概念,那么刚开始的时候是怎样开发软件或者是网站的吗?那时就是计算机便是服务器,就是一个简单的静态网页,没有复杂的业务逻辑。

1272
来自专栏祝威廉

其实连Docker公司都把Docker用错啦

好吧,我承认我标题党了。但是这篇内容应该让你从一个新的角度理解Docker的本质是什么。

772

扫码关注云+社区

领取腾讯云代金券