How to best use global service classes in Aurelia - aurelia

Question

I have some services which are used by many classes in my application. As an example this could be a LoggerService which logs messages to an internal store and prints them to the console.
This service could look something like this:
export class LoggerService {
let _logs = [];
addLog(msg) {
this._logs.push(msg);
console.log(this._logs.length + ': ' + msg);
}
}
I guess the usual way in Aurelia would be to use this class with dependency injection which works just fine since it uses a singleton per default. An example usage could then look something like this:
import {autoinject, Aurelia} from 'aurelia-framework';
import {LoggerService} from 'LoggerService';
#autoinject
export class SomeViewModel {
let _loggerService;
constructor(loggerService) {
this._loggerService = loggerService
}
somethingChanged() {
this._loggerService.addLog('Something changed...');
}
}
Basically this approach works just fine but it feels a little "clumsy" at a larger scale and I hope that it could be simplified:
Using dependency injection requires a lot of boilerplate code in each "using class" which unnecessarily "bloats" them (import statement, a dedicated class member which needs to be assigned in the constructor etc.).
I'm used to having such classes inside a dedicated namespace which lives in the window object. This allows me convenient debugging since I can call code like MyNamespace.LoggerService.addLog('blahblah'); directly from the command line. How do I accomplish this best with Aurelia?
Is there an more straight forward way which would also give me a better debug experience from the command line?

Answer 1

Honest answer? If you follow ES6 modular code conventions, not really. You will always be importing modules if and when you require them. There are things that you can do, which I'll go over in this answer.
You don't actually need to use Aurelia's dependency injection if you don't want to. However, that means that you'll have to handle the lifecycle of the object yourself. Because your object is a class, you'll have to call "new" on it when you import it. However, you can write your logging module differently, and instead of exporting a class, you can export a function, like so:
let _logs = [];
export var LoggerService = {
addLog: function (msg) {
_logs.push(msg);
console.log(_logs.length + ': ' + msg);
}
}
That way, all you have to do is import LoggerService and call LoggerService.addLog inside of your Aurelia view without having to inject it. This is a more functional approach than the class instantiation approach, which can work very well.
import {LoggerService} from 'LoggerService';
export class SomeViewModel {
constructor() {
}
somethingChanged() {
LoggerService.addLog('Something changed...');
}
}
Another thing you can do (I wouldn't recommend this) is simply make this a window variable. This would mean that you wouldn't have to import modules. This violates module principles, though, and things get messy really quickly. Modules exist for a reason, and although import statements do add lines of code, the benefits are worth the extra space.
For your use case, I would use the function-based approach above, and I would check a "development" flag somewhere so that you can expose properties on the window object so that you can access them through the console. (You wouldn't want this available in a production environment, as people could easily mess up your application.) Something like
if (developmentFlag) { window.loggerService = LoggerService; }
This may be the best approach until we're able to run the import statement in the console REPL.