一个“三端”开发者眼中的React Native

0
IOS Swift React Cocoa ico 14565 次浏览
先上一个ppt,不过好像要翻墙,内容跟本文基本一致,看不到可以先忽略

这里是我临时写的一个React Native的试水项目,打开后等会会看到gif动画演示。 https://github.com/xinyu198736/htmljs-ReactNative 欢迎star和watch。

三端的三观

大家别拍我,起这么个diao渣天的标题是为了吸引你进来,大家不要太在意用词。先介绍下我自己,我是一个普普通通的开发者,平常喜欢自己捣鼓 技术,所以涉猎比较广,一些不太常用只是摸过几腿的技术就不说了,至少现在每天都摸的技术大概有三端:前端,服务端,客户端。这篇文章是我作为一个“三 端”开发者角度对React Native的一点点看法,不会太具体,但是希望对大家的认识能有个不同角度的指导。

作为一个ios开发者,我的经验大概有2年左右,虽然不是专业选手,但是一个app开发需要涉及到的东西基本都接触过,坑也趟过不少,其实ios开发的体验还是不错的,熟练了以后构建app还是很快的,不过里面也有不少麻烦的地方,例如:

  • 代码量大(那长长的方法名)
  • 布局麻烦(特别是AutoLayout,光理解这个概念就要好几天,而且很难用)
  • 编译调试耗时(比android快很多,但是还是很慢)
  • OC语言和Cocoa框架有些冗余的地方(一堆堆的属性和继承过来的方法)
  • 用代码定义样式麻烦(cocoa给UIView加点阴影边框设置字体等,那代码不忍直视)
  • 有时候定位问题也挺难,动不动就报个 main thread的报错,完全下不了手(可能是我没掌握好方法)
  • pods管理代码,安装个代码等半天,有时候还要翻墙,很不稳定,跟npm之类的没法比。

而对于前端来说,还会对ios的开发有些其他的疑问,例如:

  • 要是能用css写样式就好了
  • 要是能实时调试界面样式就好了
  • 要是支持闭包就好了
  • 要是回调写起来跟JS一样方便就好了(指oc中的block)
  • 要是代码跟js一样简洁就好了

而React Native其实正是迎着这些问题而上,然后结合三端的优点,搞出来的一个移动端开发框架。

且来看下他有哪些动人之处。

美丽动人的RN

我拿起React Native的第一次,就被它彻底打动了,抛开他的语法,对于前端来说奇奇怪怪的jsx(后面会讨论),它的确解决了我作为一个三端工程师在不同技术端切 换的时候备受的一些困扰,所以那天晚上,我完全没睡着,翻来覆去的,然后跑到朋友圈发了句:“激动人心的技术,未来的发展方向”。第二天早晨,提前一两个 小时就醒过来,继续写了几句RN,那酸爽,那心情。可能作为一个纯粹的前端或者纯粹的ios开发,很难理解,但是对于一个游走在三端的工程师,我看到了一 个真正意义上的统一方案,而且,它足够简单。

React Native的上手很快,去看一下它的文档,总共就一点点:入门,组件,功能。每个页面都短短的一两页,的确就是这么简单。不过这里我并没有打算把这篇文章写成一篇入门教程,所以并不会教你如何构建一个简单的RN应用。

大概总结来,React Native让我觉得值得一提的动人之处:

1.把cocoa里面的controller和view统一成了component,其实RN里只有component这个组件概念,既可以扮演页面级别的组件(controller),也可以扮演一个模块级别的组件(UIView)。入门门槛降低了很多。

2. 动态绑定,这个React的基本功能,被带到了客户端开发中来,数据和视图是动态绑定的,数据发生变化,视图会跟着变化,很多操作视图的代码都可以省略了。

3. 引入了类似于CSS(一个子集)的样式管理,可以内嵌到模块,也可以全局使用,定义样式变得非常简单通用。

4. 引入了Flexbox布局,把ios本身复杂的AutoLayout简化,使用很方便,学习起来也更简单。

5. 引入了方便的npm管理,有大量现成的nodejs包可以用(例如moment,underscore等常用模块),还可以把自己项目模块搞到内部npm上做通用组件,另外,npm上还有不少别人写的react native的插件。例如下面这个。

6. 第三方组件里有一个可以把icon font引入项目的组件,可以在任何显示图标的地方直接用icon font显示,灰常方便。

7. 调试很方便,一次编译后,每次改了js代码,只需要在模拟器里command+R即可重新加载代码。有问题会直接报错,里面有代码行数等详细信息。

8. 完整封装了各种js内置的方法,例如:setTimeout,setInterval,XMLHttpRequest,localstorage,console.log等,都是用oc原生方法封装的。

9. 引入ES6的支持,可以使用各种新特性,例如最常用的箭头函数,解决this作用域乱套的问题。

一口气列举出这么多动人的地方,ReactNative这姑娘还真是不一般,简直校花级别。(小插曲,我觉得React性格就是个姑娘,感性而 简单,而Angularjs则像是一位硬汉,笨重但是踏实而且很全面)。不过,人无完人,现阶段ReactNative也有不少缺点,有些缺点可能会非常 制约他的发展,急需改进,不过还好RN目前只是开发阶段,并不是正式版,该有的都会有的。

并非完美无瑕

我看来,目前ReactNative至少有这么几个比较大的问题:

  • 组件不全,第三方组件也不全,遇到某些特殊功能,需要捣鼓很久,例如摄像相关的,文件读写,文件上传之类的组件。
  • 性能并非媲美原生,还是有一些损耗的,特别是交换大数据的时候,例如读取相册。
  • 只有ios版,限制了在某些公司生产环境的使用。android版不知道目前什么状态。
  • ios和android代码并非通用,有可能会需要维护两套,或者在代码内做一些判断。
  • 并非网上大家说的,写一次代码,多端通用,网页版和客户端版完全不是一个概念,只有部分代码可重用。
  • 把代码都打包到bundle里面,不知道苹果对这种开发方式是否会不太喜欢,甚至拒绝上线。
  • 实际开发的时候,还是需要了解底层原理,自己开发跟原生桥接的组件,这个对普通前端来说是一个很大的挑战。

有些问题,随着时间的推移会慢慢解决,有些问题,则很难说,例如开发方式的问题。

对前端开发和客户端开发意味着什么?

ReactNative一出来,有的人一头钻进去开始研究,大部分人却只是稍作了解,然后就投入到了论战的圈子里。例如大家对React的 jsx开发方式的批判,对React组件化开发方式的批判。其实还是那个问题:任何脱离场景的技术讨论都是耍流氓。React并非万能药水,它的出现不是 要大一统整个前端界的所有问题,它事实上只是为了解决一小类问题,所以不要指望你的产品能够用React来解决那些他并不擅长的问题。而对于 ReactNative来说,其实我觉得这正是体现React价值的一个非常吻合的一个场景。React在这个问题中扮演的角色,就是上面讲到的他解决的 那些问题,足够多,而且很完美,这就是他存在的价值,不容否认。

所以,大家要从理性的角度去看待新技术,不要一味排斥,不要套用现有的思维和场景。当你用这样的态度去看RN,你就能看到他的优点和缺点,自做抉择。

我从一个前端的角度来看ReactNative,有这样的感觉:

  • 它不是万能药水,只是一种高效的解决方案,不要期望它为你解决了所有问题,要不要使用,还是需要根据场景衡量,而不是脱离开来说它是好的或者是坏的。
  • 事实上,目前看来,客户端开发更适合写RN,因为要了解客户端的那套开发理念,对前端来说成本挺高,而对于客户端开发,成本只是理解一个语言。
  • RN跟Html5没有冲突,二者场景并不一样,它要取代的是本来客户端开发的部分工作,而不是H5页面,因为在这些场景下它并没有明显优势。
  • 对于遇到瓶颈的前端来说,它是一个很好的扩展自己技术栈的方向,有得玩,而且很好玩。

从一个客户端开发的角度来看:

  • 用ReactNative的确简化了很多OC开发中的繁琐步骤,比swift也是更胜一筹。
  • JS、React社区的活跃度很高,有很大的开源组件开发空间,是一个不错的参与开源社区的机会,大家很需要一些桥接原生的新组件。
  • NPM真的是太方便快速了!社区里无数可用的工具库,在OC的世界里可不常见。
  • RN是前端侵占客户端开发的触角么?其实很难说,它跟NodeJS一样,试图侵入另一个领域,但是深入是非常难的,大部分人浮于表面,反而帮你承接了最恼人的顶层业务部分。
  • 不过你应该会觉得js真不严谨,而且回调很蛋疼,闭包很奇怪,作用域很难理解。也许是时候抛开自己旧时代对js的理解了,现在ES6也是一门很先进的语言了。

未来的开发模式?

最近只是在试水,踩坑,然后我真的准备在公司里把这个事情推动起来,因为我觉得它的确是有意义的,对开发效率有非常明显的提升,不过现阶段还只 能是尝试,毕竟它没有发布正式版,然后还只有ios。不过踩坑也是为了积累,正式版发布后我们就可以快速切入了,到时候就会走的快人一步。

不过可以想象一下未来在生产环境的开发模式,跟NodeJS用来做中间件类似,其实RN最后应该会扮演一个承接前端业务的角色,这部分开发工作,可以是前端来做,也可是客户端来做,主要是用基础组件完成业务开发,其实就类似于中间件的形式。

而客户端开发的主要工作是构建基础组件,封装一些原生桥接的组件供RN使用,基本上是通用组件,应该是一个全公司级别的客户端架构组的概念。

前端做表层业务 + 客户端做底层组件支持。Perfect,还真是有点期待呢!

不扯蛋,埋头去学

不要总是试着去评论一个技术,而是在大家都在学习的时候赶紧迎头赶上去,学习总不会白白浪费的,你看那些大牛,虽然他们以前学习的技术一直在不断被淘汰,但是他们啥时候掉过队。

列一些资料:

看个差不多就先试着写个app出来,边做边学,乐趣无限

另外欢迎加入ReactNative QQ群:456662818

 

请尽量让自己的答案能够对别人有帮助

4个答案

默认排序 按投票排序