Data+AI时代,如何打造下一代数智平台? 了解详情
写点什么

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

  • 2015-02-28
  • 本文字数:2044 字

    阅读完需:约 7 分钟

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

2015-02-28 08:247081

评论

发布
暂无评论
发现更多内容

即时通讯IM软件推荐:五款适合企业内部使用的IM即时通讯软件

BeeWorks

移动应用平台,企业移动门户就选WorkPlus

BeeWorks

参加AIGC 应用实战营的一点感受

Lee Chen

同型号LED全彩屏价格差异的原因

Dylan

价格 LED显示屏 全彩LED显示屏 led显示屏厂家 市场

AIGC应用训练营毕业总结

MiracleWong

训练营 AIGC

《Programming from the Ground Up》阅读笔记:p103-p116

codists

汇编 编程人

PIRF-407-Food for thought

Echo!!!

English

CentOS全面停服,国产化提速,央国企信创即时通讯/协同门户如何选型?

BeeWorks

10W数据导入该如何与库中数据去重?

不在线第一只蜗牛

数据库 数据分析

天润融通助力呷哺呷哺:AI技术赋能3000万会员精细化运营

天润融通

中国数据库的崛起:从本土化挑战到全球化机遇

繁依Fanyi

数据库

What's new in PikiwiDB(Pika) v3.5.5

apache/dubbo-go

redis Pika

HTTP与HTTPS的不同

德迅云安全杨德俊

Redis面试都卷到C语言去了。。。

江南一点雨

sunpump交易所做市机器人

区块链技术

SunPump刷量机器人

区块链技术

IM即时通讯软件,企业即时通讯系统就选WorkPlus

BeeWorks

WorkPlus:为企业内部打造高效沟通的顶级内部通讯软件

BeeWorks

《AIGC应用实战营》毕业总结

AI应用

2024-08-24:用go语言,给定一个下标从1开始,包含不同整数的数组 nums,数组长度为 n。 你需要按照以下规则进行 n 次操作,将数组 nums 中的所有元素分配到两个新数组 arr1 和

福大大架构师每日一题

福大大架构师每日一题

我用 ChatGPT 学 Redis,差点蚌埠住了!

码哥字节

Java redis 底层原理 ChatGPT

目前市面上最好用的分布式存储体验(天翼云 HBlock)

武师叔

HBlock

Reapp——使用React开发混搭移动应用_移动_Matt McComb_InfoQ精选文章