转载

Reapp——使用React开发混搭移动应用

过去的两周时间里，围绕Facebook发布React Native（一个能够借助JavaScript开发原生移动应用的React.js扩展）的相关热点铺天盖地。而其中的热点之一就是Reapp向React爱好者们推出的一个移动应用开发的替代方案。

React是一个构建用户界面的客户端JavaScript框架，由Facebook最初开发并开源。React使用一个称为 JSX 的声明式语法和JavaScript语法扩展来描述HTML布局。每个React组件都通过属性和状态得以支持和配置，对它们的改变将通过单向数据流触发更新。这些更新是通过虚拟DOM 优化的，它区别对待不同的组件，确保只有状态变换导致的那些修改才得到刷新。

表面上，Reapp与React Native有着惊人的相似之处，二者都使用React来创建应用程序用户界面的框架。然而，在底层机制上这两个框架之间却具有明显的哲学差异。React Native 将React组件绑定到原生UI控件中，构建与设备操作系统匹配的界面。而Reapp却是将React组件绑定到一个跨平台的UI-Kit来创建混搭应用。

读者可通过该项目的 Kitchen Sink 样例应用来感受Reapp UI-Kit的表现力与强大。特别是该应用的“Mailbox”效果，它展示了基于UI-Kit的Reapp及其React如何用于快速定义邮箱风格的用户界面：

var Mailbox = React.createClass({   render() {     return (       <div>         <SearchBar defaultValue="" />          <List styles={{           self: {             paddingLeft: 25           }         }}>           <ListItem             title="Erinn Silsby"             titleAfter="8:45 PM"             titleSub="New messages from Jane Doe really long title should ellipse"           >             Lorem ipsume dolor sit amet, consectetur adipiscing             elit. Nulla sagittis tellus ut turpis condimentium,             ursula major sagittis.           </ListItem>            <ListItem             title="Phebe Matz"             titleAfter="8:45 PM"             titleSub="New messages from Jane Doe really long title should ellipse"           >             Lorem ipsume dolor sit amet, consectetur adipiscing             elit. Nulla sagittis tellus ut turpis condimentium,             ursula major sagittis.           </ListItem>            <ListItem             title="Derek Boulware"             titleAfter="8:45 PM"             titleSub="New messages from Jane Doe really long title should ellipse"           >             Lorem ipsume dolor sit amet, consectetur adipiscing             elit. Nulla sagittis tellus ut turpis condimentium,             ursula major sagittis.           </ListItem>            <ListItem             title="Samantha Canor"             titleAfter="8:45 PM"             titleSub="New messages from Jane Doe really long title should ellipse"           >                      // ... truncated for readability ...           // ... complete code sample available at https://github.com/reapp/kitchen-sink/blob/master/app/components/kitchen/Mailbox.jsx          </List>       </div>     );   } });

上述代码片段举例说明了一个自定义邮箱组件如何通过三个Reapp UI-Kit组件——List、ListItem以及SearchBar——快速搭建而成。通过Kitchen Sink样例应用的在线版本可查看生成的用户界面。

然而Reapp并非只是一个带有React编程接口的UI工具套件，它还提供了其他处理非UI关注功能的组合包：

reapp-routes ——用来生成对象树的模块，这些对象代表路由或文件路径；
reapp-component ——支持装饰模式和工厂模式的依赖注入模块；
reapp-ui ——包含UI-Kit；UI-Kit是一整套React组件，通过主题支持动画和换肤，以允许平台特定风格。所有可用的UI组件都在Reapp站点列出。

Reapp的目标是通过合并大量主流JavaScript库来最大化开发者的生产效率。为了简化依赖管理，Reapp包含了 Webpack 模块绑定器，其使用“代码拆分”来优化在运行时要加载的依赖。另外，Reapp还捆绑了日益流行的 6To5 转译器，其允许开发者用ES6语法编写JavaScript代码，但转译成ES5语法，保持兼容性的同时最大限度提高开发效率。

Reapp框架的alpha版本已提供使用，并可通过npm 安装。其同时是一个开源项目，源代码放在 GitHub 上。

随着该项目发布alpha版本，开发人员也发布了两个样例项目，以演示其功能和用法。Hacker News 样例程序是一个功能完整的HackerNews软件新闻网站客户端应用， Kitchen Sink 样例程序演示了Reapp UI-Kit的功能。这两个样例程序的源代码都可以通过Reapp Github 仓库获取。

查看英文原文： Reapp - Hybrid Mobile App Development Using React

感谢马国耀对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。

正文到此结束