对于一家互联网公司来说，开发一套web前端、ios客户端、android客户端是运营一个项目的起步要求。在以前，实现不同平台的同一套前端业务逻辑需要招聘javascript、java、swift、objective-c等不同语种的工程师进行开发。对于很多初创型公司来说，其开发成本巨大且开发周期漫长是难以承受的。因此急需一种技术能够让创业公司能够以较低成本迅速在多端多平台实现自己的产品创意，迅速投入市场进行试错和验证。 传统的web前端领域在此方面做出了巨大的尝试和努力，也提供了很多技术方案。
一、codova技术
最先提出的方案是phonegap和codova技术。这种方案号称："write once,run anywhere"，其技术原理是建立一个原生的webview，将项目的业务逻辑以web的形式进行开发完成，然后嵌套在webview里头进行运行。用户访问的项目除了主框架外其实内部还是一个个的html页面。
这种方式很好的解决了多端开发的成本和效率问题，一套代码多处运行，而且项目更新只需要更新服务器的web代码即可，用户是无感的。在那个创业如火如荼的时代，很多小型创业公司采用这种方式进行项目的开发。
但是，这种方式始终存在着巨大的性能弊端。
相比较原生应用，codova项目页面的加载速度还是太慢，这个速度的影响瓶颈不仅在于渲染层面，也在于网络加载层面。传统的app进入子页面后，由于页面结构是已经下载在本地，设备只需要将本地的页面结构加载出来，然后调用后台的数据接口进行渲染就行了。每次调用接口通过网络请求过来的数据往往只是一个几十个字节json字符串，加载速度较快。而codova项目每进一个子页面需要都需要将整个页面结构从服务器进行加载，加载完成后再在webview中渲染。这个网络请求的数据量往往在几百kb甚至几兆，尤其是传统的服务端渲染的web项目，每进入一个子页面都需要进行这样一次页面的请求，如果网速较好且设备性能强劲的话，这种情况还好。但是在那个网速和设备设备性能都不是太佳的年代，这种用户体验几乎是崩溃的，其做出来的项目后期运营和推广成本也会巨大。
二、SPA技术
随着技术的发展，为了解决web项目加载速度的问题，前端领域做了更多的尝试。其最为显著的成果就为：spa（siggle page application）。
所谓spa技术其实就是“单页面应用程序”的简称。在以前，即使是在一个项目中，访问不同的路由就需要加载一个全新的页面结构重新进行渲染，而SPA项目只在第一次进入项目的时候加载一下项目的代码，后续操作切换到不同的页面只要是在同一个项目中的都只是在路由控制下试图的渲染，不再需要网络进行页面结构的加载，只需要像原生App一样加载相应的业务数据就行了，如果切换的过程中实现一些动画的效果，在设备性能足够的情况下，基本可以实现接近原生的用户体验。常用的spa框架有：Angular、React、Vue等。
spa技术做出来的项目很好的弥补了传统web项目每次切换页面都需要重新加载dom结构的弊端，嵌入到webview中后，大大提升了用户体验。同时可以具备“开发速度快，热更新”等优点。
但是，SPA技术同样有其瓶颈。由于整个项目的dom结构都是需要在进入项目的首次加载中从服务器中请求过来，因此首次加载的速度和渲染速度很难得到保障，相比较原生的App还是有较大的差距。为了解决这个问题，前端行业也尝试和很多办法，比如在web项目发布之前通过webpack等前端构建工具对代码进行压缩和混淆，还可以对不同模块进行按需加载，这样可以大大降低首屏加载时需要请求的代码量，加快首屏速度。
然而，无论怎么优化，web终究是web，其性能水平距离原生还是有着不小的差距，这样对于很多对于性能有着较为严苛要求的公司，依旧是无法满足需求的。
三、用js开发成原生App
为了保证项目的跨平台性的同时又不影响性能，一种全新类型的前端框架诞生了，目前最具代表性的是：“React Native”和“WEEX”
这种框架其实就是设计了一套前端代码规范，只要按照这种规范去开发项目，它就会将你写的代码转化成能够执行的原生代码，打包过后其实就是一个原生应用。拥有和app相同的性能体验。
我们以React Native为例来解释这种类型的框架，react-native号称：“learn once write anywhere”,注意，此处与codova不同，react-native做不到“write once run anywhere”，在使用RN开发完成项目后还需要对单一平台进行兼容。毕竟，android和ios各方面的差别是比较大的，RN的很多插件都是只能兼容android或者ios单一平台，即使能够兼容双平台，也需要进行一系列的配置。否则项目可能会报错很难成功运行起来。
尽管如此，RN也基本能够实现跨平台90%以上的代码复用率。相比原生也能够大大缩短开发周期，节省开发成本。相比Codova，也实现了完全媲美原生的交互效果。可谓是汲取了两种方案的共同优点，是目前跨平台开发App最值得推荐的一种解决方案了。
本文集就是介绍一个我在学习React-Native过程中开发的一个跨平台App“狗狗说”，这个项目页面比较简单，但是调用了许多原生的接口，如：录音、选择相册、录制视频等原生功能。在学习和开发项目的过程中，踩了很多的坑，总结了很多的经验教训，也收货了很多知识和心得体会。本文集就是为了把这些收货记录下来并分享出去，共自己日后参考的同时，也期待能够给还在坑中徘徊的朋友们带来点帮助。
最后，附上我已经完成的该项目github地址：gougouTalk
欢迎访问！
网友评论