This is repo contains a complete working Todo app, originally described in an excellent blog post by Sunil Sandhu that compares Vue and React.
I took the same app and converted it to Ruby using the Hyperstack framework. The results are documented in a series of blog posts on Medium:
A Hyperstack App is a Rails Application with an additional hyperstack directory. Almost all the coding takes place in this app/hyperstack directory. This is all setup for you when you install Hyperstack. Here is the structure of the app directory:
app
├── assets ...
├── channels ...
├── controllers ...
├── helpers ...
├── hyperstack
│ ├── components
│ │ ├── hyper_component.rb
│ │ ├── todo_index.rb
│ │ └── todo_item.rb
│ ├── models ...
│ ├── operations ...
│ └── stores ...
├── javascript ...
├── jobs ...
├── mailers ...
├── models ...
├── policies ...
└── views ...
In addition to the app directory you will see the usual Rails config directory and db directories, which we can ignore as they are all setup for us with good working defaults.
You will also see a spec directory which is where specs are placed. Specifically there is one spec file called todo_spec.rb.
At the top level you will find a comparisons directory with the Vue and React versions of the application.
- Make sure you have rails installed: http://installrails.com/
- You will also need yarn installed: https://yarnpkg.com/lang/en/docs/install/
- Clone this repo
cd todo-comparebundle install(install ruby gems)yarn(install npm packages)bundle exec rake(run the specs)bundle exec foreman start- visit localhost:5000
Once you are up and running try doing a small edit to the todo.rb component. For example change the header from
H1(class: 'ToDo-Header') { 'Hyperstack To Do' }to
H1(class: 'ToDo-Header') { 'My Hyperstack To Do App' }you should instantly see your changes recompiled and reloaded on the app.
This git branch follows Part I of the series. If you git checkout part-ii or git checkout part-iii you can see the code additions for each of the following parts of the series. (well once they are published anyway :-) )
If you have trouble put in an issue at Stack Overflow and add the hyperstack tag.
Prefered method, as it is easy for others to search etc!
Or visit us at https://gitter.im/ruby-hyperloop/chat.
Or add the issue here.
One of the powerful things about Hyperstack is that your database tables are automatically proxied to the client, and kept in sync. To do this we need a database ORM which Rails provides via the ActiveRecord class.
Rails also provides also sorts of other backend goodies, such as mailers and queued tasks.
Finally even if your Hyperstack app is a very simple static application Rails provides an easy way to manage your component code. Using Rails, Hyperstack will pre-render your component code, cache it, and deliver it with almost no runtime server interaction.
Yes Rails is big, but you only pay for the parts you use.