使用React,ReactNative和Redux实现跨平台共用Web,iOS,Android的核心代码

原文发表于blog.xuyuan.me, 转载请注明。

相信使用同一个平台和技术开发Web, iOS, Android是很多程序员的追求，也是很多创业公司和产品经理的梦想。而如果核心的业务逻辑代码能够跨平台共用，那更是梦寐以求的事情了。试想，创业公司不用再忍受Android/iOS应聘者的拒绝，只要招几个互为备份的Javascript开发就可以搞定跨平台开发；同一个业务Bug不再担心iOS改好了而Android还没fix，只要改一行JS代码就可以修正各平台；iOS App可以实现即时部署，再也不用在线上bug火烧眉毛的时候还得等待苹果漫长的审核期；如此种种，程序员和产品经理终于可以和谐相处了 :D

好吧，上面的这些场景还没有完全实现，不过Facebook在2015年推出的React Native让它们看起来更有希望实现了。曾经，开发者们尝试通过各种方式来进行跨平台开发，例如移动端HTML5，以及用C++实现核心业务逻辑等等。但前者在移动端的性能无法匹敌原生程序，用户体验有明显差别，后者会导致开发和维护的技术成本增加。而React的出现至少让跨平台开发多了一种选择，而且是看上去更美好的选择。

开源实例

本文以两个程序例子(NodeTwitter和ReactTwitter)来实现一个简单的Twitter客户端，简单到只在用户授权登录后在首页显示&＃8221;Hello {username}&＃8221;。 但这个简单的例子基本涵盖了前后端程序交互的各方面，其中，NodeTwitter是服务端程序，负责与Twitter的OAuth和REST API进行通讯；ReactTwitter是前端程序，使用React展示Web界面，React Native展示iOS和Android App界面，而跨平台的界面通过Redux共享代码与服务端NodeTwitter进行交互。详情可以参照下图：

本文的主旨是尝试利用Javascript技术栈进行跨平台的开发实践，并不包括如何使用React进行UI开发等。关于React和React Native的开发教程，网上已经有了很多很好的文章 1 2，大家可以参考。

技术栈

• IDE: Sublime Text 3
  在尝试过Webstorm, Atom, VS Code之后，还是觉得Sublime Text最轻便灵活。在Javascript各种框架乱战的时代，似乎任何一个试图做到大而全的IDE都或多或少会有一些缺陷。相反Sublime Text的小巧以及丰富的插件使它能够应对各种要求。未来看好微软出品的VS Code，也许终有一天会出现类似Visual Studio或Xcode的Javascript事实标准IDE。

• 静态代码检查：ESLint + SublimeLinter

• 服务端：Node.js + Express

• Web端程序：React

• App端程序：React Native

• 共享业务逻辑和数据：Redux

  • react-redux: 进行React与Redux的绑定，例如将业务数据和函数绑定到UI

  • redux-thunk: Redux中间件，用以推迟代码的异步执行，例如在数据访问完成后再执行回调

• 编译，部署和ES6支持：Webpack + Babel

• 实时调试：react-transform-hmr

运行界面

NodeTwitter和ReactTwitter的例子可以在Github上找到，包括了Web, iOS和Android平台。