详解下一代开源混合应用框架Reapp
Reapp是一款使用React来开发混合应用的开源框架，为开发者提供了他们开发所需的一切，其中包括各式模块的集合、UI工具包、引导应用的CLI，以及一个预配置的构建服务器，支持Android、iOS。起先，Reapp的构建并不是以成为一个框架为目的，相反，它是作为一个UI工具包开始的。Reapp很简单，你甚至可以只是用其中的UI工具包就能构建出一款应用。
首先，我们通过一张图表来看一下Reapp与其他几款框架的区别：
（点击图片查看大图）
接下来，我们详细了解一下Reapp的各个部分及功能。
CLI
CLI拥有两个主要功能：首先是构建新的应用；其次是可以运行你的应用。Reapp服务器是一个可以与默认应用结构工作默契的简单的express服务器。
CLI的使用：
Usage: reapp [options] [command] Commands: new [name] creates a directory with a new reapp-starter scaffold run runs a reapp application with express/webpack-dev-server build builds a reapp application to a bundle in ./build debug use this to for opening issues! help [cmd] display help for [cmd]
UI Kit
- 动画：动态和完全交互式的JavaScript编写的动画。
- 样式：JavaScript + Flexbox，可组合、动态、可声明接口。
- 主题：混合匹配物理场数、风格样式和动画来制作自己的主题。
- 视图：使用Views、ViewLists甚至是嵌套的ViewLists来构建视图。
- 多态：所有的动画和样式都可以混合使用，让设计多样化。
具体模块
- reapp-ui
reapp-ui是React组件的一个合集，用于构建应用的UI：
- 能够很好的协同工作
- 具有极少依赖性的轻量级代码
- 主题化
- 适应众多平台
- reapp-pack
生成webpack配置的一个辅助，还带有其他一些小的辅助功能。包括能够简单使用webpack开发服务器的./webpackServer。
使用：
var config = require('./config/webpack.run.js'); var webpackServer = require('reapp-pack/webpackServer'); webpackServer(config, { port: 3011, debug: true, hot: true }); - reapp-routes
reapp-routes是一个生成表示路线树的小型库，同时映射到路径。它最主要的作用就是节省代码和执行的一致性。
使用前：
var App = require('./components/App'); var Sub = require('./components/app/Sub'); var OtherSub = require('./components/app/OtherSub'); module.exports = <Route handler={App} path="/"> <Route name="sub" handler={Sub} /> <Route name="otherSub" handler={OtherSub} /> </Route> 使用后：
module.exports = routes(require, route('app', route('sub'), route('otherSub') ) ) 更多模块具体细节可以 点击查看 。
Reapp提供了两个 示例应用 ，并将代码托管至Github上。
- Kitchen Sink
- Hacker News Reader
传送门： Reapp官网 、 Github托管地址
（文/刘璐璐 责编/唐小引）
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
