CodeOfficer.com

Preloading Fixture Data with Ember App Kit

2013-11-20T21:11:00Z

I’m currently using Ember App Kit on a client project and really enjoying the environment. Javascript build tools are what they are but Stefan Penner and crew have done a phenomenal job at making them not suck. I am ever so grateful.

Application needs vary of course, but mine delivers 85% of its data up front in one big payload. It’s safe for me to assume in production that this data will be there when the app is run, and data that isn’t will be fetched as needed via the RESTAdapter. In development and testing however, I’m using the FixtureAdapter which unfortunately doesn’t autoload non-async relationships defined in the model, even though the fixture data is there. I needed this data to behave in development and testing as it would in production. Fortunately, I stumbled upon a blog post over at Amalgamated Magic.

Below, I’ve made their solution work for Ember App Kit. I believe there are plans to make EAK’s resolver better at loading initializers for you, but for now this works.

In app/initializers/force_load_fixtures:

var initializer = {
  name: "force load fixtures",
  after: "store",
  initialize: function(container, application) {
    var store = container.lookup('store:main');

    Ember.keys(requirejs._eak_seen).filter(function(key) {
      return !!key.match(/^appkit\/models\//) && DS.Model.detect(require(key));
    }).map(function(key){
      var type = require(key);
      var typeKey = key.match(/^appkit\/models\/(.*)/)[1];
      if (type.FIXTURES) {
        store.pushMany(typeKey, type.FIXTURES);
      }
    });
  }
};

export default initializer;

Then in app.js load and execute our initializer:

import forceLoadFixturesInitializer from 'appkit/initializers/force_load_fixtures';

var App = Ember.Application.extend();

Ember.Application.initializer(forceLoadFixturesInitializer);

export default App;

Enjoy.

Ember Data: Faking a Composite Key

2013-10-03T20:11:00Z

I play a game in my spare time called Guild Wars 2 which recently made a public API for their community to build applications against. Among other things, it allows you to query for game events as they are happening in real time, which helps you play more efficiently. I started working on a little side project which takes it a step further and draws you a map of the surrounding area. It’s a work in progress, but you can check it out on Github.

I’ve been working with Ember and Ember Data for a little over a year now and use this project as a study to keep up on their latest and greatest features. I can’t say enough good things about Ember as a framework for javascript web applications, but this post is really about Ember Data.

While Ember Data has had its growing pains as a persistance library it’s shaping up quite nicely. I like how the new Beta’s adapter and serializer allow you to customize data coming into and going out of your app on a per-model basis. Particularly when building for a 3rd party API, you really need proper hooks to fine-tune the data exchange with your RESTful backend.

In earlier versions of Ember Data I found myself having to copy/paste/edit sizable chunks of library code into my own custom adapter or serializer. The necessary hooks were not present. This time around, I’m finding hooks in all the right places.

Straight from my project, here’s an example customization I did for the MapFloor model:

MapFloor Model

The json for the MapFloor endpoint does not return an id attribute. If you insert a model into the store without an ‘id’, the store will not know how to uniquely identiy that model from others of that type. One solution is to sythensize your own ‘id’ in the returned json. This is something you would usually do in the serializer for the model.

Complicating matters, the MapFloor endpoint also requires two ids to fetch a single MapFloor, composed of a continent_id and a floor … yet the json reponse does not return those values at all.

To clarify, this is what I need to hit:

https://api.guildwars2.com/v1/map_floor?continent_id=1&floor=2

And this is what I get back:

// notice there is no 'id' in this payload
{
  "texture_dims": [
    32768,
    32768
  ],
  "regions": {
    // lots of data map floor data
    }
  }
}

I felt I really wanted to be able to do something like:

store.find('mapFloor', '1.2');

Where 1.2 would expand to to the appropriate endpoint URL. My changes seemed appropriate for the adapter, especially since I also wanted to pass those values back to the serializer. This is the custom adapter I ended up with for my MapFloor model.

// App.ApplicationAdapter = DS.ActiveModelAdapter.extend();
App.MapFloorAdapter = App.ApplicationAdapter.extend({

  parseId: function(id) {
    var values = id.split('.');
    return {
      continent_id: values[0],
      floor_id: values[1]
    };
  },

  buildURL: function(type, id) {
      var parseId = this.parseId(id);
      var params = "?continent_id=%@&floor=%@".fmt(parseId['continent_id'], parseId['floor_id']);
    return this._super(type) + params;
  },

  find: function(store, type, id) {
    var parseId = this.parseId(id);
    return this.ajax(this.buildURL(type.typeKey, id), 'GET').then(function(json){
      json.id = id;
      json.continent_id = parseId['continent_id'];
      json.floor_id = parseId['floor_id'];
      return json;
    });
  },

  pathForType: function(type) {
    return Ember.String.underscore(type);
  }

});

My custom implementation of find parses my fake composite id and remembers its continent_id and floor_id values. Those values are used to construct the endpoint URL and also set values on the returned json. All this will later get handed off to the serializer and because the payload now includes a sythesized id the store will be happy and able to uniquely identify this specific MapFloor in the future.

Lastly, I overrode pathForType since I needed to hit a singularized version of the resource URL.

Hope you find this approach to faking a composite key in Ember Data useful.

Custom Built Guild Wars 2 Gaming Rig

2012-04-14T07:21:00Z

My good friend John Coppola recently told me that he had built his own CNC machine from scratch. Soon afterwards we discussed the idea that he would build my next gaming computer. I knew from personal experience how killer John’s computers were … he’s very meticulous, and really enjoys a cutom build. As excited as I was, I really didn’t know what to expect when he told me this one would be 100% of his own making, but I’ll get back to this …

In truth, I haven’t gamed much since 2006 when my wife and I got married, bought a house and had our first baby. I was a year or so into World of Warcraft then and had been agressively playing MMOs since 2001. I’d have dropped gaming all together that year if it weren’t for my fortunate discovery of Guild Wars.

Spoiler Alert: once you have kids you just can’t continue gaming like you used to.

Guild Wars was sort of like World of Warcraft for me, but geared more toward the casual gamer. More importantly, it had an MMO feel but there were no costly subscription fees. I didn’t feel compelled to play when I might have had more important things to do. When Guild Wars 2 was announced I knew right away I would be picking up my copy. I was also glad to hear that there would still be no subscription fees. Hallelujah!

To celebrate, I wanted to do something special and decided to go all out on building a proper gaming rig. John knew how to make this happen. I was already thoroughly intrigued by his CNC machine and come to find out, he had already put 200 hours into this custom case design he had in mind. Boy did that get my attention!

I could never have known how cool this machine would end up, and how perfectly it would fit my needs. You’ll notice that despite the etching on the side, there’s even a Guild Wars 2 look about it. Honestly, the etching was an afterthought. Johk John actually jokes that he chose white acrylic to make the case with because I was a mac guy and would eat it right up. He was right I guess. I present to you, the fruit of John’s labor …

And here are the system specs:

If you would like to have John make you something similar, feel free to contact him directly: john1253113@gmail.com

Use Association Extensions to Build Join Attributes on a HMT

2012-04-03T07:36:00Z

It’s common in Rails to use a has_many :through relationship to model User/Group Memberships. Sometimes we have extra data in the join that we would like to make use of, but getting that data in there can be combersome depending on our approach. For example, given the following diagram and schema:

ActiveRecord::Schema.define(:version => 20120324170519) do
  create_table "groups", :force => true do |t|
    t.string   "name"
    t.datetime "created_at", :null => false
    t.datetime "updated_at", :null => false
  end

  create_table "memberships", :force => true do |t|
    t.integer  "user_id"
    t.integer  "group_id"
    t.string   "role"
    t.datetime "created_at", :null => false
    t.datetime "updated_at", :null => false
  end

  create_table "users", :force => true do |t|
    t.string   "name"
    t.datetime "created_at", :null => false
    t.datetime "updated_at", :null => false
  end
end

We might deal directly with the join table to assign our additonal data.

@user = User.create(name: 'User 1')
@user = Group.create(name: 'Group 1')
@membership = Membership.create do |m|
  m.user = @user
  m.group = @group
  m.role = 'admin'
end
@user.admin? # => true
@user.editor? # => false

There’s a better way to pull this off …

@group.admins << @user
@user.admin? # => true
@user.editor? # => false

And this is how it’s done …

class User < ActiveRecord::Base
  has_many :memberships
  has_many :groups, :through => :memberships

  def admin?
    memberships.where(:role => 'admin').first
  end

  def editor?
    memberships.where(:role => 'editor').first
  end
end

class Membership < ActiveRecord::Base
  belongs_to :group
  belongs_to :user
end

class Group < ActiveRecord::Base
  has_many :memberships
  has_many :users, :through => :memberships

  has_many :admins, :through => :memberships, :source => :user,
    :conditions => "memberships.role = 'admin'" do
      def <<(admin)
        proxy_association.owner.memberships.create(:role => 'admin', :user => admin)
      end
  end

  has_many :editors, :through => :memberships, :source => :user,
    :conditions => "memberships.role = 'editor'" do
      def <<(editor)
        proxy_association.owner.memberships.create(:role => 'editor', :user => editor)
      end
  end
end

We’re defining an extension on our group’s has_many association which overrides the << method on that collection. We then tell the proxy association’s owner (which is our group object) to create the user/group join record, but with an additional role assignment of ‘admin’.

@group.admins << @user
@user.admin? # => true
@user.editor? # => false

Pretty expressive, thanks to ActiveRecord!

require 'test_helper'

class GroupTest < ActiveSupport::TestCase
  setup do
    @user_1 = User.create(name: 'User 1')
    @user_2 = User.create(name: 'User 2')
    @user_3 = User.create(name: 'User 3')
    @group = Group.create(name: 'Group 1')
  end

  test "No Memberships" do
    assert_equal @user_1.memberships.count, 0
  end

  test "@group.users << @user_1 sets nil role on membership" do
    @group.users << @user_1
    assert_equal @user_1.memberships.count, 1
    assert_equal @user_1.memberships.first.role, nil
  end

  test "@group.admins << @user_2 sets 'admin' role on membership" do
    @group.admins << @user_2
    assert_equal @user_2.memberships.count, 1
    assert_equal @user_2.memberships.first.role, 'admin'
  end

  test "@group.editors << @user_3 sets 'editor' role on membership" do
    @group.editors << @user_3
    assert_equal @user_3.memberships.count, 1
    assert_equal @user_3.memberships.first.role, 'editor'
  end

  teardown do
    User.delete_all
    Group.delete_all
    Membership.delete_all
  end
end

Easy environment specific seed files in Rails 3

2010-09-30T07:36:00Z

Tonight I discovered a lighthouse ticket by Postmodern. In it, he asks about adding an environment aware feature to the existing ‘rake db:seed’ task, so that he could seed specific environments differently. He even includes a patch.

If you haven’t used rails ‘rake db:seed’ functionality, its quite handy. I use it primarily during the pre-launch phase of development to fill out my app with dummy data, most of which is generated using the ffaker gem. That all works fine for me!

Up until … the time that my client wants to see progress and I need to deploy my code to a staging server. For that I require an entirely different set of seed data. Try as I might, I just can’t get the client used to my beloved “Lorem ipsum dolor”. So, environment aware seeding is very useful to me.

A neat thing about rake tasks is that when you redeclare a task, it doesnt overwrite the previous one. So, to use postmodern’s patch all you have to do is paste the following code to the bottom of your Rakefile and you’ll reap the full benefits.

namespace :db do
  task :seed => :environment do
    env_seed_file = File.join(Rails.root, 'db', 'seeds', "#{Rails.env}.rb")
    load(env_seed_file) if File.exist?(env_seed_file)
  end
end

Now you can do stuff like this! (the env specific file is loaded after the regular seeds file)

db
+-- seeds
|   +-- development.rb
|   +-- production.rb
|   +-- staging.rb
+-- seeds.rb

Thanks Postmodern

Form builders in Rails: field names and ids for Javascript

2010-09-27T08:50:00Z

I came up with a few convenience methods today which will help you discover what Rail’s generated NAME and ID attributes will be for a specific field on a given form builder object. Actually, I didn’t come up with them so much as extract them from the built in form builder. It was useful enough to me that I thought I might share my discovery. I can’t tell you how many times I’ve lazily hardcoded an ID onto a form element just to bypass the defaults.

Throw these 2 methods in your ApplicationHelper module:

def field_id_for_js(builder, attribute)
  "#{builder.object_name}[#{attribute.to_s.sub(/\?$/,"")}]".gsub(/\]\[|[^-a-zA-Z0-9:.]/, "_").sub(/_$/, "")
end

def field_name_for_js(builder, attribute)
  "#{builder.object_name}[#{attribute.to_s.sub(/\?$/,"")}]"
end

Here is an example using Rails nested attribute forms:

<%= form_for(@submission) do |f| %>
  <%= f.fields_for :project, @submission.project do |builder| %>

    <div class="field">
      <%= builder.label :classified, "Classified?" %><br/>
      <%= builder.radio_button :classified, false %> <%= builder.label :classified_false, "No" %>
      <%= builder.radio_button :classified, true %>  <%= builder.label :classified_true, "Yes" %>
    </div>

    <%= content_for(:head) do %>
      <script>
        $(function() {
          // get our value by name
          $("input[name='<%= field_name_for_js(builder, :classified) %>']").val();
          // set our value by ID
          $("#<%= field_id_for_js(builder, :classified_true) %>").attr('checked', true);
        });
      </script>
    <% end %>

  <% end %>
<% end %>

Would output:

<script>
  $(function() {
    // get our value by name
    $("input[name='submission[project_attributes][classified]']").val();
    // set our value by ID
    $("#submission_project_attributes_classified_true").attr('checked', true);
  });
</script>