Manage dependencies:

  1. using Bower: Bower will install each sub-project's dependencies for you
  2. using Git

Bundling(Compile+catenation+minification) resources into one file: set up a process to bundle dependency into two files (all.min.js & all.min.css).

  1. using a JavaScript task runner such as Grunt
  2. using a shell script

YEOMAN

yeoman or alternative cookiecutter app/project generator & builder

yo init --help
yo backbone # generates your application base and build workflow
yo backbone:model blog
yo backbone:collection blog
yo backbone:router blog
yo backbone:view blog
grunt serve

less 

cd /usr/local/bin
sudo npm_g update
sudo npm_g install less
# update
# global check
npm-check-updates -g
# global update
sudo npm -g update typescript
# si può usare npm anche per gestire i pacchetti locali a una app
npm-check-updates -u

typescript 

npm install -g typescript
tsc helloworld.ts

vedi anche google traceur per un approccio simile ma più conservativo

jsfmt 

npm install -g jsfmt

jslint preferire google closure

npm install -g jslint
npm install -g jshint

dependency manager

Bower

dependency manager for frontend.

npm is most commonly used for managing Node.js modules, but it works for the front-end too when combined with Browserify.

Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user).

allows you to install Github repositories as package sources if they are not listed on the official Bower repository.

# registered package
bower install jquery
# GitHub shorthand
bower install exp/test
# Git endpoint
bower install git://github.com/user/package.git
# URL
bower install http://example.com/script.js
 
cat bower.json
npm+browserify:

write code that uses require() in the same way that you would use it in Node.

With browserify, it becomes super-easy to concatenate all your modules into big minified files.

use dedupe to get rid of duplicated modules.

npm install uniq
// in main.js require('iniq')
browserify main.js -o bundle.js
// <script src="bundle.js"></script>

The one major downside is that NPM + Browserify only packages Javascript files, not CSS files or anything else.

to use a NPM package and Browserify it, it needs to be written in CommonJS format.

Minification

yui compressor è disponibile nel repository ed è ottimale.

yui-compressor web/css/frontend.css > web/css/frontend.css

yui compressor fa un buon lavoro anche con CSS.

csstidy è l'alternativa classica disponibile nel repository

per ottenere la maggior compressione possibile usa Google Closure Compiler

java -jar compiler.jar --js=a.js --js=b.js ... --js_output_file=out.js
java -jar compiler.jar \ 
     --js script.js \
     --create_source_map ./script-min.js.map \
     --source_map_format=V3 \
     --js_output_file script-min.js

Testing

js_testing

IDE

# install Visual Studio Code:
umake ide visual-studio-code