26 Aug 2015

My Front End Toolchain

Large Scale Javascript application presents many problems, with many more solutions.

This post will introduce the tools I use to build applications, to build a rather complex but trivial hello world.

In this post:

Node.js
NPM
Bower
Less
CoffeeScript (update: CoffeeScript sucks. Use ECMA6)

Node.js

Node.js allows you to run JavaScript from the command line. You can even build a whole server in it, but more excitingly, it has allowed Front End developers to build CLI tools, creating a huge ecosystem of excellent build and compile tools which fix the shortfalls of JavaScript.

Install it
run 'node'
Type 1+1, or whatever other function you like

You are now in a JavaScript console similar to the one in Chrome Inspector. Note that 'window' and 'document' are undefined, they are part of the browser API.

Use Ctrl+c twice to exit

Create a test javascript file:

console.log("Hello, World");

And run it with

node hello.js

Note: If 'node' doesn't work, you probably have 'nodejs' instead, which is arguably a better name for it, but you will need to sim-link nodejs to node in your $PATH for NPM to work.

NPM

Similar to apt-get or the Ubuntu Software center (or whatever Windows and Mac people use), NPM is a package manager for Node.js. Packages are written by JavaScript developers, and uploaded to the NPM website, which can then be installed by name.

npm install -g less

Will give you a new command 'lessc', which compiles .less files into css

The -g flag means 'globally', meaning available everywhere. The alternative is a local install, which creates a folder called node_modules in the CWD and installs the project there, this is more useful for libraries you wish to use in projects, but does not install executables into your path. e.g. grunt

If you get a permissions issue with npm... well it's a long story. See the docs

Personally I'm not keen on the documented way, it creates a potential security hole, but that's an unsolved problem

For project dependencies, NPM's control file is a 'package.json' file, which belongs in the root of your project, usually a git or hg repo

Make sure you .gitignore the node_modules folder

npm init

creates a package.json file, after asking many questions

npm install bower --save-dev

appends bower to the dev depends section of the package.json file

NPM dependencies can be either production or development, since we are only using node.js to create a web FE project, the distinction doesn't really make sense, so it doesn't really matter which you use

Bower

Bower is similar to NPM, with more of a focus on Front End libraries like Bootstrap, jquery etc

Bower does not have a global install option, it is all about installing local dependencies into the bower_components folder

You will want to .gitignore your bower_components directory

To get bower:

npm install -g bower

Then you can install local bower components, just like NPM

bower install jquery

You now have a bower_components folder with jquery in it, which you could include using a script tag in your HTML (But later we will use require.js for that)

Bower's control file is bower.json

bower init

will ask you many questions, and create a bower.json file

bower install --save jquery

will append jquery as a dependency in the bower.json file (and install it).

bower install

Installs all dependencies mentioned in the bower.json file, useful after cloning a repo

Less

Less is a 'compiles to css' language, I love it because a valid CSS file is also a valid Less file, that is, less is an extension on css, not a re-write.

I wrote on Less previously /2012/09/tools-of-trade-1-less-css.html The Docs: http://lesscss.org/

Create a file called less/main.less

@bg-color: #f00;
body {
    background: @bg-color;
}

lessc less/main.less

body {
    background: #ff0000;
}

To save it as a CSS file, pipe the output to main.css

lessc less/main.less > main.css

CoffeeScript

CoffeeScript takes the 'good parts' of JavaScript, and wraps them in a funky syntax.

I'm not as keen on CoffeeScript as I am on ES6 (with Babel), as ES6 has the advantage of less: Valid JS is valid ES6 - but I have a huge codebase in coffee already

npm install -g coffeescript

Create a new file called 'hello2.coffee'

console.log "Hello, World"

And run it with

coffee hello2.coffee

The coffee command can run coffeescript files directly

coffee -c hello2.coffee

Then have a look at the new file hello2.js

// Generated by CoffeeScript 1.9.3
(function() {
  console.log("Hello, World");

}).call(this);

daemonl_