React Native 在卖菜公司的落地之路

内容来源:2018 年 3 月 31 日,宋小菜资深前端工程师陈锦辉在“React 技术专场交流活动”进行《RN 在卖菜公司的落地之路》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方,经主办方和讲者审阅授权发布。

阅读字数:2823 | 8分钟阅读

摘要

本次分享介绍了RN应用从开发到上线以及最后维护的整个过程,其中涉及到了组件化、热更新、打包、线上监控等方方面面。

嘉宾演讲视频及PPT回顾:http://suo.im/5r1pVF

Why RN

之所以要选择RN,一方面是因为效率问题,另一方面则是历史问题,因为我们公司在刚开始创立的时候只有一个web前端和一个安卓开发。这样的人员配置要想开发App,iOS端就会面临很大的挑战,起初我们采用的方案是Hybrid,但是在iOS产品上线后发现这样的方式表现效果不是很好。综合考虑下最终我们还是采用了React Native进行开发。

RN版本

在使用React Native的过程中首先遇到的就是版本问题。RN的版本更新非常频繁,从0.14更新到0.15用了20天,看起来时间很长,但是这其中发布了5、6个补丁版本,整个的更新频率大致是2、3天一次。要是每次更新都使用新版本开发,就会非常麻烦,而且作为一个新兴的框架,每次更新不仅会修复以前的BUG,同时还会产生新的BUG。我们最终的解决方案是在每段时期使用固定的版本,在使用RN的两年时间里一共采用了4个版本。

组件化

React 的一个重要的特性就是组件化,不仅是在web上,在RN上也可以使用组件化。刚开始使用RN开发iOS的时候我们对js的组件都做了一些简单的包装,不过RN组件不仅仅局限于js,它还有Naïve组件。

对某些特殊的功能其实还是要用到Native原生的能力,所以基于RN的组件化相对web可能对开发者的java或Object-C方面的能力有些要求。

在使用RN开发后效率有了很大的提升,因此不仅是iOS,我们还将RN迁移到了Android,并且不是采用混合开发,而是纯RN形式。

工程结构不统一

不管是RN开发还是web开发都会遇到工程结构不统一的问题,RN的工程结构对比普通React web的工程结构很相似,同时在RN开发中也一样会遇到路由管理组件选择的问题,工程结构的统一主要解决的就是这方面的问题。

RN开发中我们使用的组件是官方提供的react-navigation,并对它进行了自定义的包装实现自己的脚手架来生成RN App框架,当然这里的框架并不局限于路由组件的自定义,还包括部分基础 JS 组件和原生组件(包括定位、地图、相机等)的集成。

热更新

无论是使用RN还是原生开发App,都需要通过应用商店来更新应用。为了应对业务快速迭代问题,就需要用到React Native的热更新特性。对React Native有初步了解的开发人员应该都知道RN实际上可以简单地被分为两部分,一部分是Js ,一部分是Native(Java/OC)。

因此我们自己开发了一个热更新框架,可以通过后端服务与前端特定SDK的配合来做到不通过应用商店更新安装包也能更新业务代码的效果,与此同时我们在针对更新包大小问题做了优化,引入了增量更新方案以减少更新服务器的压力。

对于想要做热更新的朋友,一定要了解APK的应用目录结构以及iOS应用沙盒结构。同时还要了解到RN 中Android和iOS静态资源引用方式,Android端还需要清楚它的安装过程。如果对更新速度有要求,那就需要制定比较详尽的差分策略来支持增量更新。

打包

在解决了业务方的更新迭代需求后,接下来要解决的就是打包的问题。在打包方面我们其实已经有比较完整的生态链路,但是当时所有的5个App打包起来还是非常麻烦。因为最初都是单人维护一个App,打包某个App时需要找到相应的开发者,且针对不同的类型都有自己的包,使得包的数量逐渐增多,同时不同的开发者配置环境也不一样,造成开发者之间无法帮助打包。

为了解决这些问题,我们基于RN自定义一个打包系统。它由三部分组成,首先是配置管理,其次是RN的packager,这个packager相对于原生分为了js打包和原生打包两部分,最后就是安装包管理部分。

发布流程

使用打包系统一键打包后可以手动在热更新平台上上传更新,完成后就能应用到线上。整个过程中其实还是有着人工上传发布的步骤,就有可能会出现发布的错误,比如发错包文件、填错版本号之类的情况。

因此针对打包的发布的流程还需要有自动化的连接,以此来避免人工上的错误。

前面提到过在热更新的时候有增量更新的特性,利用这一特性就能实现预发布和白名单的功能,这样就可以定向的测试针对部分用户的特定业务。

线上App健康状态

App开发完成上线后,还需要花费时间和工具维护,基于这一需求我们实现了一个针对上线App的数据收集功能。之所以要自己开发这样的功能,是因为目前市面上的产品都无法满足我们的定制化需求,而且大多数产品不能将数据的分析维度下沉到用户维度。

上线了数据收集系统后,我们发现上线的App中很多BUG都是测试以后遗留下来的,当时由于人手不足测试总会有些遗漏。针对这个问题我们开发出了基于RN的测试系统,它的大致流程如下。

首先通过可视化的业务流程生成相应的测试用例,根据该用例再生成简单的测试脚本,这个测试脚本会应用到打包的系统上,使得测试和打包被连接在一起,接着打包系统会生成一个针对测试用例的安装包。实际测试功能则会交由第三方完成,因为他们有着充足的真机做兼容性和功能性测试,最后生成的测试报告就会反馈给开发者和相关人员。

数据报表

虽然已经使用RN做了很多事,但是并不局限于此,我们还基于RN的组件化思维以及数据的抽象思维做出了一个可定制化的报表系统。

类似报表这样的数据都有着一定规范,足够的抽象后可以将数据和UI绑定,只需要对指定UI内的数据进行插拔就能实现数据的动态展现。

整个系统的客户端还是使用React开发,后端服务则是 NodeJs 开发的,它以我们现有的数据仓库作为数据源,后端服务消费数据仓库的数据,将其生成特定的数据格式,然后使用 Facebook 开源的GraphQL做UI和数据的绑定,最后展现在App上。这样就做到了在后端编辑添加了报表以后,客户端就能看到相应的报表了,不用特意去更新 App。这对我们公司的报表开发有着极大的提升,在这个系统上线应用之前,我们开发一个报表的周期大概是 1 周左右,当这个系统上线以后,我们开发报表的周期已经缩短到了大概半天左右,效率提升很明显。

有问题可以在评论区讨论,以上为所有分享内容,谢谢大家!

推荐文章

  • 百度脑图解析:如何进行web复杂应用的渐进式开发
  • MVP“变形记”,苏宁移动开发的架构演进!
  • 饿了么:基于SpringBoot的Web层服务开发实战!

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

原文发表时间:2018-06-04

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏双十二技术哥

也谈组件化

在之前我的一篇文章中,提到过关于组件化的一些概念,可以参考《GMTC移动开发者大会纪实(二)组件化只是一句口号吗》。接下来的几篇文章,主要会写下我们团队实施组件...

10910
来自专栏资深Tester

测试流程之缺陷

20420
来自专栏Web项目聚集地

Spring MVC+Spring+Mybatis搭建图书管理系统

本项目为图书管理系统,后端使用ssm框架、前端使用主流的layui,利用Maven工具管理Jar包搭建项目,此项目作者为「陈豪」,作者本人独立开发,仅用于学习使...

31020
来自专栏编程之旅

小程序开发总结

很久很久很久没有更新了,最近几个月因为房子交房,生活上是一片忙碌,工作上的事其实还好,没有分去很多精力,主要是在生活上的事情牵扯了太多了精力,于是乎把每周一更博...

31560
来自专栏携程技术中心

干货 | 去哪儿网快速 App 开发及问题解决平台实践

作者简介 张子天,去哪儿网平台事业部客户端技术总监。2011 年加入去哪儿网,曾担任无线机票 Android 总监、无线架构总监,目前主要负责 Qunar 客户...

44990
来自专栏Java架构师学习

浅析常用软件架构的三种架构模型

常用的软件架构模型可以归类为三种架构模型:3/N层架构、“框架+插件”架构、地域分布式架构。 一.三种架构模型 1.3/N层架构 这是经典的多层架构模型,对于稍...

49470
来自专栏皮振伟的专栏

超融合架构设计之概述

背景: 相比于传统的私有云IaaS产品(例如vmware、华为),nutanix引领了一个新的技术方向---超融合。 nutanix本身是存储起家,分布式存储上...

57770
来自专栏小特工作室

局域网内手机播放视频

  随着科技越来越发达,手机,平板越来越被大众接受,逐步成为必需品。手机、平板这类移动端的产品,和PC机相比,携带确实方便很多,而且功能也越来越和PC电脑接近,...

37660
来自专栏FreeBuf

看我如何发现价值三千美金的Facebook视频缩略图信息泄露漏洞

本文我要分享的是我的一个$3000美金Facebook漏洞发现过程。在我决定对Facebook网站进行安全测试之后,我熟读了很多相关的漏洞发现writeup,发...

16500
来自专栏web前端教室

各公司不喜欢招前端新人,但为什么又要去校招呢?

希望十一长假没有让咱们“web前端零基础课0827班”的同学们有过多的懈怠。因为从这几天的作业之中依然可以发现,还是细节方面会有一些问题。

83120

扫码关注云+社区

领取腾讯云代金券