使用React, React Native和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客户端，简单到只在用户受权登陆后在首页显示"Hello {username}"。 但这个简单的例子基本涵盖了先后端程序交互的各方面，其中，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平台。