Design Proposal: Modularize AngularJS Service Creation

[jniles]

The majority of our client-side services implement CRUD on the backend database using HTTP verbs against a single API route. Almost every single service implements their read() and delete() methods identically. In general, they look like this:

var baseUrl = 'some/route/';

// read values from the database
function read(id, params) {
   var url = baseUrl.concat(id || '');
   return $http.get(url, { params : params })
   .then(util.unwrapHttpResponse);
}

// delete a record on the server
function del(id) {
  return $http.delete(baseUrl + id)
  .then(util.unwrapHttpResponse);
}

Since we have many services, this results in a lot of repeated code. This means more code to send to the client (larger JS payload) and maintain as a development team.

Here's an idea I'd like feedback on for maintaining this code more easily. We should simply inherit the identical methods from a prototype service using the awesome power of angular.extend(). For example, here is how you might create the prototype service and use it to create several services:

angular.module('bhima.services')
.service('PrototypeService', PrototypeService);

// this is the prototype service that will provide a base for all other services
// TODO - this might be cleaner as a factory.  Depends how $http and util are inherited.
function PrototypeService($http,util) {
  var service = this;

  // make sure that the methods have access to $http and util
  service.$http = $http;
  service.util = util;

  // bind props
  service.read = read;
  service.delete = del;

  // read values from the database
  function read(id, params) {
     var url = this.url.concat(id || '');
    return this.$http.get(url, { params : params })
      .then(this.util.unwrapHttpResponse);
  }.bind(service);

  // delete a record on the server
  function del(id) {
    return this.$http.delete(service.url.concat(id))
      .then(this.util.unwrapHttpResponse);
  }.bind(service);

  return service;
}

// in another file
angular.module('bhima.services')
.service('SomeService', SomeService);

SomeService.$inject = [
  'PrototypeService', '$http', 'util'
];

// Some other service definition
function SomeService($http, util, PrototypeService) {
  var service = this;

   // the server API target
  service.url = 'some/route/endpoint/';

  // add the read() and delete() methods to this service.
  angular.extend(service, PrototypeService);

  // specific methods defined below
  service.update = function update() { /* etc ... */ };
  service.create = function create() { /* etc ... */ };

  return service;
}

If we have close to one service per database API, this will get very large, very quickly. Modularizing our code like this might be a good idea.

@IMA-WorldHealth/local-contributors what do you think?

[DedrickEnc]

This is called inheritance (heritage) in OOP paradigm, it is good to make our code clean and easy to read and very rich in terms of design.

But it will also help us to save time in development because CRUD operation code will be factorized since it is common to many services.

I service will contain only method which are very specific to him.
Good thought, congratulation!

I am okay with that for conceptual perceptive and best practice.

Thanks

[jniles]

@DedrickEnc , thanks for the feedback! We'll look at developing a PR that refactors a lot of the services when they are more stable.