The examples we used so far can be executed directly and their external JavaScript dependencies such as jQuery and Underscore are referenced using publicly hosted files. This is great for quick examples and rapid prototyping but not a recommended practice when building any non-trivial application. We will next set up a development workflow that is popular with JavaScript developers. This workflow will help us build examples efficiently and is close to what a real-life JavaScript application will use.
The process of building modern JavaScript applications is greatly simplified by leveraging the rich ecosystem powered by Node.js.
Node.js is a software runtime for building server-side applications using JavaScript. Internally, it uses the V8 JavaScript engine that powers the Google Chrome web browser to compile JavaScript code to native code before executing it. It is based on an asynchronous event-driven programming model with non-blocking I/O operations using a single thread of execution. This makes it a great fit for real-time applications and high-throughput web applications. Node.js benefits from all the optimizations and performance improvements that Google Chrome has introduced since its first version and it runs on all major operating systems: Linux, Mac OS X, and Windows.
The Node.js installation comes with a built-in package manager called npm that contains a very large number of packages. There is an online npm packages repository available at https://www.npmjs.org/ that is used for installing or updating Node.js application dependencies.
For setting up the Node.js environment, we will target the Windows operating system first with Mac OS X and Linux covered next.
You need to install Node.js, which comes in 32-bit and 64-bit versions by going to https://nodejs.org/download/, and select one of the packages that matches your OS. You can use https://nodejs.org/dist/v0.12.7/node-v0.12.7-x86.msi for the 32-bit version or https://nodejs.org/dist/v0.12.7/x64/node-v0.12.7-x64.msi for the 64-bit version (the available versions may be different at the time you are reading this book). We have used the 64-bit version with the examples from this book. As an alternative installation method, you can use the Chocolatey package manager for Windows and install it using the instructions provided at https://chocolatey.org or by executing the following line in a Command Prompt with administrator privileges (opened using the Run as administrator option):
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
With Chocolatey now available, we can use it to install Node.js by executing the following command:
choco install -y node.js
On Mac OS X, we will use the Homebrew package manager for OS X that can be installed by following the instructions at http://brew.sh or by executing the following command line in the terminal:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
With Homebrew now available, we can use it to install Node.js by executing the following command:
brew install node
Ubuntu 14.04 was the target Linux distribution used to test the examples from this book, but you should be able to use any Linux distribution you prefer. Ubuntu comes with its built-in package manager, and we will use it to execute the commands requires to register the Node.js repository used in this book (more details at http://bit.ly/1hcVaMm):
sudo apt-get install -y curl curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -
With the Node.js repository now configured in Ubuntu, we can install Node.js with the following command:
sudo apt-get install -y nodejs
To verify that Node.js has installed correctly, we need to open the OS-specific Command Prompt and execute the following command:
node -v
If you see v0.12.07 on the screen, it means that Node.js has installed correctly, and we can execute all the examples from this book without any other OS-level changes.
Note
We will explore more about Node.js and npm packages in Chapter 5, Using Underscore.js in the Browser, on the Server, and with the Database.
With Node.js installed, we have access to its large repository of development tools and libraries provided through npm. We will use npm to install Bower, which is a package manager optimized for web sites and web applications. Bower is very similar to npm with the main difference being that Bower packages maintain a flat dependency tree as opposed to npm packages that maintain a deep nested dependency tree. For example, if two Bower packages have a dependency on Underscore, only one version of the Underscore package will be installed. If two npm packages have a dependency on Underscore, each package will install its Underscore package separately (although npm 3 will use flat dependencies by default similar to Bower).
Note
Bower has a dependency on the Git source control system, which can be installed from this location http://git-scm.com/downloads.
To install Bower, you need to open a Command Prompt and execute this npm command:
npm install -g bower
Notice the -g npm command-line switch, which installs the package in the machine specific npm packages folder. By default, npm packages are installed relative to the current directory unless this command switch is specified. From now on, Bower will be available to all our examples regardless of the folder in which they reside.
Next, we will use the previous example found in the underscore.map.reduce-revealing-module folder from the source code for this chapter and transform it into a new example that leverages Bower for package management.
By running the following command in the example folder, we will create a bower.json file that holds metadata about the current project and its dependencies:
bower init
When running this command, there are a series of Command Prompt options that can be accepted with their default values. The values will be updated in the bower.json file. Next, we will install the Bower packages that match the required JavaScript library dependencies for jQuery and Underscore:
bower install jquery#2.1.4 --save bower install underscore#1.8.3 --save
Notice the package name jquery followed by the version target #2.1.4 that ensures that we are using only a specific version of a Bower package rather than the latest version available when we omit the version target. The last command-line switch --save will persist the package information in the bower.json file allowing an easy restore for the Bower packages if they get deleted locally or they are not committed with the source code for the current project.
We now have the two JavaScript libraries installed in the current folder within a bower_components subfolder, which is the default Bower location for storing packages.
We can now change the JavaScript references in the index.html file to point to the two local Bower packages rather than the online hosted files:
<script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/underscore/underscore.js"></script>
I have also moved the inline JavaScript code into two separate files called awardAgeCalculator.js and index.js that separate the core functionality in the former from the output specific code in the latter. You can find the example in the underscore.map.reduce-with-local-dependencies folder from the source code for this chapter.
By leveraging Bower, we can quickly reference any JavaScript library that is needed while making it very easy to share the current project with other developers or even publish it to the Bower package repository.
We are approaching the end of the first chapter, and so far, we have not mentioned any tool for editing the code used in the example. Actually, we don't really have to as modern JavaScript development relies on a command-line-based tool chain usually based on Node.js. The workflow we established for exploring the examples from this book does not require a specific visual editor to be installed. You could just use the default operating system text editor and stop at that. However, it is worth mentioning the existing rich ecosystem of JavaScript visual editors and IDEs that is available if you want to benefit from additional functionality.
There are both commercial and free to use tools available, and they are separated into two categories: tools that have a main focus on Node.js and JavaScript-based development, and tools for general development that support Node.js and JavaScript through a plugin system. Note that we mentioned both Node.js and JavaScript as requirements for any editor or IDE as Node.js will be used extensively later on in this book.
Out of the Node.js and JavaScript-specific commercial tools, it is worth mentioning WebStorm IDE (more details at https://www.jetbrains.com/webstorm/) and Cloud9 online IDE that allows browser-based JavaScript development among other languages (more details at https://c9.io/). There is even a free Microsoft Visual Studio plugin called Node.js Tools for Visual Studio development (more details at http://nodejstools.codeplex.com/).
Out of the editors supporting JavaScript via their plugin system, I will mention the commercial editor Sublime Text (free trial available, more details at http://www.sublimetext.com/) and the free and open editor Atom (https://atom.io/). Atom itself was built using Node.js, has a rich plugin ecosystem, and is the editor used to author all the code from this book. To install Atom, you can follow the instructions available at http://bit.ly/1EiGYwn.
Of course there are many other tools available out there, but these are the ones that I personally found useful for learning how to build JavaScript applications.
You can execute all the examples from this book without having to install or configure anything just by using Cloud9 IDE (free registration required) at the project address https://ide.c9.io/alexpop/underscorejs-examples.