Pedro Silva Moreira

@pedsmoreira

Consuming RESTful APIs with Premiere

January 3rd 2017

If you like Object Oriented development and ORMs like Rails Active Record and Laravel Eloquent, you'll love Premiere.

RESTful APIs have been very popular in the last couple years and although there's been a lot of progress on the backend side of things, the front-end still lacks some libraries to make the development process easier. That's when Premiere comes into action.

Although there are some good options available , like Restangular and JS-Data, Premiere comes as a simpler and Object Oriented alternative, focused on APIs; the goal is to bring the same simplicity given by Rails Active Record and Laravel Eloquent to your browser.

To do so, Premiere is centered on working around Models and provides normalization and methods like belongsTo, hasOne, find, all; which can be easily configured to cache and reduce the network usage on your application. To resolve the routes, Premiere uses RESTful standards, so you don't have to configure each one of them manually, to know more, please look at https://github.com/WhiteHouse/api-standards

How it Works

Premiere has a very simple flow to help handle your request while working doing smart caching, normalization, foreign keys and lets not forget about header parameters, with things like JWT and CSRF tokens.

Premiere Workflow

** Premiere uses Axios to handle HTTP requests

Let's see some code

import {Api, api, Model} from 'premiere';

Api.base = 'http://rest.learncode.academy/api/YOUR_NAME_HERE/';

/*
* Using API directly
*/

api.http().get('albums'); // GET http://rest.learncode.academy/api/YOUR_NAME_HERE/albums
api.http().post('albums'); // POST http://rest.learncode.academy/api/YOUR_NAME_HERE/albums

/*
* Using Models
*/

class Album extends Model {
static path = 'albums';

id: number;
name: string;
date: Date = new Date();

static normalize_date(timestamp: number): Date {
return new Date(timestamp);
}

static denormalize_date(date: Date): number {
return date.getTime();
}
}

Album.all(); // GET http://rest.learncode.academy/api/YOUR_NAME_HERE/albums
Album.find(1); // GET http://rest.learncode.academy/api/YOUR_NAME_HERE/albums/1
Album.save({name: 'new album'});// POST http://rest.learncode.academy/api/YOUR_NAME_HERE/albums

And if you prefer something on JSFiddle, here you go

http://jsfiddle.net/pedsmoreira/fqLuvjr1/

Premiere Player

There’s a Youtube music player implemented with Premiere + React + MobX, it’s available through Heroku.

If you want to know more about Premiere, please refer to the documentation. The project is 100% code coverage, you’re very welcome to collaborate and give suggestions.

I hope you enjoy! :)

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

More by Pedro Silva Moreira

More Related Stories