Thursday, April 24, 2014

Angular.js feature based file organisation

We mostly see type based organization being used for angular.js projects where files of same type (controllers, services, directives etc) are grouped in to different folders. While this approach is a simple and clean one, it starts to pain quickly.

Slowly I am moving towards feature based folder structure / organization for my angular.js projects. Here files are grouped by feature. For example, I might have a login folder which will contain core services and controllers which relates to login / auth processes (LoginController.js, User.js, LoginService etc).

Each such feature based folder has one file which declares the module and contains the config and run block for the module. Only thing to consider here is that the order in which files are loaded. The file containing the module declaration must be loaded before those files which uses it (defines services, controllers etc on the module).

If you are using lineman or similar grunt tools, this is easily done by reordering the file list. The rule I have is that first include the main application module. then include all module using a pattern similar to "path-to-files/**/*.module.js" and then include individual code file using a catch all pattern "path-to-files/**/*.js".

This also helps in testing modules separately and clearly helps us to define the modules - using the module feature of angular.js to the fullest.

Another useful trick is to define a constant on each module which contains all required configuration for the module. Example, define a loginConfig constant on login module which will hold URls to the varius API end points, event names triggered by the module and so on. It also helps us to easily mock the config object during testing.

Saturday, March 29, 2014

ng-socket -- an angularjs wrapper around SockJS

Take a look at ng-socket an Angular JS module which can be used to integrate SockJS in to your angular JS projects.

* Incoming messages are broadcasted on $rootScope.
* Can specify custom message parser and formatter for integrating in to your custom protocol.
* Rate limits broadcasting of incoming messages to twice per second and wraps the broadcast in $rootScope.$apply.
* Can re-connect on disconnects with configurable interval.
* Queues sent messages if socket is not yet connected and sends them on connection.
* Broadcasts open event on connection enabling users to send special messages before other messages (authentication etc).
* broadcastPrefix configuration option allows all broadcasted messages including received from server to be prefixed. Default is "$socket.".

Project is a lineman app. You can either clone the repo and get the app/ng-socket.js or run lineman build and get the minified version from dist/js/ng-socket.js.

More documentation to be followed.

Tuesday, March 25, 2014

Stop grunting, become a lineman

Lately I've been trying out various dev work flow -- an integrated testing / building setup using grunt for rich client side applications (we wanted bit more than our own hand written grunt files)

We are trying lineman for a new project now. lineman uses testem instead of karma and so far our experience has been good, jasmine tests are run automaticly when files change and results shown instantly on console as well as testem chrome runner (a big pluss).

lineman also has an API proxy feature where it can act as a proxy to your real back end server for specified URL prefix.

lineman's minimalistic approach compared to yeoman's generate everything approach might help lineman to become a standard tool in our toolbox.