Recommendation for JavaScript projects

Set up your environment

Requirements: install node (npm) / install bower (npm)

You can use any editor, but we should use: http://editorconfig.org/ .editorconfig .jshint / .jlint

Bower updates…. bower list (LIST LATEST DEPENDENCIES) bower qunit#1.19.0 --save (THIS WILL SAVE THE VERSION ON THE BOWER.JSON)

Update the dependencies carefully (check if everything)

Project directories Let’s assume a project called: penny

src contains one or more source file. If only one source, give it the name penny-core.js, so you can add more afterwards: penny-utils.js, ... dist (NEVER EDIT IN THIS DIRECTORY) it contains: concat of all sources in src and the name of this file should be penny.js (not minified) concat minified should be called penny.min.js bundle with dependencies should be called penny.bundle.js

The bower.json main should have dist/penny.js

For templates they should be put in a folder called template (*tmp), but when compiled they should be put in a folder called build.

Concating for development concat: { options: { separator: ';\n' }, basic: { src: ['src/nextprot-core.js', 'src/nextprot-utils.js', 'src/nextprot-init-templates.js', 'build/compiled-templates.js'], dest: 'dist/nextprot.js' }, bundle: { src: ['vendor/js/es5-shim.min.js', //support for promises in IE lower than ie 9 'vendor/js/promise-6.1.0.js', //support for promises in IE 'bower_components/jquery/dist/jquery.js', 'bower_components/handlebars/handlebars.js', 'dist/nextprot.js'], dest: 'dist/nextprot.bundle.js' }

    },

Minify for production

    uglify: {
        options : {sourceMap : true},
        basic: {
            src: ['dist/nextprot.js'],
            dest: 'dist/nextprot.min.js'
        },
        all: {
            src: 'dist/nextprot.bundle.js',
            dest: 'dist/nextprot.bundle.js'
        }
    },

Bower main : define the version in dist Project dependencies

Tests

Line of Codes

A file should not contain more than 250 locs…. (try to split them up) use objects!