详解下一代开源混合应用框架Reapp

　　Reapp是一款使用React来开发混合应用的开源框架，为开发者提供了他们开发所需的一切，其中包括各式模块的集合、UI工具包、引导应用的CLI，以及一个预配置的构建服务器，支持Android、iOS。起先，Reapp的构建并不是以成为一个框架为目的，相反，它是作为一个UI工具包开始的。Reapp很简单，你甚至可以只是用其中的UI工具包就能构建出一款应用。

　　首先，我们通过一张图表来看一下Reapp与其他几款框架的区别：

（点击图片查看大图）

　　接下来，我们详细了解一下Reapp的各个部分及功能。

CLI

　　CLI拥有两个主要功能：首先是构建新的应用；其次是可以运行你的应用。Reapp服务器是一个可以与默认应用结构工作默契的简单的express服务器。

　　CLI的使用：

[js] view plaincopy

1. Usage: reapp [options] [command]  
2. Commands:  
3.   new [name]  creates a directory with a new reapp-starter scaffold  
4.   run         runs a reapp application with express/webpack-dev-server  
5.   build       builds a reapp application to a bundle in ./build  
6.   debug       use this to for opening issues!  
7.   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。

使用：

[js] view plaincopy

1. var config = require('./config/webpack.run.js');  
2. var webpackServer = require('reapp-pack/webpackServer');  
3. webpackServer(config, {  
4.   port: 3011,  
5.   debug: true,  
6.   hot: true  
7. });  

• reapp-routes

reapp-routes是一个生成表示路线树的小型库，同时映射到路径。它最主要的作用就是节省代码和执行的一致性。

使用前：

[js] view plaincopy

1. var App = require('./components/App');  
2. var Sub = require('./components/app/Sub');  
3. var OtherSub = require('./components/app/OtherSub');  
4.   
5. module.exports =  
6.   <Route handler={App} path="/">  
7.     <Route name="sub" handler={Sub} />  
8.     <Route name="otherSub" handler={OtherSub} />  
9.   </Route>  

[js] view plaincopy

1. module.exports = routes(require,  
2.   route('app',  
3.     route('sub'),  
4.     route('otherSub')  
5.   )  
6. )  

更多模块具体细节可以点击查看。

Reapp提供了两个示例应用，并将代码托管至Github上。

• Kitchen Sink
  

• Hacker News Reader

传送门：Reapp官网、Github托管地址