伍佰目录 短网址
  当前位置:海洋目录网 » 站长资讯 » 站长资讯 » 文章详细 订阅RssFeed

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

来源:本站原创 浏览:179次 时间:2021-08-02

https://v.qq.com/x/page/w0546vuvoln.html

什么是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,这样框架的问题才能暴露出来。


  推荐站点

  • At-lib分类目录At-lib分类目录

    At-lib网站分类目录汇集全国所有高质量网站,是中国权威的中文网站分类目录,给站长提供免费网址目录提交收录和推荐最新最全的优秀网站大全是名站导航之家

    www.at-lib.cn
  • 中国链接目录中国链接目录

    中国链接目录简称链接目录,是收录优秀网站和淘宝网店的网站分类目录,为您提供优质的网址导航服务,也是网店进行收录推广,站长免费推广网站、加快百度收录、增加友情链接和网站外链的平台。

    www.cnlink.org
  • 35目录网35目录网

    35目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向35目录推荐、提交优秀网站。

    www.35mulu.com
  • 就要爱网站目录就要爱网站目录

    就要爱网站目录,按主题和类别列出网站。所有提交的网站都经过人工审查,确保质量和无垃圾邮件的结果。

    www.912219.com
  • 伍佰目录伍佰目录

    伍佰网站目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向伍佰目录推荐、提交优秀网站。

    www.wbwb.net