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 ）关注我们，并与我们的编辑和其他读者朋友交流。