Consuming RESTful APIs with Premiere

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/albumsapi.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/albumsAlbum.find(1); // GET http://rest.learncode.academy/api/YOUR_NAME_HERE/albums/1Album.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.

Premiere Player_A music player for modern browsers_premiere-player.herokuapp.com

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.

Premiere_Javascript ORM for consuming Restful APIs_pedsmoreira.github.io

I hope you enjoy! :)