Creating an Ember Addon for Airtable API

I recently found Airtable service and wanted to use it as a backend for my Ember apps. Unfortunately they don’t seem to follow any particular API specification (ex.: JSON API). Ember Data serializers, plus some tweaking, saved the day!

See my previous post: Learning Ember.js: Playing with Fieldbook API

Sources

• Ember Addon: https://emberobserver.com/addons/ember-airtable
• Sample Application Code: https://github.com/benoror/ember-airtable/tree/master/tests/dummy/app
• Sample Base: https://airtable.com/shrzIlmMhgZqi11nu

Long Story

Recently I found another interesting “cloud-spreadsheet-database” SaaS called Airtable:

“Airtable is a modern database created for everyone”

The feature set looks amazing, and after trying it out and porting some PoC databases I really wanted to play with it.

Since the last time I attempted to consume a 3rd-party API I have learn lots of new stuff about Ember.js ways of conducting business, like conventions (links😑 I’m looking at you), addons, testing, long-etc.

Therefore it should be trivial to re-use my first attempt and adapt it to consume Airtable’s API, right? Let’s replicate the sample database from last time in Airtable and refactor the old code to use it:

Sample Base: https://airtable.com/shrzIlmMhgZqi11nu

First things first: Ember Data conventions

Authentication works with tokens, therefore the only change needed was to update the ApplicationAdapter with the new credentials and host:

At this point API responses look suspiciously similar to JSON API format 🤔, therefore my first attempt was to extend JSONAPISerializer, which unfortunately didn’t work out of the box 😞.

Meanwhile I contacted Airtable’s support via Intercom and asked if they followed any particular spec, which they fastly denied.

Serializers: Do we understand each other?

After some experimentation, and reading this excellent post by David Tang and this one from Ember Igniter , I came to the realization that the API format was actually more similar to RESTSerializer.

Time to get hands dirty with Ember Serializers

Airtable Serializer

I needed to do some kind of translation between Airtable’s out-of-sleeve API format and Ember Data, which in Ember jargon basically means:

“Override the Serializer which resembles it the most”

The result is the following (annotated) code snippet which performs the actual transformation:

airtable_serializer.js

Ember Addon: ember-airtable

Ultimately I decided to extract the serializer’s code into an Addon and share it to the Ember community.

The example app for our Airtable database lives as a dummy app inside the addon:

Sources

• Ember Addon: https://emberobserver.com/addons/ember-airtable
• Github Repo: https://github.com/benoror/ember-airtable
• NPM: https://www.npmjs.com/package/ember-airtable

What’s next?

So far this works for simple read-only queries and belongsTo relationships. More complex transformations are needed to support more complex data types (ex. attachments, rollups, lookups) and associations (hasMany, [multi-]selects). Nevertheless I would like to properly test the addon before proceeding 😇

Sooner than later: Test-driven Development for Ember Serializers…

Resources

Fit Any Backend Into Ember with Custom Adapters & Serializers

Which Ember Data Serializer Should I Use? - The JS Guy

Guide to Developing Addons and Blueprints for Ember CLI Raw:
https://gist.github.com/kristianmandrup/ae3174217f68a6a51ed5

Creating a DatePicker Ember Addon:
http://www.edgycircle.com/blog/2014-creating-a-datepicker-ember-addon/