/
index.html
577 lines (494 loc) · 17.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta charset="utf-8">
<title> Reapp - Hybrid apps, fast</title>
<meta name="description">
<meta property="og:type" content="website">
<meta property="og:title" content="Reapp">
<meta property="og:url" content="http://reapp.io/index.html">
<meta property="og:site_name" content="Reapp">
<meta property="og:description">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Reapp">
<meta name="twitter:description">
<link rel="icon" href="/favicon.png" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/solarized_light.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="alternate" href="/atom.xml" title="Reapp">
</head>
<body>
<div id="step-1" class="section">
<div class="spiro"></div>
<div class="row hero">
<div class="hero-first center-xs start-md col-sm-12 col-md-6">
<h1 class="logo">
<a href="/">reapp</a>
<img id="mark" src="images/mark.svg" />
</h1>
<p>
An easier, faster way to build apps
with React and JavaScript.
</p>
<div class="home">
<header class="header">
<div class="row center-xs start-md">
<h1 class="logo"><a href="/">Reapp</a></h1>
<nav class="nav">
<a href="/start.html">Get Started</a>
<a href="/ui.html">Doc<span class="hide-sm">s</span><span class="hide-xs show-sm">umentation</span></a>
<a href="/blog">Blog</a>
</nav>
<nav class="nav right hide-xs">
<a href="https://twitter.com/reapp">Twitter</a>
<a href="https://github.com/reapp/reapp" target="_blank">
Github
</a>
</nav>
</div>
</header>
</div>
<div class="install code center-xs start-sm">
<div class="first">
npm install -g reapp
</div>
<div class="extra-line">
reapp new myapp
</div>
<div class="extra-line">
cd myapp && reapp run
</div>
</div>
<div class="row justify-right">
<div class="buttons">
<a class="github icon-mini" href="https://github.com/reapp/reapp" target="_blank">Github</a>
<a class="twitter icon-mini" href="https://twitter.com/reapp" target="_blank">Twitter</a>
</div>
</div>
</div>
<div class="hero-second hide-xs hide-sm col-md-6">
<div class="phone">
<iframe id="iframe" class="screen" src="http://kitchen.reapp.io/#demo:emulateTouch"></iframe>
</div>
<div class="toggle">
<button id="kitchenButton" onclick="setIframe('kitchen');">
Kitchen Sink
</button>
<button onclick="setIframe('hn');">
Hacker News
</button>
</div>
<script type="text/javascript">
window.onload = function() {
document.getElementById('kitchenButton').focus();
}
function setIframe(sub) {
var opts = sub === 'kitchen' ? '#demo:emulateTouch' : '';
document.getElementById('iframe').setAttribute('src', 'http://'+sub+'.reapp.io/' + opts);
}
</script>
<div class="tryit">
Try it live
</div>
</div>
</div>
</div>
<div class="banner hide-xs">
Latest from the Blog:
<a href="/2015/03/08/Welcome-to-Reapp/">Welcome to Reapp</a>
</div>
<div class="section hide-sm hide-md hide-lg">
<div class="row">
<div class="col-xs-12 pad">
<a class="button" href="http://kitchen.reapp.io">Kitchen Sink Demo</a>
<a class="button" href="http://hn.reapp.io">Hacker News Demo</a>
<span class="note">
Demos run best when saved to homescreen so swipes work correctly.
</span>
</div>
</div>
</div>
<div id="what-is-it" class="motto section row-features">
<div class="row">
<div class="feature col-xs-12 col-sm-8">
<div class="secondary hide-xs show-md">
<img class="icon logo" src="/images/react-logo.svg" />
</div>
<div class="main pad-right">
<h3>React UI Kit</h3>
<p>
A set of components for beautiful interfaces
on any platform. Optimized for mobile and fully customizable.
</p>
<img class="example hide-xs show-md" src="/images/screen-components.png" />
</div>
</div>
</div>
<div class="row">
<div class="feature col-xs-12 col-sm-8 col-sm-offset-4">
<div class="main pad-right">
<h3>Packages</h3>
<p>
Everything you need to build apps from day one, from animations
to routing, requests to data management.
</p>
<pre class="code-example hide-xs show-md">
<code>import Component from 'reapp-component';
import Request from 'reapp-request';
import reducer from 'reapp-reducer';
import UI from 'reapp-ui';</code>
</pre>
</div>
<div class="secondary hide-xs show-md">
<img class="icon logo" src="/images/npm-logo.svg" />
</div>
</div>
</div>
<div class="row">
<div class="feature col-xs-12 col-sm-8">
<div class="secondary hide-xs show-md">
<img class="icon logo" src="/images/webpack.svg" />
</div>
<div class="main">
<h3>Webpack Build System</h3>
<p>
Spend no time configuring your builds. <a href="http://gaearon.github.io/react-hot-loader/" target="_blank">Hot reloads</a> and ES6 out of the box with
<a href="https://webpack.github.io" target="_blank">Webpack</a> and
<a href="https://babeljs.io" target="_blank">Babel</a>.
</p>
</div>
</div>
</div>
<div class="row lesser">
<div class="feature col-xs-12 col-sm-8 col-sm-offset-4">
<div class="main pad-right">
<h3>Command Line Interface</h3>
<p>
Create new apps, serve them, build them to Cordova or the web with one command.
</p>
</div>
<div class="secondary hide-xs show-md">
<img class="icon logo" src="/images/commandline.svg" />
</div>
</div>
</div>
</div>
<div id="ui-kit" class="section has-title center-titles">
<div class="row">
<h2 class="section-title">Reapp UI Kit</h2>
<div class="col col-xs-12 col-sm-8 col-sm-offset-2 emphasize lighten center-xs">
<p>
Built from the ground up to target multiple platforms.
Customize every piece of it from colors to styles.
Interactive animations brings your apps to life.
</p>
</div>
</div>
<div class="row">
<div class="feature col-xs-12 col-md-4">
<img class="icon" src="/images/icons/radar.svg" />
<h4>Animations</h4>
<p>
Prop-based & interactive JavaScript-powered animations.
</p>
</div>
<div class="feature col-xs-12 col-md-4">
<img class="icon" src="/images/icons/connections.svg" />
<h4>Styles</h4>
<p>
Inline styles and Flexbox bring power and flexibility.
</p>
</div>
<div class="feature col-xs-12 col-md-4">
<img class="icon" src="/images/icons/color.svg" />
<h4>Themes</h4>
<p>
Mix and match every piece of the theme, change them at runtime.
</p>
</div>
<div class="feature col-xs-12 col-md-4">
<img class="icon" src="/images/icons/layers.svg" />
<h4>Views</h4>
<p>
Views with custom animations that work with your router.
</p>
</div>
<div class="feature col-xs-12 col-md-4">
<img class="icon" src="/images/icons/boxes.svg" />
<h4>Components</h4>
<p>
A complete set of components for every type of app.
</p>
</div>
<div class="feature col-xs-12 col-md-4">
<img class="icon" src="/images/icons/centralized.svg" />
<h4>Mixins</h4>
<p>
Use all our animation and styling mixins externally.
</p>
</div>
</div>
</div>
<!-- <div id="examples" class="section has-title emphasize hide-xs">
<div class="row">
<h2 class="section-title bg-green">Example</h2>
<div class="col-xs-12 col-sm-6">
<pre class="highlight"><code>import React from 'react';
import { NestedViewList, View, List } from 'reapp-ui/all';
export default React.createClass({
render: () =>
<NestedViewList>
<View title="Hot Articles">
<List wrap>
{articlesArray.map(a => a.title)}
</List>
</View>
<View title="Other">
<p>Second view contents</p>
</View>
</ViewList>
});</code></pre>
</div>
<div class="col-xs-12 col-sm-6 pad">
<p>
ViewLists handle Views from animation to interaction.
</p>
<p>
The NestedViewList uses a parallax animation and
allows you to swipe sideways between views.
</p>
<p>
Reapp has NestedViewList and DottedViewList, & you can
change them on the fly through props.
</p>
<p>
Lists automatically handle arrays of items when you
use the wrap prop.
</p>
<a class="button" href="/components.html">See more components</a>
</div>
</div>
</div> -->
<div class="section has-title">
<div class="row hide-xs">
<h2 class="section-title">Compare</h2>
<div class="col-xs-12">
<table class="center">
<thead>
<tr>
<th width="5%"></th>
<th class="bold" width="20%">Reapp</th>
<th width="20%">Ionic</th>
<th width="20%">Native</th>
</tr>
</thead>
<tbody>
<tr>
<td class="category">Platform</td>
<td class="bold">React</td>
<td>Angular</td>
<td>Cocoa / Java / ...</td>
</tr>
<tr>
<td class="category">CLI</td>
<td class="winner bold">✓</td>
<td class="winner">✓</td>
<td class="loser">✘</td>
</tr>
<tr>
<td class="category">Build System</td>
<td class="winner bold">Webpack</td>
<td>Gulp</td>
<td>BYO</td>
</tr>
<tr>
<td class="category">Hot Reload</td>
<td class="bold winner">✓</td>
<td class="loser">✘</td>
<td class="loser">✘</td>
</tr>
<tr>
<td class="category">Themes</td>
<td class="winner bold">Customizable JS</td>
<td>CSS</td>
<td>Per-Platform</td>
</tr>
<tr>
<td class="category">Layout</td>
<td class="bold winner">Flexbox</td>
<td>Flex Grid + Block</td>
<td>Per-Platform</td>
</tr>
<tr>
<td class="category">Icons</td>
<td class="bold winner">SVG</td>
<td>Icon Font</td>
<td>BYO</td>
</tr>
<tr class="sub-category">
<td></td>
<td>Animations</td>
<td>Animations</td>
<td>Animations</td>
</tr>
<tr>
<td class="category">Language</td>
<td class="bold">JS</td>
<td>CSS</td>
<td>Per-Platform</td>
</tr>
<tr>
<td class="category">Interactive</td>
<td class="bold winner">✓</td>
<td class="loser">✘</td>
<td class="winner">✓</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="section has-title">
<div class="row">
<h2 id="faq" class="section-title bg-red">FAQ</h2>
<div class="pad-top col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6">
<strong>Can I run it on Cordova?</strong>
<p>Yep, for now with just an iOS theme. If you run "reapp build ios" you'll have a Cordova-ready
app in seconds.</p>
<strong>Will it run on Android?</strong>
<p>Yes. And it's completely themable. Look out for our own Material UI theme coming out too,
that you can swap in with one line of code once it's ready.</p>
<strong>Will it run my mobile website?</strong>
<p>Yes. With the same codebase. Just run "reapp build" and you have an entire website
in seconds, ready to deploy.</p>
<strong>Do you have example apps?</strong>
<p>
Check out our <a href="https://github.com/reapp/hacker-news-app">Hacker News app source code</a>
for an example of an app with Flux and Immutable Data. And our
<a href="https://github.com/reapp/kitchen-sink">Kitchen Sink source code</a> has examples of
using every type of component.
</p>
<strong>How does it compare to Ionic?</strong>
<p>
Reapp runs on React. That means you get faster performance than Angular and simple, declarative code.
It also runs on Webpack, giving you new JavaScript features
in ES6 that are awesome and other features like live-reloading your app as you edit,
without losing state.
</p>
<p>Reapp aims to <em>feel</em> more Native than any other platform. With the new speed
of React we get close, and our support for interactive animation is key which Ionic doesn't support.</p>
<strong>What about React Native?</strong>
<p>
React Native will be awesome. But you still need lots of work to make an app for all three
platforms with it, and you'll need to know Objective-C and Java if you ever go outside
of the React Native sandbox.
</p>
<p>Reapp's approach has unique advantages:</p>
<ul>
<li>Deploy to all platforms with one codebase</li>
<li>Develop without simulators</li>
<li>Debug with Chrome, live edit your DOM</li>
<li>Use the <em>same</em> codebase for your mobile website</li>
<li>Hot reload on save without losing state</li>
<li>Works with all of npm, no questions asked</li>
</ul>
<strong>Could I use it with React Native?</strong>
<p>Yes. You could get the benefit of both worlds once you're ready to gain extra
performance. But in many cases you don't need to!</p>
</div>
</div>
</div>
<div class="section has-title">
<div class="row">
<h2 class="section-title bg-red">Why?</h2>
<div class="col-xs-12 col-md-6">
<blockquote>
A new stack, designed for software instead of documents, is needed.
<footer><a href="https://news.ycombinator.com/item?id=8815465">@lkrubner</a></footer>
</blockquote>
</div>
<div class="col-xs-12 col-md-6">
<blockquote>
having everybody in need of transportation buy the necessary spareparts to build a car is insane.
<footer><a href="https://news.ycombinator.com/item?id=4407567">@jballanc</a></footer>
</blockquote>
</div>
<div class="pad-top col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6 emphasize lighten">
<p>
React enables incredible boosts of both productivity and performance.
It's declarative components with lifecycles are the future of making apps.
</p>
<p>
JavaScript has grown up as well.
We have amazing build tools that bring us new features.
<a href="http://webpack.github.io">Webpack</a> and
<a href="http://babeljs.io">Babel</a> give you ES6/7, JSX and more.
With <a href="http://gaearon.github.io/react-hot-loader/">react-hot-loader</a> you have insanely fast development.
</p>
<p>
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.
</p>
<p>
Enjoy flexibility without needing all the glue.
We're making hybrid apps, fast.
</p>
</div>
</div>
</div>
<!-- bb -->
<footer class="footer">
<div class="row">
<div class="hide-xs col-sm-2"></div>
<div class="col-xs-12 col-sm-4">
<nav>
<a href="/start.html">Get Started</a>
<a href="/ui.html">Docs</a>
<a href="/packages.html">Packages</a>
</nav>
</div>
<div class="col-xs-12 col-sm-4">
<nav>
<a href="https://github.com/reapp/reapp" target="_blank">Github</a>
<a href="https://twitter.com/reapp" target="_blank">Twitter</a>
</nav>
</div>
<div class="hide-xs col-sm-2"></div>
<div class="row">
<div class="col-xs-12">
<span>Copyright 2016 reapp.</span>
<span>Icons from <a href="http://www.flaticon.com">flaticon.com</a> under CC 3.0</span>
<span>nate@reapp.io</span>
<span>Stewarded by</span>
<a href="https://www.levelupdevelopment.com">
<img width="25%" height="25%" src="/images/lud-logo.svg" title="Level Up Development LLC" alt="Level Up Development LLC" />
</a>
</div>
</div>
</div>
<div class="spiro"></div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-57645827-1', 'auto');
ga('send', 'pageview');
</script>
<script src="/js/highlight.js"></script>
<script src="/js/highlight-js.js"></script>
<script src="/js/highlight-xml.js"></script>
<script>
hljs.registerLanguage('js', H_js);
hljs.registerLanguage('xml', H_xml);
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
</body>
</html>