Recommendation for JavaScript projects

Environment setup

Requirements:

• install node (npm)
• install bower (npm)

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

• .editorconfig TODO FIND A CONFIG
• .jshint / .jlint TODO FIND A CONFIG

Bower updates

• bower list (LIST LATEST DEPENDENCIES)
• Then specify the version to install: 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.

names

• User meaningful names in camel case!
• method names should start with lowercase
• variable names should start with lowercase
• class names should start with UpperCase

Bower main : define the version in dist Project dependencies

Tests karma, qunit?

max lines of code per js file? 250?

vendor.js vs app.js

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'
            }
        }

```