10 月 23 - 25 日,QCon 上海站即将召开,现在购票,享9折优惠 了解详情
写点什么

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:247191

评论

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

走进天太|加速智能生产力落地 让机器人随处可见

科技之家

公有云计费套路多?这里有一份破招详解

焱融科技

一文搞懂Python上下文管理器

曲鸟

Python 7月月更 上下文管理器

工程师世界的《原则》,Quora创始人豆瓣9.2分神作!

博文视点Broadview

搭建帮助中心,推动SaaS企业发展

Baklib

SaaS 客户服务 帮助中心 文档管理

2022年云管理软件用哪个好?贵吗?功能有哪些?

行云管家

云计算 企业上云 云管理平台 云管理

2022年新型显示OLED行业发展洞察

易观分析

OLED

SpEL快速上手及实践

转转技术团队

Java spring 后端

东方甄选品控翻车,如何通过智能协同的供应链建设建开启可持续商业模式?

数商云

数字化转型 供应链 企业数字化

这么强?!Erda MySQL Migrator:持续集成的数据库版本控制

尔达Erda

数据库 程序员 开发者 云原生 MySQL 运维

【计算讲谈社】第五讲|不止能上路,更能做好服务:自动驾驶产品规模化的问题定义

大咖说

人工智能 自动驾驶 阿里云 科技

帮助文档——助客户快速了解您的产品如何使用

Baklib

【7.1-7.8】写作社区精彩技术博文回顾

InfoQ写作社区官方

优质创作周报

2022 开放原子全球开源峰会 OpenAnolis 分论坛携干货来袭!

kk-OSC

centos 开源 龙蜥操作系统 开放原子全球开源峰会 OpenAnolis

细数下,FinClip 6月都干了啥

FinClip

Flink 引擎在快手的深度优化与生产实践

Apache Flink

大数据 flink 编程 流计算 实时计算

云脉芯联加入龙蜥社区,共建网络“芯”生态

OpenAnolis小助手

开源 芯片 龙蜥社区 CLA 云脉芯联

音视频通话前的网络及设备检测该如何操作?

ZEGO即构

音视频开发 通话检测

内部排序——交换排序

乔乔

7月月更

找论文参考:机器视觉会议和期刊

AIWeker

人工智能 7月月更

中移链Java-SDK实战使用

BSN研习社

区块链、

关于TCP与UDP你应该知道的

是乃德也是Ned

7月月更

ACM MM 2022 | 腾讯优图11篇论文入选,含盲超分辨率算法等研究方向

科技热闻

新书上市 | 20年行业实践,一线工程师的必读之作

图灵教育

软件设计

基于http-flv的抖音直播端到端延迟优化实践

字节跳动视频云技术团队

直播 端到端 直播低延迟 直播解决方案 http-flv

【LeetCode】单词替换Java题解

Albert

LeetCode 7月月更

从Starfish OS持续对SFO的通缩消耗,长远看SFO的价值

小哈区块

什么是撞库及撞库攻击的基本原理

郑州埃文科技

撞库 撞库攻击 拖库

工作中养成的工作习惯与给老板的汇报

松子(李博源)

大数据 个人成长 高效 高效率 工作总结

观测云产品更新|新增查看器显示列多种快捷操作;新增 Pipeline 一键获取样本测试数据;新增场景自定义查看器文本分析模式等

观测云

中文拼写纠错:怎样改善模型对 multi-typo 的纠正效果?

澜舟孟子开源社区

人工智能 自然语言处理 nlp 文本生成 文本纠错

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