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中文站投稿或者参与内容翻译工作，请邮件至[email protected]。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。