Reapp 混合应用 - 帮助构建前所未所的强大应用（Reapp Hybrid apps - help you build powerful apps like never before）
Reapp 混合应用 - 帮助构建前所未有的强大应用
（Reapp Hybrid apps - help you build powerful apps like never before）
太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句：太阳火神的美丽人生 - 本博客专注于 敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。
reapp
Hybrid apps, fast
React, Webpack, ES6 and our platform help you build powerful apps like never before.
What is it?
React UI Kit
npm Modules
Webpack Build System
Easy CLI
| Reapp | Ionic | Touchstone | Supersonic | |
|---|---|---|---|---|
| Platform | React | Angular | React | Angular |
| Routing | react-router | Angular | ✘ | Angular |
| CLI | ✓ | ✓ | ✘ | ✓ |
| Docs | ✓ | ✓ | ✘ | ✓ |
| Animations | Interactive JS | CSS | CSS | CSS |
| Build System | Webpack | Gulp | Gulp | ✘ |
| Hot Reload | ✓ | ✘ | ✘ | ✘ |
| Themes | Customizable JS | CSS | CSS | CSS |
| Layout | Flexbox | Block | Flexbox | Block |
| Icons | SVG | Icon Font | Icon Font | Icon Font |
| Views | Views | Views | Views | |
| Interactive | ✓ | ✘ | ✘ | ✓ |
| Customizable | ✓ | ✘ | ✘ | ✘ |
The UI Kit »
Animations
Dynamic & fully interactive JavaScript-powered animations.
Styles
JavaScript + Flexbox. Composable, dynamic, with a declarative interface.
Themes
Constants, styles and animations. Mix and match them all to make your theme.
Views
Views, ViewLists, even nested ViewLists. Build your own!
Components
Load individually for optimal load & build times.
Mixins
Use all our animation and styling mixins externally.
What else?
A set of optional packages. Once generated, mix and match them as you like.
reapp-component
A decorator and dependency injector
reapp-pack
Generate & run webpack configs
reapp-platform
Some mixins and helpers for React apps
reapp-reducer
A tiny reducer for use with flux apps
reapp-request
Superagent + bluebird + promises
reapp-routes
DRY route to require w/react-router
reapp-server
Express assets for Reapp-structured apps
reapp-object-assign
A polyfill, for Object.assign
Why?
A new stack, designed for software instead of documents, is needed.
having everybody in need of transportation buy the necessary spareparts to build a car is insane.
React enables incredible boosts of both productivity and performance. It's declarative components with lifecycles are the future of making apps.
JavaScript has grown up as well. We have amazing build tools that bring us new features. Webpack and 6to5 give you ES6/7, JSX and more. With react-hot-loader you have insanely fast development.
We want to get you running without locking you into a framework. So we built a simple CLI that bootstraps you in minutes. It even runs your server and builds out of the box.
Enjoy flexibility without needing all the glue. We're making hybrid apps, fast.
What is it?
Reapp is everything you need to build amazing hybrid apps with React: a collection of modules that work together, a UI kit, and our CLI that bootstraps your app and has a pre-configured build server.
Help
Examples
We have two example apps you can check the source to:
- Kitchen Sink (demo)
- Hacker News Reader (demo)
Installation
Installation is done through npm, though you can pick and choose any pieces you'd like and roll your own stack. To get the reapp CLI:
npm install -g reapp
Once that's done you can generate a new base reapp stack with:
reapp new [name]
Where [name] is the name you'd like to give your new stack.
CLI
The CLI has two main functions that it helps you with. The first is creating new apps. For now, it simply makes a bare clone of a repo we keep updated with the current best-practice. The goal is eventually to have a variety of baseline repo's to choose from.
It also lets you run your app, using reapp-server, a simple express server that works well with the default app structure.
CLI Usage:
Usage: reapp [options] [command]Commands:new [name] creates a directory with a new reapp-starter scaffoldrun runs a reapp application with express/webpack-dev-serverbuild builds a reapp application to a bundle in ./builddebug use this to for opening issues!help [cmd] display help for [cmd]
Running & Building Reapp
The run command has a few options to help you out. You can do:
reapp run -d(debug) to output information on how it's running your appreapp run -e production(env=production) to run your app in production mode, which is much fasterreapp run -t source-map(tool=source-map) to have full sourcemaps rather than the "eval" style sourcemaps we default to
The build command is used once you're ready to deploy your app (to either the web or to cordova). For now, we provide two types of builds:
reapp buildtargets the web for mobile sites.reapp build iostargets cordova ios devices.
You also have the same flags available as the run commands, to adjust tools and envs.
When you run reapp build you'll notice a new ./build folder where your assets have been copied to. We're working on adding more documentation soon on how to get those assets into a Cordova/Phonegap app.
Structure of your applications
You can see the exact app that's generated through the reapp-starter repo. Only the /app/app.jsentrypoint and /assets/layout.html is "necessary". In the future, we could have a config file to make this completely custom. For now, it's very simple:
/app/components/themeapp.jsroutes.js
/assetslayout.html
/config (optional)
/app/app.js is your entry point. Everything in the app folder should be pretty self-explanatory. /assets contains static assets, with a layout.html that is used to serve your app within. In general, you should't have to touch the layout, even for adding styles.
The /theme folder is reapp-ui specific. You can find docs for it in the repo, but it also should be pretty easy to understand.
If you place a build.webpack.js or run.webpack.js in your /config dir, the reapp CLI will use these configs when you run reapp build or reapp run. To see some example configs, check out the files in the ./config folder of the reapp-pack repo.
Your First App
There are a number of pieces we've included in a reapp. Let's explore a few of them in order of when you'll encounter them in your codebase. Think of this as a tour of a reapp app, giving an introduction to packages as we encounter them.
You can check out the reapp project on Github for more info.
To start, you'll want to open ./package.json. Notice we have the following packages:
- reapp-routes (Routes generator)
- reapp-ui (UI Kit)
- reapp (CLI)
- reapp-platform (Base utils)
- reapp-component (DI and Factories)
You also have an entry point defined as app/app.js. This starts your app. The most important part here is the routing. Lets start there.
reapp-routes (Routes generator)
reapp-ui (UI Kit)
Other packages
- reapp (CLI)
- reapp-platform (Base utils)
- reapp-component (DI and Factories)
Why
Reapp wasn't built purposefully to be a framework. Instead, it started as a UI kit. From that kit, two apps were built. While this isn't a lot, it was enough to see repetition between the two that could be extracted.
From those two apps, over a period of months, we extracted a set of packages, ensuring to keep each of them completely independent. It was an experiment in seeing if a framework was necessary.
What we found was this: if you can subscribe to a certain file structure, you can avoid the framework. With that file structure, we can provide helpers via a CLI. Bootstrap your app in one command and you have a mature build system built in, without having to do anything.
Really, Reapp is simple. You could even just use the UI kit and roll your own app. We just went through that headache, and decided to make it easier to avoid it if you like how we make apps.
Roadmap
Our initial goals are simple: focus on completeness, consistency, and performance. Also, a theme for Android.
Down the road we'd like to achieve the following:
- Isomorphic - Render first on server, pass data over to client to continue from there (easily achievable).
- Responsive - Support for tablet style interfaces and JS-powered responsive styling.
- Physics - A spring based physics library into the animation library with an easy syntax.
- Interaction - A simple, declarative interaction library that can be composed well with reapp
Development Environment
Sublime users, some helpful plugins for you to install:
- SublimeLinter
- JSXHint has Babel support
- babel-sublime
reapp
Hybrid apps, fast
React, Webpack, ES6 and our platform help you build powerful apps like never before.
What is it?
React UI Kit
npm Modules
Webpack Build System
Easy CLI
| Reapp | Ionic | Touchstone | Supersonic | |
|---|---|---|---|---|
| Platform | React | Angular | React | Angular |
| Routing | react-router | Angular | ✘ | Angular |
| CLI | ✓ | ✓ | ✘ | ✓ |
| Docs | ✓ | ✓ | ✘ | ✓ |
| Animations | Interactive JS | CSS | CSS | CSS |
| Build System | Webpack | Gulp | Gulp | ✘ |
| Hot Reload | ✓ | ✘ | ✘ | ✘ |
| Themes | Customizable JS | CSS | CSS | CSS |
| Layout | Flexbox | Block | Flexbox | Block |
| Icons | SVG | Icon Font | Icon Font | Icon Font |
| Views | Views | Views | Views | |
| Interactive | ✓ | ✘ | ✘ | ✓ |
| Customizable | ✓ | ✘ | ✘ | ✘ |
The UI Kit »
Animations
Dynamic & fully interactive JavaScript-powered animations.
Styles
JavaScript + Flexbox. Composable, dynamic, with a declarative interface.
Themes
Constants, styles and animations. Mix and match them all to make your theme.
Views
Views, ViewLists, even nested ViewLists. Build your own!
Components
Load individually for optimal load & build times.
Mixins
Use all our animation and styling mixins externally.
What else?
A set of optional packages. Once generated, mix and match them as you like.
reapp-component
A decorator and dependency injector
reapp-pack
Generate & run webpack configs
reapp-platform
Some mixins and helpers for React apps
reapp-reducer
A tiny reducer for use with flux apps
reapp-request
Superagent + bluebird + promises
reapp-routes
DRY route to require w/react-router
reapp-server
Express assets for Reapp-structured apps
reapp-object-assign
A polyfill, for Object.assign
Why?
A new stack, designed for software instead of documents, is needed.
having everybody in need of transportation buy the necessary spareparts to build a car is insane.
React enables incredible boosts of both productivity and performance. It's declarative components with lifecycles are the future of making apps.
JavaScript has grown up as well. We have amazing build tools that bring us new features. Webpack and 6to5 give you ES6/7, JSX and more. With react-hot-loader you have insanely fast development.
We want to get you running without locking you into a framework. So we built a simple CLI that bootstraps you in minutes. It even runs your server and builds out of the box.
Enjoy flexibility without needing all the glue. We're making hybrid apps, fast.
Reapp 混合应用 - 帮助构建前所未所的强大应用（Reapp Hybrid apps - help you build powerful apps like never before）相关推荐
- Vue第三部分(2)：Vue-CLI构建前后端分离项目以及打包部署
通过上一节,我们学习了vue脚手架的相关概念以及构建过程,那么开始我们的前后端项目吧 Vue-CLI构建前后端分离项目 1.项目环境初始化 1.安装 axios vue-axios(记得执行命令要进入 ...
- 前后端混合开发模式和前后端分离开发模式
前后端混合开发模式和前后端分离开发模式 一.前后端混合开发模式 二.前后端分离开发模式
- Vue 脚手架结合 SpringBoot 构建前后端分离入门项目（实现增删改查）
Vue 脚手架构建前后端分离项目 项目简介与预览 数据库建表 主要模块代码 index.js 路由代码 User.vue 用户组件 RAP2 创建接口进行测试 切换路由组件的显示: this.$rou ...
- 使用 Proto 构建了一个简单但功能强大的 lambda 库的测试程序
使用 Proto 构建了一个简单但功能强大的 lambda 库的测试程序 实现功能 C++实现代码 实现功能 使用 Proto 构建了一个简单但功能强大的 lambda 库的测试程序 C++实现代码 ...
- js 获得明天0点时间戳_Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战...
点击上方"测试开发技术",选择设为"设为星标" 优质文章,第一时间送达! 学习全文大概需要 12分钟,内容实战性较强. 1. 前言 本篇将基于Python 3. ...
- Flask+Axios+jQuery构建前后端通信的小例子
比较暴力但好理解的方法,下面详细说一下. 工具准备 Flask pip install flask Axios https://cdnjs.cloudflare.com/ajax/libs/axios ...
- ecif java_关于企业级ECIF系统的构建设计（未完工）
一:概念: 企业级客户信息系统.作为银行的一 个基础设施项目,承担整合银行各系统中 的客户信息,为其他应用系统提供客户信 息的任务.是银行的统一的客户数据源和 客户信息的数据交换中枢. 二:所需概念 ...
- 以三维地图和倾斜摄影为基础的CIM托底，以三维视频融合或投影融合为核心的时空克隆为引擎，以混合架构模式构建的魔镜平台，将成为元宇宙的主流 点卯+魔镜系列
一.元宇宙 元宇宙的兴起,让以三维视频融合与三维投影融合为核心.以倾斜摄影和三维地图构筑的CIM作为托底的时空克隆引擎,成为时代的主流技术,以此打造了混合架构的魔镜平台 元宇宙不同于数字孪生的概念,数 ...
- 从零到一 django + vue 构建前后端分离项目
(本文在win10环境下进行) django 和 vue 的优点 django的python血统,开发起来基本上是站在巨人的肩膀上,用起来顺手,加上drf这个restful API 框架,SaltSt ...
- 绝佳时机，前所未遇，开创全新购物体验
随着移动互联的不断演进,电子商务正在以纷繁的商品.较低的价格.快捷的支付.灵活的时间等独特优势不断冲击着传统零售业的霸主地位.对此,虽然有许多零售商尝试通过建立更多渠道(全渠道)等方式来争取市场,但这 ...
最新文章
- seo模拟点击软件_网站用软件刷排名好不好？
- 用getBoundingClientRect()来获取页面元素的位置
- Error -Cannot add direct child without default aggregation defined for control
- 分区 主分区 和 扩展分区_等和分区
- lsqnonlin函数_matlab非线性最小二乘函数
- 数组模拟加法（每日一练 11.30）
- 【论文笔记】K-plet Recurrent Neural Networks for Sequential Recommendation
- GDAL源码剖析（三）之Swig编译和帮助文档生成
- 开放大学计算机应用基础第三次,江苏开放大学-计算机应用基础第三次.doc
- HttpContext.Current
- 径流模拟方法探究——P-Ⅲ频率曲线与copula函数
- Jack Lin tools 3Dmax批渲染插件
- termux使用记录
- Linux下sz下载文件超过4G办法
- python怎么跳出while循环_怎么跳出while循环
- python json.dumps(output) ^ SyntaxError: invalid syntax
- 思科-实验10：路由器接口 PPP 协议封装和 PAP、CHAP 验证配置
- buct寒假集训——lca
- 2006年江苏专转本计算机试卷答案,2006年度江苏省普通高校专转本计算机试卷.doc...
- 计算机网络：以太网中的MTU与MSS