同步自我的博客

去年三月份,以及十一月份,我分别做了两个React Native(下称RN)的项目,一个是一个很简单的充值页面,发上线以后就基本不维护了,暂且不表;另一个是把我们客户端首页的技术方案由Hybrid迁移到了RN,跟进并维护了几个版本以后,又决定切换回了Hybrid的方案,以下记录一下我这段时间的心路历程以及我对RN的看法。

背景

我们首页迁移RN主要有以下几个原因

  1. 公司的架构组对RN的支持度比较高,有一个比较完整的解决方案,包括打包体积的优化,封装了redux和路由,方便业务方的开发

  2. 我们的前端代码优化力度不够,bundle的体积很大,首屏会比较慢,在AndroidWebView里尤其明显,而且代码时间也比较久,想要拆包优化也需要大量的时间去测试,然后之前做的RN项目几乎是秒开,给了我们很大的诱惑力。

  3. 前端的框架是React,前期调研了一下觉得切换的成本很低,这是我们最终决定迁移RN的原因,也是我们预估的最失败的地方,遇到的问题我在之前的博客里有提到过。

就像我之前的博客所说,我花了大概20天的时间做了这次迁移,其实真正估时的时候并没有这么久,主要是在开发上踩了一些坑,项目最终上线后的效果也很棒,首屏的渲染时间快了很多,尤其是Android,就当我们为此庆祝并且准备继续迁移的时候,问题慢慢展现出来了。

问题

主要的矛盾在于要维护两个工程。

咱们的首页既要服务于Touch端,又要服务于客户端,之前的客户端是Hybrid方案,矛盾并不突出,只需要在我的前端代码里对客户端做一些特殊处理即可,但是迁移RN以后我们就需要维护两套代码了。就像我之前说的,我们过于乐观的觉得,从React的代码到RN其实并不需要做过多的转换,甚至考虑着自己写一套转换的脚本,实现无缝对接,现实却是来了当头一棒。

比如,css无法复用,Android下的overflow:visible就是不可用的,比如不支持百分比布局,比如不支持fix,导致我们在两边的切图还是不能使用一套方案。

又比如:加大了需求开发的成本和时间,比如PM有一个需求,单做前端可能2pd,算上RN可能就是3pd,对于一个创业团队会拖慢自己的进度,而且只能找有Mac的同学来做这个需求 = =。

就不说调试难,以及开发一些需求的时候需要请教客户端的同学是否支持然后去找对应的方案了。而如果是Hybrid的方案,只需要webnative讨论好接口,分别开发即可。

最终,在维护了几个版本的RN后,我又毅然的将方案改回了Hybrid

我的看法

这是一次失败的尝试,却不是一次无用的尝试,在我看来,React Native是一项非常棒的技术,我们不需要针对客户端开发两套代码,而且整体体验是优于Hybrid的。但是我还是觉得采用这项技术之前大家要考虑清楚,我个人觉得,对于大公司的大团队,业务需求不是特别紧的团队,都很适合采用这一项技术,对于我们反而是不太合适了。

经过这件事我对技术选型也有一些思考。技术选型时,应该选择根据自己的团队,自己的需求,花费很多时间调研以后再去决定,而不是选择一些火的方案。比如我们之前移动端选择使用React,就是觉得以后还是要做自己的客户端,用了React以后切换RN会是一件很小成本的事,结果现在还是采用的Hybrid方案。现在又因为React包体积很大,不得不对项目再做一些优化。

希望大家在选择RN时,也考虑清楚,我是否对Web的需求很低,我是否有很强的跨平台需求,我的技术人员是否可以hold住一些场景等等,而不是因为它很火选择它。

我为什么暂时放弃了React Native相关推荐

  1. React Native 调研报告

    Facebook三月份开源了React Native iOS平台的框架,让移动开发人员和web开发者都各自兴奋了一把:native的移动开发者想的比较多的估计是Facebook的那句:"le ...

  2. 最火移动端跨平台方案盘点:React Native、weex、Flutter

    本文原文由"恋猫月亮"原创发布,原题为<移动端跨平台开发的深度解析>,本次重新整理后,为了优化阅读体验,内容略有改动,感谢原作者的无私分享. 1.前言 跨平台一直是老生 ...

  3. 构建了我的第一个React Native应用程序之后,我现在确信这是未来。

    by Taylor Milliman 泰勒·米利曼(Taylor Milliman) 构建了我的第一个React Native应用程序之后,我现在确信这是未来. (After building my ...

  4. Airbnb 宣布弃用 React Native!

    web前端教程 用大白话,来讲编程 作为 React Native 框架的先行者和倡导者,Airbnb 公司今日发布通告,决定放弃使用 React Native 技术,重新投入资源和精力到原生开发当中 ...

  5. React Native 0.59.x新特性解读

    概述 众所周知,在现在的前端技术开发栈中,跨平台开发是一个重要的课题,不管是老牌的Hybird还是最近流行的RN.Weex还是Flutter,不得不说,现在前端和客户端的界限越来越模糊. 最近在写&l ...

  6. 全网最全 Flutter 与 React Native 深入对比分析

    作为 GSY 开源系列的作者,在去年也整理过 <移动端跨平台开发的深度解析> 的对比文章,时隔一年之后,本篇将重新由 环境搭建.实现原理.编程开发.插件开发.编译运行.性能稳定.发展未来 ...

  7. 从 React Native 到 Flutter,移动跨平台方案的真相

    转载自「LeanCloud通讯」公众号 作者:LeanCloud 郑鹏 2018 年 12 月,Google 发布了 Flutter 1.0 正式版,似乎再次点燃了人们对移动跨平台开发的热情.上一次出 ...

  8. React Native 的未来与React Hooks

    近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想聊聊 React-Native 的现状. ...

  9. Airbnb: React Native 从选择到放弃

    Airbnb 最近在 Medium 上发布了一系列文章详细描述了 Airbnb 与 React Native 从选择到放弃的整个心路历程. React Native at Airbnb The Tec ...

最新文章

  1. python3.6for循环_使用parser_args值输入for循环(python3.6)
  2. apns 服务器 php,PHP技术来查询APNs反馈服务器
  3. 有序链表转换二叉搜索树Python解法
  4. 哔哩哔哩校招末班车,offer爆率超高,来不及解释了,快上车!
  5. Python3.x:pip install pymssql安装时出错
  6. Indent Guides插件格式代码
  7. ccs加载out文件,TI CCS3.3 out文件转bin文件说明
  8. mysql常见练习题45题
  9. Maven的基本概念(三)
  10. hourglass论文_论文笔记 Stacked Hourglass Networks for Human Pose Estimation
  11. 在 Light Trail Adventures 中探索失落已久的复古未来沙漠城市
  12. C语言10道入门题集
  13. OpenGl学习之glRotate函数
  14. Lua string.split
  15. react里子父通信和父子通信的实现
  16. python适合女生吗-女生学数据分析好吗?数据分析适不适合女生学?
  17. 计算机网络机房建设过程中单独设置接地体时,必备的IDC机房建设流程解析明细!...
  18. Android面试基础技能罗列,谈谈我认为的高级Android开发到底应该是怎样的
  19. L1-007 念数字 (10分) 输入一个整数,输出每个数字对应的拼音。当整数为负数时,先输出fu字。十个数字对应的拼音如下: 0: ling 1: yi 2: er 3: san 4: si 5:
  20. java 泛型service_java泛型

热门文章

  1. 用secureCRT操作ubuntu终端
  2. Java VS .Net 程序员的困惑 (转)
  3. Exchange动态同步中的INTERNET_29错误代码
  4. 架构的“一小步”,业务的一大步
  5. Windows安全策略
  6. NoSQL介绍(三)
  7. Windows 10版星巴克应用现身官网
  8. hbase设计方案1
  9. Disruptor技术调研之配置参数一览
  10. Android 访问WebService