HyperModel
HyperModel extends Rails ActiveRecord models so that you have direct access to them on the client, using the same ActiveRecord classes and methods as you would on the server. Nothing new to learn, or configure, just plug in and go.
This Page Under Construction
In Hyperstack, your ActiveRecord Models are available in your Isomorphic code.
Components, Operations, and Stores have CRUD access to your server side ActiveRecord Models, using the standard ActiveRecord API.
In addition, Hyperstack implements push notifications (via a number of possible technologies) so changes to records on the server are dynamically pushed to all authorized clients.
In other words, one browser creates, updates, or destroys a Model, and the changes are persisted in ActiveRecord models and then broadcast to all other authorized clients.
You access your Model data in your Components, Operations, and Stores just like you would on the server or in an ERB or HAML view file.
If an optional push transport is connected Hyperstack broadcasts any changes made to your ActiveRecord models as they are persisted on the server or updated by one of the authorized clients.
Some Models (or even parts of Models) can be designated as server-only which means they are not available to the client code.
For example, consider a simple model called Dictionary
which might be part of Wiktionary type app.
Here is a very simple Hyperstack Component that shows a random word from the dictionary:
This is the entire code. There are no application APIs needed. The synchronization between server and client is completely taken care of by HyperModel. If you have an existing code base little to updates to your existing Models is needed, and you will use the same ActiveRecord API you have been using.
Isomorphic Models
Depending on the architecture of your application, you may decide that some of your models should be Isomorphic and some should remain server-only. The consideration will be that your Isomorphic models will be compiled by Opal to JavaScript and accessible on he client (without the need for a boilerplate API) - Hyperstack takes care of the communication between your server-side models and their client-side compiled versions and you can use Policy to govern access to the models.
In order for Hyperstack to see your Models (and make them Isomorphic) you need to move them to the hyperstack/models
folder. Only models in this folder will be seen by Hyperstack and compiled to Javascript. Once a Model is on this folder it ill be accessable to both your client and server code.
Location of Models | Scope |
| Server-side code only |
| Isomorphic code (client and server) |
ActiveRecord API
Hyperstack uses a subset of the standard ActiveRecord API to give your Isomorphic Components, Operations and Stores access to your server side Models. As much as possible Hyperstack follows the syntax and semantics of ActiveRecord.
Interfacing to React
Hyperstack integrates with React (through Components) to deliver your Model data to the client without you having to create extra APIs or specialized controllers. The key idea of React is that when state (or params) change, the portions of the display effected by this data will be updated.
On the client each database record being used by the client is represented as an observable store (see the chapter on HyperState for details) which will mutate as server side data is loaded or changes. When these states change the associated parts of the display will be updated.
A brief overview of how this works will help you understand the how HyperStack gets the job done.
Rendering Cycle
On the UI you will be reading models in order to display data.
If during the rendering of the display the Model data is not yet loaded, placeholder values (the default values from the database schema) will be returned by Hyperstack.
Hyperstack then keeps track of where these placeholders (or DummyValue
s) are displayed, and when they do get loaded, those parts of the display will re-render.
If later the data changes (either due to local user actions, or receiving push updates) then again any parts of the display that were dependent on the current values will be re-rendered.
You normally do not have to be aware of this. Just access your Models using the normal scopes and finders, then compute values and display attributes as you would on the server. Initially the display will show the placeholder values and then will be replaced with the real values.
Prerendering
During server-side pre-rendering, Hyperstack has direct access to the server so on initial page load all the values will be loaded and present.
Lazy Loading
Hyperstack lazy loads values, and does not load any thing until an explicit displayable value is requested. For example Todo.all
will have no action, but Todo.all.pluck[:title]
will return an array of titles.
At the end of the rendering cycle the set of all values requested will be merged into a tree structure and sent to the server, returning the minimum amount of data needed.
Load Cycle Methods
There are a number of methods that allow you to interact with this load cycle when needed. These are documented below.
Class Methods
New and Create
new
: Takes a hash of attributes and initializes a new unsaved record. The values of any attributes not specified in the hash will be taken from the Models default values specified in the data base schema.
If new
is passed a native javascript object it will be treated as a hash and converted accordingly.
create
: Short hand for new(...).save
. See the save
instance method for details on how saving is done.
Scoping and Finding
scope
and default_scope
: Hyperstack adds four new options to these methods: joins
, client
, select
and server
. The joins
option provides information on how the scope will be joined with other models. The client
and select
options allow scoping to be done on the client side to offload this from the server, and the server
option is there just for symmetry with the other options.
unscoped
and all
: These builtin scopes work just like standard ActiveRecord.
BTW: to save typing you can skip the all
: Models will respond like enumerators.
where
: The where method can be used to filter records:
The
where
method is implemented internally as a scope on the client that will execute the where method on the server. If the parameters to the where method the scope will be updated on the client, but using SQL in the where as in the above example will get executed on the server.
find
: takes an id and delivers the corresponding record.
find_by
: takes a single item hash indicating an attribute value pair to find.
find_by_...
: i.e. find_by_first_name
these methods will find the first record with a matching attribute.
limit
and offset
: These builtin scopes behave as they do on the server:
Applying Class Methods to Collections
Like Rails if you define a class method on a model, you can apply it to a collection of those records, allowing you to chain methods with scopes (and relationships)
Relationships and Aggregations
belongs_to, has_many, has_one
: These all work as on the server. However it is important that you fully specify both sides of the relationship.
Note that on the client the linkages between relationships are live and direct. In the above example this works:
but this may not:
composed_of
: You can create aggregate models like ActiveRecord.
Similar to the linkages in relationships, aggregate records are represented on the client as actual independent objects.
Defining server methods
Normally an application defined instance method will run on the client and the server:
Sometimes it is desirable to only run the method on the server. This can be done using the server_method
macro:
When the method is first called on the client the default value will be returned, and there will be a reactive update when the true value is returned from the server.
To force the value to be recomputed at the server append a !
to the end of the name, otherwise the last value returned from the server will continue to be returned.
Model Information
column_names
: returns a list of the database columns.
columns_hash
: returns the details of the columns specification. Note that on the server columns_hash
returns a hash of objects specifying column information. On the client the entire structure is just one big hash of hashes.
abstract_class=
, abstract_class?
, primary_key
, primary_key=
, inheritance_column
, inheritance_column=
, model_name
: All work as on the server. See ActiveRecord documentation for more info.
Instance Methods
Attribute and Relationship Getter and Setters
All attributes have an associated getter and setter. All relationships have a getter. All belongs_to
relationships also have a setter. has_many
relationships can be updated using the push (<<
) operator or using the delete
method.
In addition if the attribute getter ends with a bang (!) then this will force a fetch of the attribute from the server. This is typically not necessary if push updates are configured.
Saving
The save
method works like ActiveRecord save, except it returns a promise that is resolved when the save completes (or fails.)
After a save operation completes the models will have an errors
hash (just like on the server) with any validation problems.
During the save operation the method saving?
will return true
. This can be used to instead of (or with) the promise to update the screen:
Destroy
Like save
destroy returns a promise that is resolved when the destroy completes.
After the destroy completes the record's destroyed?
method will return true.
Other Instance Methods
new?
returns true if the model is new and not yet saved.
primary_key
returns the primary key for the model
id
returns the value of the primary key for this instance
model_name
returns the model_name.
revert
Undoes any unsaved changes to the instance.
changed?
returns true if any attributes have changed (always true for a new model)
dup
duplicate the instance.
==
two instances are the same if it is known that they reference the same underlying table row.
..._changed?
(i.e. name_changed?) returns true if the specific attribute has changed.
itself
returns the record, but will override lazy loading and force a load of at least the model's id.
Load and Render Cycle
loading? and loaded?
All Ruby objects will respond to these methods. If you want to put up a "Please Wait" message, spinner, etc, you can use the loaded?
or loading?
method to determine if the object represents a real loaded value or not. Any value for which loaded?
returns false
(or loading?
returns true
) will eventually load and cause a re-render
Hyperstack::Model.load method
Sometimes it is necessary to insure values are loaded outside of the rendering cycle. For this you can use the Hyperstack::Model.load
method:
Force Loading Attributes
Normally you will simply display attributes as part of the render method, and when the values are loaded from the server the component will re-render.
Sometimes outside of the render method you may need to insure an attribute (or a server side method) is loaded before proceeding. This is typically when you are building some kind of higher level store.
The load
method takes a list of attributes (symbols) and will insure these are loaded. Load returns a promise that is resolved when the load completes, or can be passed a block that will execute when the load completes.
Think hard about how you are using this, as Hyperstack already acts as flux store, and is managing state for you. It may be you are just creating a redundant store!
Client Side Scoping
By default scopes will be recalculated on the server. For simple scopes that do not use joins or includes no additional action needs to be taken to make scopes work with Hyperstack. For scopes that do use joins, or if you want to offload the scoping computation from the server to the client read this section.
ActiveRecord Scope Enhancement
When the client receives notification that a record has changed Hyperstack finds the set of currently rendered scopes that might be effected, and requests them to be updated from the server.
On the server scopes are a useful way to structure code. On the client scopes are vital as they limit the amount of data loaded, viewed, and updated in the browser. Consider a factory floor management system that shows job state as work flows through the factory. There may be millions of jobs that a production floor browser is authorized to view, but at any time there are probably only 50 being shown. Using ActiveRecord scopes is the way Hyperstack keeps the data requested by the browser limited to a reasonable amount.
To make scopes work efficiently on the client Hyperstack adds some features to the ActiveRecord scope
and default_scope
macros. Note you must use the scope
macro (and not class methods) for things to work with Hyperstack.
The additional features are accessed via the :joins
, :client
, and :select
options.
The :joins
option tells the Hyperstack client which models are joined with the scope. You must add a :joins
option if the scope has any data base join operations in it, otherwise if a joined model changes, Hyperstack will not know to update the scope.
The :client
and :select
options provide the client a way to update scopes without having to contact the server. Unlike the :joins
option this is an optimization and is not required for scopes to work.
How it works
Consider this scope on the Todo model
The joins 'comments.author' relationship is inverted so that we have User 'has_many' Comments which 'belongs_to' Todos.
Thus we now know that whenever a User or a Comment changes this may effect our with_managers_comments scope
Likewise 'owner' becomes User 'has_many' Todos.
Lets say that a user changes teams and now has a new manager. This means according to the relationships that the User model will change (i.e. there will be a new manager_id in the User model) and thus all Todos belonging to that User are subject to evaluation.
While the server side proc efficiently delivers all the objects in the scope, the client side proc just needs to incrementally update the scope.
Configuring the Transport
Hyperstack implements push notifications (via a number of possible technologies) so changes to records on the server are dynamically pushed to all authorized clients.
The can be accomplished by configuring one of the push technologies below:
Push Technology | When to choose this... |
The easiest push transport is the built-in simple poller. This is great for demos or trying out Hyperstack but because it is constantly polling it is not suitable for production systems or any kind of real debug or test activities. | |
If you are using Rails 5 this is the perfect route to go. Action Cable is a production ready transport built into Rails 5. | |
Pusher.com is a commercial push notification service with a free basic offering. The technology works well but does require a connection to the internet at all times. | |
The Pusher-Fake gem will provide a transport using the same protocol as pusher.com but you can use it to locally test an app that will be put into production using pusher.com. |
Setting up Simple Polling
The easiest push transport is the built-in simple poller. This is great for demos or trying out Hyperstack but because it is constantly polling it is not suitable for production systems or any kind of real debug or test activities.
Simply add this initializer:
That's it. Hyperstack will use simple polling for the push transport.
Setting up Action Cable
To configure Hyperstack to use Action Cable, add this initializer:
If you are already using ActionCable in your app that is fine, as Hyperstack will not interfere with your existing connections.
Otherwise go through the following steps to setup ActionCable.
Firstly, make sure the action_cable
js file is required in your assets.
Typically app/assets/javascripts/application.js
will finish with a require_tree .
and this will pull in the cable.js
file which will pull in action_cable.js
However at a minimum if application.js
simply does a require action_cable
that will be sufficient for Hyperstack.
Make sure you have a cable.yml file:
Set allowed request origins (optional):
By default action cable will only allow connections from localhost:3000 in development. If you are going to something other than localhost:3000 you need to add something like this to your config:
That's it. Hyperstack will use Action Cable as the push transport.
Setting up Pusher.com
Pusher.com provides a production ready push transport for your App. You can combine this with Pusher-Fake for local testing as well. You can get a free pusher account and API keys at https://pusher.com
First add the Pusher and Hyperstack gems to your Rails app:
add gem 'pusher'
to your Gemfile.
Next Add the pusher js file to your application.js file:
Finally set the transport:
That's it. You should be all set for push notifications using Pusher.com.
Setting up Pusher Fake
The Pusher-Fake gem will provide a transport using the same protocol as pusher.com. You can use it to locally test an app that will be put into production using pusher.com.
Firstly add the Pusher, Pusher-Fake and Hyperstack gems to your Rails app
add
gem 'pusher'
to your Gemfile.add
gem 'pusher-fake'
to the development and test sections of your Gemfile.
Next add the pusher js file to your application.js file
Add this initializer to set the transport:
That's it. You should be all set for push notifications using Pusher Fake.
Debugging
Sometimes you need to figure out what connections are available, or what attributes are readable etc.
Its usually all to do with your policies, but perhaps you just need a little investigation.
TODO check rr has become Hyperstack (as below)
You can bring up a console within the controller context by browsing localhost:3000/Hyperstack/console
Note: change rr
to wherever you are mounting Hyperstack in your routes file.
Note: in rails 4, you will need to add the gem 'web-console' to your development section
Within the context you have access to session.id
and current acting_user
which you will need, plus some helper methods to reduce typing
Getting auto connection channels:
channels(session_id = session.id, user = acting_user)
e.g.channels
returns all channels connecting to this session and user providing nil as the acting_user will test if connections can be made without there being a logged in user.Can a specific class connection be made:
can_connect?(channel, user = acting_user)
e.g.can_connect? Todo
returns true if current acting_user can connect to the Todo class. You can also provide the class name as a string.Can a specific instance connection be made:
can_connect?(channel, user = acting_user)
e.g.can_connect? Todo.first
returns true if current acting_user can connect to the first Todo Model. You can also provide the instance in the form 'Todo-123'What attributes are accessible for a Model instance:
viewable_attributes(instance, user = acting_user)
Can the attribute be viewed:
view_permitted?(instance, attribute, user = acting_user)
Can a Model be created/updated/destroyed:
create_permitted?(instance, user = acting_user)
e.g.create_permitted?(Todo.new, nil)
can anybody save a new todo? e.g.destroy_permitted?(Todo.last)
can the acting_user destroy the last Todo
You can of course simulate server side changes to your Models through this console like any other console. For example
Todo.new.save
will broadcast the changes to the Todo Model to any authorized channels.
Common Errors
No policy class If you don't define a policy file, nothing will happen because nothing will get connected. By default Hyperstack will look for a
ApplicationPolicy
class.Wrong version of pusher-fake (pusher-fake/base vs. pusher-fake/rspec) See the Pusher-Fake gem repo for details.
Forgetting to add
require pusher
in application.js file this results in an error like this:To resolve make sure you
require 'pusher'
in your application.js file if using pusher. DO NOT require pusher from your components manifest as this will cause prerendering to fail.No create/update/destroy policies You must explicitly allow changes to the Models to be made by the client. If you don't you will see 500 responses from the server when you try to update. To open all access do this in your application policy:
allow_change(to: :all, on: [:create, :update, :destroy]) { true }
Cannot connect to real pusher account If you are trying to use a real pusher account (not pusher-fake) but see errors like this
Check to see if you are including the pusher-fake gem. Hyperstack will always try to use pusher-fake if it sees the gem included. Remove it and you should be good to go. See issue #5 for more details.
Cannot connect with ActionCable. Make sure that
config.action_cable.allowed_request_origins
includes the url you use for development (including the port) and that you are usingPuma
.Attributes are not being converted from strings, or do not have their default values Eager loading is probably turned off. Hyperstack needs to eager load
Hyperstack/models
so it can find all the column information for all Isomorphic models.When starting rails you get a message on the rails console
couldn't find file 'browser'
Thehyper-component
v0.10.0 gem removed the dependency on opal-browser. You will have to add the 'opal-browser' gem to your Gemfile.On page load you get a message about super class mismatch for
DummyValue
You are still have the oldreactive-record
gem in your Gemfile, remove it from your gemfile and your components manifest.On page load you get a message about no method
session
fornil
You are still referencing the old reactive-ruby or reactrb gems either directly or indirectly though a gem like reactrb-router. Replace any gems likereactrb-router
withhyper-router
. You can also just removereactrb
, ashyper-model
will be included by thehyper-model
gem.You keep seeing the message
WebSocket connection to 'ws://localhost:3000/cable' failed: WebSocket is closed before the connection is established.
every few seconds in the console. There are probably lots of reasons for this, but it means ActionCable can't get itself going. One reason is that you are trying to run with Passenger instead of Puma, and trying to useasync
mode in cable.yml file.async
mode requires Puma.
Last updated