Hackernoon logoConsuming RESTful APIs with Premiere by@pedsmoreira

Consuming RESTful APIs with Premiere

Author profile picture

@pedsmoreiraPedro Silva Moreira

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


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!ย :)


Join Hacker Noon

Create your free account to unlock your custom reading experience.