[Web前端] WEEX、React-Native开发App心得 （转载）

转自： https://www.jianshu.com/p/139c5074ae5d

2018 JS状态报告： https://2018.stateofjs.com/mobile-and-desktop/react-native/

WEEX、React-Native开发App心得

起因

最近公司准备使用weex或者react-native进行跨平台开发，并不是要做新的app而是准备用这种方式代替原来webview+h5内嵌这种方式，这种hybrid的方式，存在于上古年代了，性能堪忧，还要适配安卓端复杂设备种类，各主流电商的webview，虽然在前一段时间，安卓统一使用了传说微信、qq都在使用x5-webview，但是效果并不是很明显，腾讯浏览服务是要做到统一安卓端的webview，但是腾讯的x5的条件是，该安卓手机已经安装了腾讯x5浏览器，换句话说就是，你的安卓手机上面，至少要有微信、qq、qq浏览器等之一的拥有腾讯浏览内核的产品，虽说覆盖面很广。但是，考虑到我们公司的用户大部分年龄比较大，可能相比较而言覆盖范围就不那么广，收到投诉的也会比较多，毕竟我们跟他们的沟通成本也比较高；
直接集成腾讯x5内核的话也存在诸多问题；所以还是需要一条跨平台之路；

分析

纵观现在主流开源的跨平台之路，有两条：一条是由facebook开源的基于reactJs的react-native；另外一条是由alibaba开源的可以说是基于VueJs的Vue-native，不不不，口误，是WEEX；那么我们分析一下应该如何选型呢，我刚开始也是看了无数的评论，怎么说的都有；一般分为两类，一类是切身体验过从搭建到开过程的这类评论会比较有营养，不过会看不太懂；另外一类，就是无脑喷阿里开源，我感觉这类评论代入感也比较强，各种举例、论证，有理有据而且通常恢复数量被点赞数量也比较高，说什么,“kpi产物”、“阿里自己都不用啊”、“文档仨月都不更新一次啊”、“刚出来赶紧找的靠谱的接盘”、“手淘、天猫都是用的rn啊”；我不敢想，可是仔细一想，还真是这么回事儿；
总之各大论坛贴吧逛完一遍，你绝对不想用weex了；我这么一看不行啊，毕竟要看看两种方法那种更适合，所以，我跟大家想的一样，首先选了WEEX；

WEEX的上手体验

真的是不用不知道，一用吓一跳，我是在windows环境下进行开发的，我可以很负责任的说，按照weex官方提供的文档在windows下直接搭建开发环境很难一次点亮；很嘲讽啊，文档也是一如既往的烂啊，好多应该比较细节的东西，文档上面往往是认为你是大神，或者说你个屌丝用个windows本还想搞weex？经过一番又一番的折磨，我终于看不下去了，这个文档光看就很晕，很想吐，还是github上找几个案例直接试一下，案例还是很好的，多数的都是使用weex构建一个新的跨平台应用，启用大面积使用了vue的语法，开发起来确实也是很简单；看完demo之后，回过头来再看weex文档，好像觉得文档看着还不错，虽然简单了点儿，好像该说的也都说了，没毛病；于是可以自己动手试一下了，在这里weex面向的主要是广大的web前端开发者，精简的使用方式，路由的配置，weexpack的使用调试方式页更适合web开发者们使用；weex基本上提供了两种使用方式，一种是从零开始开发一个跨平台的app，另外一项中是集成到现有的app当中，原理基本是weex经过编译会生成两个bundle.js一个是供web端使用的，另外一个是提供给安卓、ios使用的；毕竟是号称，write once， run everywhere；weex引入了vue runtime js，先不说web端的实现这个应该去直接看vue会更好，直接说native端的实现，js作为连接原生控件与视图层的纽带，代替了以往使用java，oc，swift直接调用原生控件，这样生成的ui层依旧是原生的，和html毫无关系的，至于哪些div，image只不过是名字和html标签一样的组件而已，也没有了dom对象的存在，因为实际的开发环境不是浏览器而是基于原生，所以jquery以及它的一些插件是用不了的，大家一定要明确这一点，无论weex还是react-native的实际开发的对象都不是浏览器了，所以，我们不要把平时在浏览器是开发用到的东西都带进来，所以浏览器中那些标签在weex或者react-native中也就没有任何的意义；明确这一点之后，我们就可以进行开发了，遇到的一些坑往这个方向靠基本也就容易解决了。吐槽一下weex的错误提示真的是不行；

react-native上手体验

react-native高大上的facebook开源，让人诟病的BSD +专利许可证，虽然react已经切换到mit但是react-native仍旧是BSD +专利许可证；这一点使大家在开发之前一定要注意的。
react-native的开发，我不想多说什么，说多了没有用，不如直接看文档，毕竟文档美如画、上手体验快如狗。社区、视频、教程也多如牛毛，就不一一列举，唯一建议的一点就是要想深度使用react-native请熟读并背诵reactJs以及redux相关文档谢谢；了解些需原生开发，或者说原生开发者们更适合使用react-native；真的原生开发用了react-native都是爱不释手；关于集成到现有应用貌似不如weex；毕竟人家weex就是指着这个技能活着的；写几个页面这种工作就交给weex吧；

总结

如果你现在想要从头开发一款app，那么我可以很负责任的向你推荐react-native，很好用，文档很全，你要填的坑，别人基本都给你准备好土了；如果你是想我们公司的需求一样，只是想干掉hybrid，那么weex绝对是不二之选，首先，weex够简单，web开发者就可以先胜任；其次，不需要安装复杂的环境，运行环境简洁、调试工具也还好，容易做降级处理，特别适合开发单个页面；

续

最近WEEX官网也发生了巨大的变化，英文文档也相当的全面，部分的英文文档还没有全面翻译成为中文，还要些日子，完全可以胜任生产中一些简单的场景、但是依旧不建议开发完整app的开发者使用，还有很多值得考量的地方，坑，还是多；

2018/08/01

在使用weex完成一个完整的app的之后，我们觉得weex提供给我们的更多的是一种解决方案，我们仍需要投入资源与成本到学习和开发中，所以，综观前端技术百花齐放，找到一条适合的路很重要；或者说当我们找不到非常适合的方案的时候，采用局部最优解，直到整个项目完成，它不一定是最好的方案，但往往是行之有效的。

2018/08/21

距airbnb宣布放弃使用react-native，回归原生技术，已经有两个月了，airbnb对rn的贡献，众所周知，虽然airbnb回答的很委婉，但是暴露出的问题还是很明显的，到底有没有必要走这条跨平台之路，项目规模的大小对跨平台的影响，以及体验，后期的维护，版本的迭代，版本的发布，处理安卓ios之间的差异，以及airbnb在博客中提到的致命的问题，即，"Airbnb 放弃使用 React Native 的主要原因是 React Native 未能实现完全的跨平台抽象，有时候仍然需要针对特定平台单独编写代码来解决问题。这就间接要求他们的工程师必须熟悉三个平台才能真正用好 React Native，然而绝大多数开发者只熟悉一两个平台，久而久之便引发了一系列的问题"，这些问题我们就真的都能解决嘛。这不禁会引发我们对跨平台之路的重新思考，这一步走出去，回头也是需要很大的勇气的。

2019/01/28

据春节放假还有6个工作日，这里有一份来自权威网站的报告，大家查收一下，以便于了解一下React Native的现状，总的来讲RN在国外依旧很火，但是实在是不太适合承载大型应用，这也是很多公司从rn中迁移的原因之一，报告地址：https://2018.stateofjs.com/mobile-and-desktop/react-native/

2019/02/14

一度消声灭迹的Dart再放大招，随着Dart 2.1.0稳定版本的发布，和Flutter1.0的加持，Dart再度唤醒了广大前端、后端开发者以及客户端开发者对跨平台的热忱。谷歌一直秉着的‘一统江湖’的战略从来没有停过，从浏览器到 OS 再到 go语言 的成功。我们可以预见得到，未来的3-5年内Dart以及Flutter所能取得的成绩。