Elegant usage of JSON APIs in Hyperstack

[barriehadfield]

In my app, I want to use traditional REST APIs so I have greater control over which data I fetch and when I fetch it. My app is a mobile app used in a gym, so an internet signal cannot be assumed, so I need to fetch all the data the user might want and hold it in memory.

That said, I did not want to work with big complex multi-nested JSON arrays on the front end! I wanted an ORM for a JSON response, so I wrote this wonderful little recursive class which lets me treat a JSON array as a model which supports has_many relationships out the box!

I thought I would share here in case anyone else found it useful.

(Note there is no security or policy covered here to keep the example as simple as possible).

In the Rails controller:

class ApiController < ApplicationController
  def workout
    params.permit(:workout_id)
    @workout = Workout.find params[:workout_id]

    render "api/workout"
  end
end

I am using the RABL Gem to compose the JSON response, so I have a view which creates the JOSN which is a Workout model which includes two nested has_many associations ( primary_exercises and alternatives) each of which has their own child collection called exsets.

object @workout
attributes :id, :user_id, :created_at, :name, :prescribed_duration_mins
child primary_exercises: :primary_exercises do |e|
  exercise e
  child alternatives: :alternative_exercises do |e|
    exercise e
  end
end

def exercise(e)
  node(:id) { |e| e.id }
  node(:name) { |e| e.exercise_type.name }

  child :exsets do |es|
    node(:id) { |es| es.id }
    node(:prescribed_time_in_s) { |es| es.prescribed_time_in_s }
    node(:prescribed_weight_in_kg) { |es| es.prescribed_weight_in_kg }
  end
end

Then on the client, I have my wonderful recursive class:

class JsonModel
  include Hyperstack::State::Observable

  def initialize(path: nil, name: nil, json: nil)
    return get_data(path) if path
    init name, json
  end

  def loaded?
    observe @loaded
  end

  def inspect
    puts @name
    puts @json
  end

  def method_missing(m)
    return nil unless @json[@name][m]
    return @json[@name][m] unless @json[@name][m].class == Array

    a = []
    @json[@name][m].each do |slice|
      jm = JsonModel.new
      jm.init slice.keys.first, slice
      a << jm
    end
    return a
  end

  private

  def init(name, json)
    @name = name
    @json = json
  end

  def get_data(path)
    HTTP.get(path).then do |resp|
      puts "got #{path}"
      init(resp.json.keys.first, resp.json)
      mutate @loaded = true
    end.fail do |resp|
      puts resp.json
      alert "failed to get #{path}"
    end
  end
end

To use my Workout model in my client code, I load it in the before_mount lifecycle method:

@workout = JsonModel.new(path: "/api/workout/#{id}.json")

Then in my Component I can use the response just like a model:

if @workout.loaded?
  H1 { @workout.name }
  @workout.primary_exercises.each do |pe|
    H2 { pe.name } 
    pe.exsets.each do |set|
      H3 { .... }
    end
  end
else
  P { "Loading..." }
end

And TaDa! ORM-like wrapping of JSON responses :-)

[mathisto]

This is such a great idea. The devs at my last employer used a similar pattern with Hashie Mash. Check this out. Ooooh! and also the Mash source. I think you might find cool ideas to use in your JsonModel idea, specifically the access operators.

I love your idea of just passing raw JSON to the method and getting your quasi-object back. It's a really cool pattern and removes the cognitive overhead of switching context between JSON object and an ActiveRecord model.

[catmando]

This seems to be the critical problem:

In my app, I want to use traditional REST APIs so I have greater control over which data I fetch and when I fetch it. My app is a mobile app used in a gym, so an internet signal cannot be assumed, so I need to fetch all the data the user might want and hold it in memory.

Are there Rails models on the server? If so then the Hyperstack.load method can be used to load whatever data you need. You can also use the IsomorphicHelpers.before_first_load call back to run the load before the first component mounts.

[barriehadfield]

Thanks @catmando I did not realize I could load everything in advance with Hyperstack.load - that would have to be the model and all its associations (has_many) and their associations and all the fields I need as I cannot assume an internet connection, so the app (which is actually a mobile app) has all the data it is going to need for the user, regardless of which screen they go to. The advantage of pre-fetching it as one JSON request is the UI is very fast as everything has already been fetched.

I have just finished writing the save function, where I create an array of hashes of all changes the user makes then save them when there is an internet signal.

As a side note, the App UI is fast, fast, fast and indistinguishable from a native mobile app (using material UI). I am going to write a Flutter/Dart wrapper application that loads the Hyperstack UI for a full application experience. I will document all of that and publish it to the Hyperstack Implementations tutorial I have been writing. I think it's very exciting we can have a working Mobile solution with as little Dart/Flutter as possible and as much Ruby as possible.

I will open it up for people to try it out in the next few weeks...

[barriehadfield]

This is such a great idea. The devs at my last employer used a similar pattern with Hashie Mash. Check this out. Ooooh! and also the Mash source. I think you might find cool ideas to use in your JsonModel idea, specifically the access operators.

I love your idea of just passing raw JSON to the method and getting your quasi-object back. It's a really cool pattern and removes the cognitive overhead of switching context between JSON object and an ActiveRecord model.

@mathisto thank you very much for that! The Mash source code is extremely informative and I am certainly going to be inspired by that to take this class further.

[catmando]

@barriehadfield actually I believe (not 100% sure) that we can easily hack the policy mechanism to provide everything you need.

If data is available to the user (i.e. not protected by the policy) then you could just load it. I would see adding a few hooks into active record to give finer grain control.

i.e. adding preload some_scope to a model tells the system that some_scope should be loaded with all attributes available to the current acting_user.

adding preload some_relationship to a model tells the system that if a record is being preloaded then some_relationship also needs to be loaded unless not accessible to the current user.

[catmando]

HOWEVER I actually think the real problem (given limited connectivity) here is not addressed, and that is persisting the Hyperstack local mirror into cookies, and then reloading it, and resyncing it when the page first loads.

[lionelchauvin]

@barriehadfield I continued your idea and I implemented something similar to https://github.com/rails/activeresource but for hyperstack. I called it HyperResource :D

hyper_resource.rb

It needs more works but I think you could be interrested even in this state.

For instance, if you have a REST api for a blog:

/api/blogs
/api/blogs/:blog_id/articles  

you can define the following classes (in app/hyperstack/models):

class Blog < HyperResource
  def api_path; '/api/blogs'; end

  has_many :articles, class_name: 'Article', inverse_of: :blog  
end

class Article < HyperResource
  def api_path; '/api/blogs/:blog_id/articles'; end

  belongs_to :blog, class_name: 'Blog', inverse_of: :articles
end

Then you can retrieve articles of a blog:

Article.where(blog_id: 1).all

It is not perfect but, if your webservice implements it properly you can even do things such like:

Blog.includes(include: {articles: 1}).find(1) do |blog|
  blog.articles.each do |a|
    puts a.inspect
  end
end

Currently it doesn't load associations that are not included beforehand. I don't want to do that because it will inevitably cause performance problems.

On my webservice I used kaminari in order to manage pagination. You can then access each page:

Article.where(blog_id: 1).page(1).all do |articles|
  articles.each do |a|
    puts a.inspect
  end
end

with some work I successed to implement an HyperComponent that do an infinite scroll.

I hope it can help you. I took your approach because currently it is not possible to convert all my active records to hyper models.