A simple jQuery+CakePHP3 service architecture

README.md

How to use

Enable resources and add extension on routes.php

<?php

...

Router::scope('/', function (RouteBuilder $routes) {
    $routes->addExtensions(['json']);
    $routes->resources('Users');
});

?>

Serialize results on controller

public function index()
{
    $this->paginate = [
        'contain' => ['Posts']
    ];
    $users = $this->paginate($this->Users);

    $this->set(compact('users'));
    $this->set('_serialize', ['users']);
}

Initialize the service:

userService.init({endpoint:'/users', format:'.json'});

Replace the pattern /users/:user/comments/:comment.json?sort=name&direction=asc with params {user:1, comment:15} and generate url: /users/1/comments/15.json?sort=name&direction=asc

Make a request to GET /users/1.json?sort=name&direction=asc

userService.get("/:id",{id:1}, {sort:'name', direction:'asc'});

post.service.js

;(function($){
    var postService = new Service($);
    postService.init({endpoint:'/posts', format:'.json'});    
    window.userService = postService;
})($, window)

service.js

function Service($) {
    const self = this;
    
    return {
        'init'  : init,
        'get'   : getRequest,
        'post'  : postRequest,
        'put'   : putRequest,
        'patch' : patchRequest,
        'delete': deleteRequest,
    };
    
    /**
     * Init service
     * @param config
     */
    function init (config) {
        self.config = config || {};
    }
    
    function getRequest (path, params, query, success, error) {
        return makeRequest(path, params, query, 'GET', success, error);
    }
    
    function postRequest (path, params, query, success, error) {
        return makeRequest(path, params, query, 'POST', success, error);
    }
    
    function putRequest(path, params, data, success, error) {
        return makeRequest(path, params, query, 'PUT', success, error);
    }
    
    function patchRequest(path, params, data, success, error) {
        return makeRequest(path, params, query, 'PATCH', success, error);
    }
    
    function deleteRequest(path, params, data, success, error) {
        return makeRequest(path, params, data, 'DELETE', success, error);
    }
    
    /**
     * Transform string with tokens and replace it with 'params' object values
     * str = "/resource/:id/:name", params = {id:1,name:'john'}, result = "/resource/1/jonh"
     * @param str
     * @param params
     * @param token
     */
    function makeUrl(str, params, token) {
        Object.keys(params).forEach(function (index) {
            str = str.replace(token + index, params[index]);
        });
        return str;
    }
    
    function makeRequest(path, params, queryData, method, success, error) {
        return $.ajax({
            method: method,
            url: makeUrl(self.config.endpoint + path, params, ":") + self.config.format,
            data: queryData,
            success: success,
            error: error
        });
    }
    
}

user.service.js

;(function($){
    var userService = new Service($);
    userService.init({endpoint:'/users', format:'.json'});    
    window.userService = userService;
})($, window)