Fiddling with React and a Minimal Rack App

rubyreact

I’ve been experimenting with Pivotal Labs’ Heroku-like web services recently, and since they charge by memory usage, I decided to try to make an app as low-memory-usage as I could manage. It also served as a good excuse to try out React (since I didn’t need or want something with a database backing it) and bare-bones Rack (since up to now the bare-bones-est tool I’ve used is Sinatra).

The code can be seen here. It’s an app to plan out when to add things to a stir-fry recipe (since I’m also trying to get better at that). I wanted to keep using many of the tools I’m partial toward, so it isn’t as bare-bones as it would be if I were willing to, for example, write raw non-sassy css. All in all, it uses Rack, React, Materialize, slim, sass, highcharts, and autoprefixer (via autoprefixer-rails). Slim, autoprefixer, and sass are used via Rack middleware. The rest are included via CDNs. It clocks in at just under 60MB of memory use in production.

a small table showing memory usage at 59.9mb and disk usage at 90.6mb

Learning Rack may have been the most interesting part. Getting the preprocessing for sass, slim, and autoprefixer was simple once I got the hang of it. The whole Rack part is essentially “write this css file from this sass file” (”use Sass::Plugin::Rack”), “write this prefixed css file from the current css file” (”use ToPrefixed”), “write this html file from this slim file” (”use SlimToHTML”), “run the app” (”run lamba { … }”). About what you’d expect in retrospect.

class SlimToHTML
  def initialize(app)
    @app = app
  end

  def call(env)
    status, header, body = @app.call(env)

    html = Slim::Template.new('public/index.slim').render

    File.open('public/index.html', "wb") do |file|
      file.write(html)
    end
  end
use Sass:Plugin::Rack
use ToPrefixed
use SlimToHTML

use Rack::Static,
  :urls => ["/images", "/js", "/stylesheets"],
  :root => "public"

run lambda { |env| 
  FileUtils.touch('public/index.html')

Using React was easy to get the hang of conceptually. My relative inexperience with doing interesting things with Javascript was more of an impediment than the framework was.

Time to go find things to stir fry.