Frontend Development Workflow

Question

I'm curious if anyone else is using a similar approach to mine and or if anyone has a thought or suggestion to help improve the workflow. To my knowledge, this is a somewhat original method.

So basically, I'm using NodeJS to development my client side code. I use Grunt+watch to automatically concatenate and minify all of my projects source into a single .min file, which gets written to the public/js folder. However, for testing I use Jasmine-node and so I need to have an index file (for this purpose only) which requires all of the project source files. However, because I want the same code to run in both Node as well as the browser, I add everything to a global project namespace such as:

myApp.framework.someClass

Within the myapp.js file, I then export to node (if module + exports exists). This allows all of my objects to be exposed to node without having to add the module.exports stuff to every source file, and instead, I can either simple do:

(function() { myApp.framework.someClass = function() {...} })();

in each file, or even simply:

myApp.framework.someClass = function() {...}

This works incredibly well for the client because everything is already there in memory, however the downside is that in Node, sometimes trying to access another class within the myApp namespace will fail because I'm not using something like RequireJS to manage dependencies.

My thought was maybe to add requires to the files just as you would in a standard node app, but then in the build process, have any node specific stuff, stripped out.

Thoughts / comments please!

Answer 1

I have seen tricks like this being used to make the JS code be used in Node and browser environments. This is from async library:

// Node.js
if (typeof module !== 'undefined' && module.exports) {
    module.exports = async;
}
// AMD / RequireJS
else if (typeof define !== 'undefined' && define.amd) {
    define([], function () {
        return async;
    });
}
// included directly via <script> tag
else {
    root.async = async;
}

https://github.com/caolan/async/blob/master/lib/async.js

Hope that helps!