|
1 | | -# hyper-react |
| 1 | +<div class="githubhyperloopheader"> |
2 | 2 |
|
3 | | -[](https://gitter.im/reactrb/chat?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) |
4 | | -[](https://travis-ci.org/ruby-hyperloop/hyper-react) |
5 | | -[](https://codeclimate.com/github/reactrb/reactrb) |
6 | | -[](https://badge.fury.io/rb/hyper-react) |
| 3 | +<p align="center"> |
7 | 4 |
|
8 | | -**hyper-react is an [Opal Ruby](http://opalrb.org) wrapper of |
9 | | -[React.js library](https://facebook.github.io/react)**. |
| 5 | +<a href="http://ruby-hyperloop.io/" alt="Hyperloop" title="Hyperloop"> |
| 6 | +<img width="350px" src="http://ruby-hyperloop.io/images/hyperloop-github-logo.png"> |
| 7 | +</a> |
10 | 8 |
|
11 | | -It lets you write reactive UI components, with Ruby's elegance using the tried |
12 | | -and true React.js engine. :heart: |
| 9 | +</p> |
13 | 10 |
|
14 | | -Visit [ruby-hyperloop.io](http://ruby-hyperloop.io) for the full story. |
| 11 | +<h2 align="center">The Complete Isomorphic Ruby Framework</h2> |
15 | 12 |
|
16 | | -### Important: `react.rb`, `reactive-ruby` and `reactrb` gems are **deprecated**. See [**UPGRADING**](UPGRADING.md) for details. |
| 13 | +<br> |
17 | 14 |
|
18 | | -## Installation |
| 15 | +<a href="http://ruby-hyperloop.io/" alt="Hyperloop" title="Hyperloop"> |
| 16 | +<img src="http://ruby-hyperloop.io/images/githubhyperloopbadge.png"> |
| 17 | +</a> |
19 | 18 |
|
20 | | -Install the gem, or load the js library |
| 19 | +<a href="https://gitter.im/ruby-hyperloop/chat" alt="Gitter chat" title="Gitter chat"> |
| 20 | +<img src="http://ruby-hyperloop.io/images/githubgitterbadge.png"> |
| 21 | +</a> |
21 | 22 |
|
22 | | -1. Add `gem 'hyper-react'` to your **Gemfile** |
23 | | -2. Or `gem install hyper-react` |
24 | | -3. Or install (or load via cdn) from [reactrb-express.js](http://github.com/ruby-hyperloop/reactrb-express) |
| 23 | +[](https://badge.fury.io/rb/hyper-react) |
25 | 24 |
|
26 | | -For gem installation it is highly recommended to read the [getting started](http://ruby-hyperloop.io/get_started/) and [installation](http://ruby-hyperloop.io/installation/) guides at [ruby-hyperloop.io.](http://ruby-hyperloop.io) |
| 25 | +<p align="center"> |
| 26 | +<img src="http://ruby-hyperloop.io/images/HyperComponents.png" width="100" alt="Hyper-components"> |
| 27 | +</p> |
27 | 28 |
|
28 | | -## Quick Overview |
| 29 | +</div> |
29 | 30 |
|
30 | | -A component is a plain ruby class with a `#render` method defined. |
| 31 | +## Hyper-React GEM is part of Hyperloop GEMS family |
31 | 32 |
|
32 | | -```ruby |
33 | | -class HelloMessage |
34 | | - def render |
35 | | - React.create_element("div") { "Hello World!" } |
36 | | - end |
37 | | -end |
| 33 | +Build interactive Web applications quickly. Hyperloop encourages rapid development with clean, pragmatic design. With developer productivity as our highest goal, Hyperloop takes care of much of the hassle of Web development, so you can focus on innovation and delivering end-user value. |
38 | 34 |
|
39 | | -puts React.render_to_static_markup(React.create_element(HelloMessage)) |
| 35 | +One language. One model. One set of tests. The same business logic and domain models running on the clients and the server. Hyperloop is fully integrated with Rails and also gives you unfettered access to the complete universe of JavaScript libraries (including React) from within your Ruby code. Hyperloop lets you build beautiful interactive user interfaces in Ruby. |
40 | 36 |
|
41 | | -# => '<div>Hello World!</div>' |
42 | | -``` |
| 37 | +Everything has a place in our architecture. Components deliver interactive user experiences, Operations encapsulate business logic, Models magically synchronize data between clients and servers, Policies govern authorization and Stores hold local state. |
43 | 38 |
|
44 | | -### React::Component |
| 39 | +**hyper-react** is an [Opal Ruby](http://opalrb.org) wrapper of [React.js library](https://facebook.github.io/react). |
45 | 40 |
|
46 | | -You can simply include `React::Component` to get the power of a complete DSL to generate html markup, event handlers and it also provides a full set of class macros to define states, parameters, and lifecycle callbacks. |
| 41 | +**Hyper-react** brings Components modules uesed in the Hyperloop interface. |
47 | 42 |
|
48 | | -As events occur, components update their state, which causes them to rerender, and perhaps pass new parameters to lower level components, thus causing them to rerender. |
| 43 | +## Getting Started |
49 | 44 |
|
| 45 | +1. Update your Gemfile: |
| 46 | + |
50 | 47 | ```ruby |
51 | | -require 'opal' |
52 | | -require 'browser/interval' |
53 | | -require 'opal-jquery' |
54 | | -require 'react/react-source' |
55 | | -require 'hyper-react' |
56 | | -require 'react/top_level_render' |
57 | | - |
58 | | -class HelloWorld < React::Component::Base |
59 | | - param :time, type: Time |
60 | | - render do |
61 | | - p do |
62 | | - span { "Hello, " } |
63 | | - input(type: :text, placeholder: "Your Name Here") |
64 | | - span { "! It is #{params.time}"} |
65 | | - end |
66 | | - end |
67 | | -end |
68 | | - |
69 | | -every(1) do |
70 | | - Element["#example"].render do |
71 | | - HelloWorld(time: Time.now) |
72 | | - end |
73 | | -end |
74 | | -``` |
75 | | - |
76 | | -hyper-react components are *isomorphic* (or *univeral*) meaning they can run on the server as well as the client. |
77 | | - |
78 | | -hyper-react integrates well with Rails, Sinatra, and simple static sites, and can be added to existing web pages very easily. |
79 | | - |
80 | | -Under the hood the actual work is effeciently done by the [React.js](https://facebook.github.io/react) engine. |
81 | | - |
| 48 | +#Gemfile |
82 | 49 |
|
83 | | -## Why ? |
84 | | - |
85 | | -+ *Single Language:* Use Ruby everywhere, no JS, markup languages, or JSX |
86 | | -+ *Powerful DSL:* Describe HTML and event handlers with a minimum of fuss |
87 | | -+ *Ruby Goodness:* Use all the features of Ruby to create reusable, maintainable UI code |
88 | | -+ *React Simplicity:* Nothing is taken away from the React.js model |
89 | | -+ *Enhanced Features:* Enhanced parameter and state management and other new features |
90 | | -+ *Plays well with Others:* Works with other frameworks, React.js components, Rails, Sinatra and static web pages |
91 | | - |
92 | | -## Problems, Questions, Issues |
93 | | - |
94 | | -+ [Stack Overflow](http://stackoverflow.com/questions/tagged/react.rb) tag `react.rb` for specific problems. |
95 | | -+ [Gitter.im](https://gitter.im/reactrb/chat) for general questions, discussion, and interactive help. |
96 | | -+ [Github Issues](https://github.com/reactrb/reactrb/issues) for bugs, feature enhancements, etc. |
97 | | - |
98 | | - |
99 | | -## Roadmap |
100 | | - |
101 | | -Version 0.10.x **will not be** 100% backward compatible with 0.3.0 (`react.rb`) or 0.7.x (`reactive-ruby`). |
102 | | - |
103 | | -Please let us know either at [Gitter.im](https://gitter.im/reactrb/chat) or [via an issue](https://github.com/reactrb/reactrb/issues) if you have specific concerns with the upgrade from 0.3.0 to 0.10.x. |
104 | | - |
105 | | -## Developing |
| 50 | +gem 'hyperloop' |
| 51 | +``` |
106 | 52 |
|
107 | | -`git clone` the project. |
| 53 | +2. At the command prompt, update your bundle : |
108 | 54 |
|
109 | | -To play with some live examples, refer to https://github.com/ruby-hyperloop/reactrb-examples. |
| 55 | + $ bundle update |
110 | 56 |
|
111 | | -Note that these are very simple examples, for the purpose of showing how to configure the gem in various server environments. For more examples and information see [ruby-hyperloop.io.](http://ruby-hyperloop.io) |
| 57 | +3. Run the hyperloop install generator: |
112 | 58 |
|
113 | | -## Testing |
| 59 | + $ rails g hyperloop:install |
114 | 60 |
|
115 | | -1. Run `bundle exec rake test_app` to generate a dummy test app. |
116 | | -2. `bundle exec appraisal install` to generate separate gemfiles for different environments. |
117 | | -2. `bundle exec appraisal opal-0.10-react-15 rake` to run test for opal-0.10 & react-v0.15. |
| 61 | +4. Follow the guidelines to start developing your application. You may find |
| 62 | + the following resources handy: |
| 63 | + * [Getting Started with Hyperloop](http://ruby-hyperloop.io/start) |
| 64 | + * [Hyperloop Guides](http://ruby-hyperloop.io/docs/architecture) |
| 65 | + * [Hyperloop Tutorial](http://ruby-hyperloop.io/tutorials) |
118 | 66 |
|
119 | | -## Contributions |
| 67 | +## Community |
120 | 68 |
|
121 | | -This project is still in early stage, so discussion, bug reports and PRs are |
122 | | -really welcome :wink:. |
| 69 | +#### Getting Help |
| 70 | +Please **do not post** usage questions to GitHub Issues. For these types of questions use our [Gitter chatroom](https://gitter.im/ruby-hyperloop/chat) or [StackOverflow](http://stackoverflow.com/questions/tagged/hyperloop). |
123 | 71 |
|
| 72 | +#### Submitting Bugs and Enhancements |
| 73 | +[GitHub Issues](https://github.com/ruby-hyperloop/hyperloop/issues) is for suggesting enhancements and reporting bugs. Before submiting a bug make sure you do the following: |
| 74 | +* Check out our [contributing guide](https://github.com/ruby-hyperloop/hyperloop/blob/master/CONTRIBUTING.md) for info on our release cycle. |
124 | 75 |
|
125 | 76 | ## License |
126 | 77 |
|
127 | | -In short, hyper-react is available under the MIT license. See the LICENSE file for |
128 | | -more info. |
| 78 | +Hyperloop is released under the [MIT License](http://www.opensource.org/licenses/MIT). |
0 commit comments