Rapid Prototyping with JS: Agile JavaScript Development (2014)

I. QUICK START

2. Setup

Summary: suggestions for the toolset; step-by-step installation of local components; preparation for the use of cloud services.

“One of my most productive days was throwing away 1,000 lines of code.” - Ken Thompson

2.1 Local Setup

2.1.1 Development Folder

If you don’t have a specific development folder for your web development projects, you could create a Development folder in the Documents folder (path will be Documents/Development). To work on the code example, create a rpjs folder inside your web development projects folder, e.g., if you create a rpjs folder inside of the Development folder, the path will be Documents/Development/rpjs. You could use the Finder on Mac OS X or the following terminal commands on OS X/Linux systems:

1 $ cd ~/Documents

2 $ mkdir Development

3 $ cd Development

4 $ mkdir rpjs

Initial development environment setup.

To get the list of files and folders, use this UNIX/Linix command:

1 $ ls

or to display hidden files and folders, like .git:

1 $ ls -lah

Another alternative to $ ls is $ ls -alt. The difference between the -lah and the -alt options is that the latter sorts items chronologically and the former alphabetically.

Later, you could copy examples into the rpjs folder as well as create apps in that folder.

2.1.2 Browsers

We recommend downloading the latest version of the WebKit or Gecko browser of your choice: Chrome, Safari or Firefox. While Chrome and Safari already come with built-in Developer Tools, you’ll need the Firebug plug-in for Firefox.

Chrome dev tools.

Firebug and Developer Tools allow developers to do many things like:

· Debug JavaScript

· Manipulate HTML and DOM elements

· Modify CSS on the fly

· Monitor HTTP requests and responses

· Run profiles and inspect heap dumps

· See loaded assets such as images, CSS and JS files

Google tutorials for mastering web deb tools.

Great Chrome DevTools tutorials:

· Explore and Master Chrome DevTools with Code School

· Chrome DevTools videos

· Chrome DevTools overview

Mastering chrome DevTools.

2.1.3 IDEs and Text Editors

One of the best things about JavaScript is that you don’t need to compile the code. Because JS lives in and is run in a browser, you can do debugging right there, in a browser! Therefore, we highly recommend a lightweight text editor vs. a full-blown integrated development environment, or IDE, but if you are already familiar and comfortable with the IDE of your choice like Eclipse, NetBeans or Aptana, feel free to stick with it.

Sublime Text code editor home page.

Here is the list of the most popular text editors and IDEs used in web development:

· TextMate: Mac OS X version only, free 30-day trial for v1.5, dubbed The Missing Editor for Mac OS X.

· Sublime Text: Mac OS X and Windows versions are available, even better alternative to TextMate, unlimited evaluation period.

· Coda: all-in-one editor with FTP browser and preview, has support for development with/on an iPad.

· Aptana Studio: full-sized IDE with a built-in terminal and many other tools.

· Notepad ++: free Windows-only lightweight text editor with the support of many languages.

· WebStorm IDE: feature-rich IDE which allows for Node.js debugging; it’s developed by JetBrains and marketed as the smartest JavaScript IDE.

WebStorm IDE home page.

2.1.4 Version Control Systems

Version control system is a must-have even in an only-one-developer situation. Also many cloud services, e.g., Heroku, require Git for deployment. We also highly recommend getting used to Git and Git terminal commands instead of using Git visual clients/apps with a graphical user interface: GitX, Gitbox or GitHub for Mac.

Subversion is a non-distributed version control system. This article compares Git vs. Subversion.

Here are the steps to install and set up Git on your machine:

1. Download the latest version for your OS at http://git-scm.com/downloads.

Downloading latest release of Git.

2. Install Git from the downloaded *.dmg package, i.e., run *.pkg file and follow the wizard.

3. Find the terminal app by using Command + Space, a.k.a. Spotlight (please see the screenshot below), on OS X. For Windows you could use PuTTY or Cygwin.

Using Spotlight to find and run an application.

4. In your terminal, type these commands, substituting “John Doe” and johndoe@example.com with your name and email:

5. 1 $ git config --global user.name "John Doe"

6. 2 $ git config --global user.email johndoe@example.com

7. To check the installation, run command:

8. 1 $ git version

9. You should see something like this in your terminal window (your version might vary; in our case it’s 1.8.3.2):

10.1 git version 1.8.3.2

Configuring & Testing Git installation.

Generation of SSH keys and uploading them to SaaS/PaaS websites will be covered later.

2.1.5 Local HTTP Servers

While you can do most of the front-end development without a local HTTP server, it is needed for loading files with HTTP Requests/AJAX calls. Also, it’s just a good practice in general to use a local HTTP server. This way, your development environment is as close to the production environment as possible. You might want to consider the following modifications of the Apache web server:

· MAMP: Mac, Apache, MySQL, PHP personal web server for Mac OS X

· MAMP Stack: Mac app with PHP, Apache, MySQL and phpMyAdmin stack build by BitNami (Apple app store)

· XAMPP: Apache distribution containing MySQL, PHP and Perl for Windows, Mac, Linux and Solaris.

MAMP for Mac home page.

MAMP, MAMP Stack and XAMPP have intuitive Graphical User Interfaces (GUIs) which allow you to change configurations and host file settings.

2.1.6 Database: MongoDB

The following steps are better suited for Max OS X/Linux based systems but with some modification can be used for Windows systems as well, i.e., $PATH variable - step #3. Below, we describe the MongoDB installation from the official package, because we found that this approach is more robust and leads to less conflicts. However, there are many other ways to install it on Mac, for example using Brew, as well as on other systems.

1. MongoDB can be downloaded at http://www.mongodb.org/downloads. For the latest Apple laptops, like MacBook Air, select OS X 64-bit version. The owners of older Macs should browse the link http://dl.mongodb.org/dl/osx/i386.

1. Unpack the package into your web development folder (~/Documents/Development or any other). If you want, you could install MongoDB into /usr/local/mongodb folder.

2. Optional: If you would like to access MongoDB commands from anywhere on your system, you need to add your mongodb path to the $PATH variable. For Mac OS X the open system paths file with:

3. 1 sudo vi /etc/paths

or, if you prefer TextMate:

1 mate /etc/paths

And add this line to the /etc/paths file:

1 /usr/local/mongodb/bin

4. Create a data folder; by default, MongoDB uses /data/db. Please note that this might be different in a new versions of MongoDB. To create it, type and execute the following commands in the terminal:

5. 1 $ sudo mkdir -p /data/db

6. 2 $ sudo chown `id -u` /data/db

Initial setup for MongoDB: create the data directory.

If you prefer to use path other than /data/db you could specify it using the –dbpath option to mongod (main MongoDB service).

7. Go to the folder where you unpacked MongoDB. That location should have a bin folder in it. From there, type the following command in your terminal:

8. 1 $ ./bin/mongod

Starting-up the MongoDB server.

9. If you see something like

10.1 MongoDB starting: pid =7218 port=27017...

it means that the MongoDB database server is running. By default, it’s listening at http://localhost:27017. If you go to your browser and type http://localhost:28017 you should be able to see the version number, logs and other useful information. In this case MondoDB server is usingtwo different ports (27017 and 28017): one is primary (native) for the communications with apps and the other is web based GUI for monitoring/statistics. In our Node.js code we’ll be using only 27017.

Now, to take it even further, we can test to determine if we have access to the MongoDB console/shell, which will act as a client to this server. This means that we’ll have to keep the terminal window with the server open and running.

1. Open another terminal window at the same folder and execute:

2. 1 $ ./bin/mongo

You should be able to see something like “MongoDB shell version 2.0.6 …”

3. Then type and execute:

4. 1 > db.test.save( { a: 1 } )

5. 2 > db.test.find()

If you see that your record is being saved, then everything went well:

Running MongoDB client and storing sample data.

Commands find and save do exactly what you might think they do. ;-)

Detailed instructions are also available at MongoDB.org: Install MongoDB on OS X. For Windows, users there is a good walk-through article: Installing MongoDB.

2.1.7 Other Components

2.1.7.1 Node.js Installation

Node.js is available at http://nodejs.org/#download (please see the screenshot below). The installation is trivial, i.e., download the archive, run the *.pkg package installer. To check the installation of Node.js you could type and execute:

1 $ node -v

It should show something similar to this (we use v.0.8.1, but your version might vary):

1 v0.8.1

Node.js package already includes Node Package Manager (NPM). We’ll use NPM extensively to install Node.js modules.

Node.js home page.

2.1.7.2 JS Libraries

Front-end JavaScript libraries are downloaded and unpacked from their respective websites. Those files are usually put in Development folder (e.g., ∼/Documents/Development) for future use. Oftentimes, there is a choice between minified production version (more on that in AMD and Require.js section of the Intro to Backbone.js chapter) and extensively rich in comments development one.

Another approach is to hot-link these scripts from CDNs such as Google Hosted Libraries, CDNJS, Microsoft Ajax Content Delivery Network and others. By doing so the apps will be faster for some users, but won’t work locally at all without the Internet.

· LESS as a front-end interpreter is available at lesscss.org — you could unpack it into your development folder (~/Documents/Development) or any other.

· Twitter Bootstrap is a CSS/LESS framework. It’s available at twitter.github.com/bootstrap.

· jQuery is available at jquery.com.

· Backbone.js is available at backbonejs.org.

· Underscore.js is available at underscorejs.org.

· Require.js is available at requirejs.org.

2.1.7.3 LESS App

The LESS App is a Mac OS X application for “on-the-fly” compilation of LESS to CSS. It’s available at incident57.com/less.

LESS App for Mac home page.

2.2 Cloud Setup

2.2.1 SSH Keys

SSH keys provide a secure connection without the need to enter username and password every time. For GitHub repositories, the latter approach is used with HTTPS URLs, e.g., https://github.com/azat-co/rpjs.git, and the former with SSH URLs, e.g., git@github.com:azat-co/rpjs.git.

To generate SSH keys for GitHub on Mac OS X/Unix machines do the following:

1. Check for existing SSH keys

2. 1 $ cd ~/.ssh

3. 2 $ ls -lah

4. If you see some files like id_rsa (please refer to the screenshot below for an example), you could delete them or backup into a separate folder by using following commands:

5. 1 $ mkdir key_backup

6. 2 $ cp id_rsa* key_backup

7. 3 $ rm id_rsa*

8. Now we can generate a new SSH key pair using the ssh-keygen command, assuming we are in ~/.ssh folder:

9. 1 $ ssh-keygen -t rsa -C "your_email@youremail.com"

10.Answer the questions; it is better to keep the default name: id_rsa. Then copy the content of the id_rsa.pub file to your clipboard:

11.1 $ pbcopy < ~/.ssh/id_rsa.pub

Generating RSA key for SSH and copying public key to clipboard.

12.Or alternatively, open id_rsa.pub file in the default editor:

13.1 $ open id_rsa.pub

14.Or in TextMate:

15.1 $ mate id_rsa.pub

2.2.2 GitHub

1. After you have copied the public key, go to github.com, log in, go to your account settings, select “SSH key” and add the new SSH key. Assign a name, e.g., the name of your computer, and paste the value of your public key.

2. To check if you have an SSH connection to GitHub, type and execute the following command in your terminal:

3. 1 $ ssh -T git@github.com

If you see something like:

1 Hi your-GitHub-username! You've successfully authenticated,

2 but GitHub does not provide shell access.

then everything is set up.

4. While the first time connecting to GitHub, you can receive “authenticity of host … can’t be established” warning. Please don’t be confused with such a message — just proceed by answering ‘yes’ as shown on the screenshot below.

Testing SSH connection to GitHub for the very first time.

If for some reason you have a different message, please repeat steps 3-4 from the previous section on SSH Keys and/or re-upload the content of your *.pub file to GitHub.

More instructions are available at GitHub: Generating SSH Keys.

Windows users might find useful the SSH key generator feature in [PuTTY].

2.2.3 Windows Azure

Here are the steps to set up a Windows Azure account:

1. You’ll need to sign up for Windows Azure Web Site and Virtual Machine previews. Currently they have a 90-day free trial https://www.windowsazure.com/en-us/.

2. Enable Git Deployment and create a username and password. Then upload SSH public key to Windows Azure.

3. Install Node.js SDK, which is available at https://www.windowsazure.com/en-us/develop/nodejs/.

4. To check your installation type:

5. 1 $ azure -v

You should be able to see something like:

1 Windows Azure: Microsoft's Cloud Platform... Tool Version 0.6.0

6. Log in to Windows Azure Portal at https://windows.azure.com/.

Registering on Windows Azure.

7. Select “New,” then select “Web Site,” “Quick Create.” Type the name which will serve as the URL for your website, and click “OK.”

8. Go to this newly created Web Site’s Dashboard and select “Set up Git publishing.” Come up with a username and password. This combination can be used to deploy to any web site in your subscription, meaning that you do not need to set credentials for every web site you create. Click “OK.”

9. On the follow-up screen, it should show you the Git URL to push to, something like

10.1 https://azatazure@azat.scm.azurewebsites.net/azat.git

and instructions on how to proceed with deployment. We’ll cover them later.

11.Advanced user option: follow this tutorial to create a virtual machine and install MongoDB on it: Install MongoDB on a virtual machine running CentOS Linux in Windows Azure.

2.2.4 Heroku

Heroku is a polyglot agile application deployment http://www.heroku.com/ platform. Heroku works similarly to Windows Azure in the sense that you can use Git to deploy applications. There is no need to install Virtual Machine for MongoDB because Heroku has MongoHQ add-on.

To set up Heroku, follow these steps:

1. Sign up at http://heroku.com. Currently they have a free account; to use it, select all options as minimum (0) and database as shared.

2. Download Heroku Toolbelt at https://toolbelt.heroku.com. Toolbelt is a package of tools, i.e., libraries which consists of Heroku, Git, and Foreman. For users of older Macs get this client direclty. If you utilize another OS, browse Heroku Client GitHub.

3. After the installation is done, you should have access to the heroku command. To check it and log in to Heroku, type:

4. 1 $ heroku login

It will ask you for Heroku credentials (username and password), and if you’ve already created the SSH key, it will automatically upload it to the Heroku website:

The response to the successful $ heroku login command.

5. If everything went well, to create a Heroku application inside of your specific project folder, you should be able to run:

6. 1 $ heroku create

More detailed step-by-step instructions are available at Heroku: Quickstart and Heroku: Node.js.

2.2.5 Cloud9

Cloud9 is an in-browser IDE with which, by using your GitHub or BitBucket account, you can browse your repositories, edit them and deploy to Windows Azure or other services. No installations are needed; everything works in the browser, pretty much like Google Docs.