Proposal for hyper-rails gem

[barriehadfield]

The goal is to provide a standard and best practice way of installing and configuring all Hyperloop gems with Rails - this will include the use of Yarn (and/or NPM) and Webpack.

HyperRails gem proposed documentation:

Installation

This generator will install and configure all Hyperloop Gems with Rails 4.x or 5.x.

In your Gemfile

gem "hyper-rails"

then

bundle install

Once the HyperRails gem is installed, you can use it to install each of the family of Hyperloop gems:

Using the Installation generators

There are generators to to install and configure each of the Hyperloop gems:

Install Everything

rails g hyperloop:all
bundle update

This will install all of the gems listed below with the default configuration.

HyperReact

HyperReact is the master gem. You will always need this as a base. HyperReact provides a Ruby DSL to Facebook’s React. Much of the documentation on this site covers usage of this Gem.

rails g hyperloop:install_hyper_react
bundle update

Options:

• --include-react-source (default) latest React and ReactDOM will be included
• --exclude-react-source to not include React which you will need to include yourself
• --use-npm-webpack add React via NPM and include via Webpack
• --use-yarn-webpack add React via Yarn and include via Webpack

HyperMesh

HyperMesh is a policy based CRUD system which wraps ActiveRecord models on the server and extends them to the client. Furthermore it implements push notifications (via a number of possible technologies) so changes to records in use by clients are pushed to those clients if authorised. Isomorphic Ruby in action.

rails g hyperloop:install_hyper_mesh
bundle update

Options:

• --exclude-client-sync basic CRUD functionality with no method of synchronising connected clients
• --include-client-sync (default) client sync is included and you will need to use one of the push notification technologies below
• --use-pusher-fake (default) the easiest way to setup client push is to use the Pusher-Fake gem
• --use-pusher you will need an account with pusher.com
• --use-actioncable for Rails 5

HyperRouter

HyperRouter provides a Ruby DSL to Facebook’s React Router which is a React component that loads other components depending on the current URL.

rails g hyperloop:install_hyper_router
bundle update

Options:

• --include-router-source (default) latest React Router will be included
• --exclude-router-source to not include React Router which you will need to include yourself
• --use-npm-webpack add React via NPM and include via Webpack
• --use-yarn-webpack add React via Yarn and include via Webpack

HyperTrace

Method tracing and conditional breakpoints for Opal Ruby.

rails g hyperloop:install_hyper_trace
bundle update

Opal Hot Reloader

For pure programmer joy, no more page refreshes.

rails g hyperloop:install_opal_hot_reloader
bundle update

Additional useful generators

Creating HyperReact Components

rails g hyperloop:component Home::Clock

Which will make the component Home::Clock in app/views/components/home/clock.rb

You can render a component directly from a controller:

class HomeController < ApplicationController
  def clock
    render_component
  end
end

Or from a view:

<%= react_component('Home::Clock') %>

See Ruby-Hyperllop.io for further examples.

Creating Router Components

rails g hyperloop:router Home::Show

Will make the router component app/views/components/home/show.rb

See Ruby-Hyperllop.io for further examples.

How it works

(details of each gem install showing which files are added and how Rails is configured)

[barriehadfield]

@loicboutet has suggested rails g hyperloop:install_all which will install all the gems with the defaults

[zetachang]

It's cool to generate webpack or npm template but I am wondering is there any best practice on
integrating webpack with rails out there people are using currently?

[barriehadfield]

@catmando suggestd:
perhaps :all could be synonym for install_all ?
also drop
--include-client-sync
and instead have --use-simple-poller
other than that seems great

[catmando]

@zetachang. I think @barriehadfields approach is based on looking at current approaches, and represents best practice. Even for those not interested in Opal ( whaaaa?) I am recommending following the scheme, Barrie lays ou