BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Matt McComb 关注 0 他的粉丝 ,译者 卢俊祥 关注 0 他的粉丝 发布于 2015年3月1日. 估计阅读时间: 9 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

过去的两周时间里,围绕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)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT