JavaScript Fundamentals

Sold to
rusu.marius.gabriel@gmail.com
JavaScript and Node FUNdamentals

A Collection of Essential Basics
Azat Mardan
This book is for sale at http://leanpub.com/jsfun
This version was published on 2014-09-02
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
2013 - 2014 Azat Mardan
Tweet This Book!

Please help Azat Mardan by spreading the word about this book on Twitter!
The suggested tweet for this book is:
I just downloaded JavaScript and Node.js FUNdamentals!!! CC @azat_co
The suggested hashtag for this book is #JavaScriptFUNdamentals.
Find out what other people are saying about the book by clicking on this link to search for this
hashtag on Twitter:
https://twitter.com/search?q=#JavaScriptFUNdamentals
Also By Azat Mardan

Rapid Prototyping with JS
Oh My JS
Express.js Guide
Introduction to OAuth with Node.js
Contents
1. JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web
1.1 Expressiveness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2 Loose Typing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3 Object Literal Notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.4 Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.5 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.6 Prototypal Nature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.7 Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.8 No Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.9 Immediately-Invoked Function Expressions (IIFEs) . . . . . . . . . . . . . . . . . .
1.10 Keyword this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.11 Pitfalls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.12 Further Learning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
2
2
3
3
4
6
6
7
8
8
9
9
10
2. CoffeeScript FUNdamentals: The Better JavaScript

2.1 Semicolons, Whitespace and Parentheses . . . .
2.2 Vars . . . . . . . . . . . . . . . . . . . . . . . .
2.3 Conditions . . . . . . . . . . . . . . . . . . . . .
2.4 Functions . . . . . . . . . . . . . . . . . . . . .
2.5 Classes . . . . . . . . . . . . . . . . . . . . . . .
2.6 Arrays and Slicing . . . . . . . . . . . . . . . .
2.7 Splats . . . . . . . . . . . . . . . . . . . . . . .
2.8 Comprehensions . . . . . . . . . . . . . . . . . .
2.9 Conclusion . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
11
11
13
14
15
17
20
20
22
24
3. Backbone.js FUNdamentals: The Cornerstone of JavaScript MV* Frameworks .

3.1 Typical Backbone.js App Structure . . . . . . . . . . . . . . . . . . . . . . . .
3.2 Setting up Backbone.js App from Scratch . . . . . . . . . . . . . . . . . . . .
3.3 Dependencies for the Backbone.js Project . . . . . . . . . . . . . . . . . . . .
3.4 Working with Backbone.js Collections . . . . . . . . . . . . . . . . . . . . . .
3.5 Event Binding with Backbone.js and jQuery . . . . . . . . . . . . . . . . . .
3.6 Backbone.js Views and Subviews with Underscore.js . . . . . . . . . . . . . .
3.7 Super Simple Backbone Starter Kit . . . . . . . . . . . . . . . . . . . . . . . .
3.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
25
26
26
27
31
38
44
53
53
CONTENTS
4. Node.js FUNdamentals: JavaScript on The Server . . . . .

4.1 Read-Eval-Print Loop (a.k.a. Console) in Node.js . . . .
4.2 Launching Node.js Scripts . . . . . . . . . . . . . . . .
4.3 Node.js Process Information . . . . . . . . . . . . . . .
4.4 Accessing Global Scope in Node.js . . . . . . . . . . . .
4.5 Exporting and Importing Modules . . . . . . . . . . . .
4.6 Buffer is a Node.js Super Data Type . . . . . . . . . . .
4.7 __dirname vs. process.cwd . . . . . . . . . . . . . . . .
4.8 Handy Utilities in Node.js . . . . . . . . . . . . . . . .
4.9 Reading and Writing from/to The File System in Node.js
4.10 Streaming Data in Node.js . . . . . . . . . . . . . . . .
4.11 Installing Node.js Modules with NPM . . . . . . . . . .
4.12 Hello World Server with HTTP Node.js Module . . . .
4.13 Debugging Node.js Programs . . . . . . . . . . . . . . .
4.14 Taming Callbacks in Node.js . . . . . . . . . . . . . . .
4.15 Introduction to Node.js with Ryan Dahl . . . . . . . . .
4.16 Moving Forward with Express.js . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
54
55
56
56
57
57
59
59
59
60
60
61
61
62
62
63
63
5. Express.js FUNdamentals: The Most Popular Node.js Framework

5.1 Express.js Installation . . . . . . . . . . . . . . . . . . . . . . .
5.2 Express.js Command-Line Interface . . . . . . . . . . . . . . .
5.3 Routes in Express.js . . . . . . . . . . . . . . . . . . . . . . . .
5.4 Middleware as The Backbone of Express.js . . . . . . . . . . .
5.5 Configuration of an Express.js App . . . . . . . . . . . . . . .
5.6 Jade is Haml for Express.js/Node.js . . . . . . . . . . . . . . . .
5.7 Conclusion About The Express.js Framework . . . . . . . . . .
5.8 ExpressWorks . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.9 Update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
65
65
65
66
67
67
67
68
68
69
6. About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
70
7. Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
72
8. Errata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
73
9. Contact Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
74
CONTENTS
If its not fun, its not JavaScript.
1. JavaScript FUNdamentals: The

Powerful and Misunderstood
Language of The Web
1.1 Expressiveness
Programming languages like BASIC, Python, and C has boring machine-like nature which require
developers to write extra code thats not directly related to the solution itself. Think about line
numbers in BASIC or interfaces, classes and patterns in Java.
On the other hand JavaScript inherits the best traits of pure mathematics, LISP, C# which lead to a
great deal of expressiveness (and fun!).
More about Expressive Power in this post: What does expressive mean when referring to
programming languages?
The quintessential Hello World example in Java (remember, Java is to JavaScript like ham is to
hamster):
1
2
3
4
5
public class HelloWorld {

public static void main(String[] args) {
System.out.println("Hello World");
}
}
The same example in JavaScript:

1
console.log('Hello World')
or from within an HTML page:
http://en.wikipedia.org/wiki/Expressive_power
http://stackoverflow.com/questions/638881/what-does-expressive-mean-when-referring-to-programming-languages
JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web
1
2
3
<script>
document.write('Hello World')
</script>
JavaScript allows programmers to focus on the solution/problem rather than to jump through hoops
and API docs.
1.2 Loose Typing

Automatic type casting works well most of the time. Its a great feature that saves a lot of time and
mental energy! Therere only a few primitives types:
1.
2.
3.
4.
5.
String
Number (both integer and real)
Boolean
Undefined
Null
Everything else is an object, i.e., mutable keyed collections. Read Stackoverflow on What does
immutable mean?
Also, in JavaScript there are String, Number and Boolean objects which contain helpers for the
primitives:
1
'a' === new String('a') //false
but
1
'a' === new String('a').toString() //true
or
1
'a' == new String('a') //true
By the way, == performs automatic type casting while === not.
1.3 Object Literal Notation

Object notation is super readable and compact:
http://stackoverflow.com/questions/3200211/what-does-immutable-mean
1
2
3
4
5
6
7
var obj = {
color: "green",
type: "suv",
owner: {
...
}
}
Remember that functions are objects?

1
2
3
4
5
6
7
var obj = function () {

this.color: "green",
this.type: "suv",
this.owner: {
...
}
}
1.4 Functions
Functions are first-class citizens, and we treat them as variables, because they are objects! Yes,
functions can even have properties/attributes.
1.4.1 Create a Function

1
2
3
4
var f = function f () {
console.log('Hi');
return true;
}
or
1
2
3
4
function f () {
console.log('Hi');
return true;
}
Function with a property (remember functions are just objects that can be invoked, i.e. initialized):
1
2
3
4
var f = function () {console.log('Boo');}

f.boo = 1;
f(); //outputs Boo
console.log(f.boo); //outputs 1
Note: the return keyword is optional. In case its omitted, the function will return undefined upon
invocation.
1.4.2 Pass Functions as Params

1
2
3
4
5
6
7
8
9
var convertNum = function (num) {

return num + 10;
}
var processNum = function (num, fn) {
return fn(num);
}
processNum(10, convertNum);
1.4.3 Invocation vs. Expression

Function definition as follows:
1
function f () {};
Function invocation looks like this:

1
f();
Function expression always returns something, because it resolves to some value which could be a
number, a string, an object or a boolean:
1
2
function f() {return false;}

f();
On the other hand, if a function doesnt return anything, its a statement:
function f(a) {console.log(a);}
1.5 Arrays
Arrays are also objects which have some special methods inherited from Array.prototype global
object. Nevertheless, JavaScript Arrays are not real arrays. Instead, they are objects with unique
integer (usually 0-based) keys.
1
2
3
4
var
var
var
var
arr = [];
arr2 = [1, "Hi", {a:2}, function () {console.log('boo');}];
arr3 = new Array();
arr4 = new Array(1,"Hi", {a:2}, function () {console.log('boo');});
1.6 Prototypal Nature

There are no classes in JavaScript because objects inherit directly from other objects which is called
prototypal inheritance. There are a few types of inheritance patterns in JS:
Classical
Pseudo-classical
Functional
Example of the functional inheritance pattern:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var user = function (ops) {

return { firstName: ops.name || 'John'
, lastName: ops.name || 'Doe'
, email: ops.email || 'test@test.com'
, name: function() { return this.firstName + this.lastName}
}
}
var agency = function(ops) {
ops = ops || {}
var agency = user(ops)
agency.customers = ops.customers || 0
agency.isAgency = true
return agency
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype#Properties
1.7 Conventions
Most of these conventions (with semi-colons being an exception) are stylistic, and highly preferential
and dont impact the execution.
1.7.1 Semi-Colons
Optional semi-colons, except for two cases:
1. In for loop construction: for (var i=0; i++; i<n)
2. When a new line starts with parentheses, e.g., Immediately-Invoked Function Expression
(IIFE): ;(function(){...}())
1.7.2 camelCase
camelCase, except for class names which are CapitalCamelCase, e.g.,
1
2
var MainView = Backbone.View.extend({...})

var mainView = new MainView()
1.7.3 Naming
_,$ are perfectly legitimate characters for the literals (jQuery and Underscore libraries use them a
lot).
Private methods and attributes start with _ (does nothing by itself!).
1.7.4 Commas
Comma-first approach
1
2
3
4
var obj = { firstName: "John"

, lastName: "Smith"
, email: "johnsmith@gmail.com"
}
1.7.5 Indentation
Usually its either tab, 4 or 2 space indentation with their supporters camps being almost religiously
split between the options.
1.7.6 White spaces

Usually, there is a space before and after =, +, { and } symbols. There is no space on invocation, e.g.,
arr.push(1);, but theres a space when we define an anonymous function: function () {}.
1.8 No Modules
At least until ES6, everything is in the global scope, a.k.a. window and included via <script> tags.
However, there are external libraries that allow for workarounds:
CommonJS
AMD and Require.js
Node.js uses CommonJS-like syntax and has built-in support for modules.
To hide your code from global scope, make private attributes/methods use closures and immediatelyinvoked function expressions (or IIFEs).
1.9 Immediately-Invoked Function Expressions (IIFEs)

1
2
3
4
5
(function () {
window.yourModule = {
...
};
}());
This snippet shows an example of an object with private attribute and method:
https://wiki.mozilla.org/ES6_plans
http://www.commonjs.org/
http://requirejs.org/
http://en.wikipedia.org/wiki/Immediately-invoked_function_expression
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function () {
window.boo = function() {
var _a = 1;
var inc = function () {
_a++;
console.log(_a);
return _a;
};
return {
increment: inc
};
}
}());
var b = window.boo();
b.increment();
Now try this:

1
2
3
b.increment();
b.increment();
b.increment();
1.10 Keyword this

Mutates/changes a lot (especially in jQuery)! Rule of thumb is to re-assign to a locally scoped variable
before attempting to use this inside of a closure:
1
2
3
4
5
6
var app = this

$('a').click(function(e){
console.log(this) //most likely the event or the
console.log(app) //that's what we want!
app.processData(e)
})
target anchor element
When in doubt: console.log!
1.11 Pitfalls
JS is the only language that programmers think they shouldnt learn. Things like === vs. ==, global
scope leakage, DOM, etc. might lead to problems down the road. This is why its important to
understand the language or use something like CoffeeScript, that takes way most of the issues.
10
1.12 Further Learning

If you liked this article and would like to explore JavaScript more, take a look at this amazing free
resource: Eloquent JavaScript: A Modern Introduction to Programming.
Of course for more advanced JavaScript enthusiasts and pros, theres my book Rapid Prototyping
with JS and intensive programming school HackReactor, where I teach part-time.
http://eloquentjavascript.net/
http://rpjs.co
http://hackreactor.com
2. CoffeeScript FUNdamentals: The

Better JavaScript
The CoffeeScript is a language that was built on top of JavaScript. CoffeeScript has some added
benefits and its code is compiled into native JavaScript for execution. The CoffeeScript pros include:
better syntax, function and class construction patterns, automatic var insertion, comprehensions
and others.
Most of these perks will be obvious once we take a look at some examples. This quick language
reference can get you started with CoffeeScript:
Semicolons, Whitespace and Parentheses

Vars
Conditions
Functions
Classes
Arrays
Splats
Comprehensions
2.1 Semicolons, Whitespace and Parentheses

While in JavaScript, semicolons are redundant and optional; in CoffeeScript they are banned.
The whitespace and indentation (typically two-space) are parts of the CoffeeScript language.
Parentheses for function invocation are optional (except when there are no arguments). The same
goes for curly braces for object literals. We can even define nested objects without curly braces:
CoffeeScript FUNdamentals: The Better JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
12
a =
x: 1
y: -20
z: () ->
console.log a.x+a.y
a.z()
b = [
1,
2,
x: 10
y: 20
]
Translates into this JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var a, b;
a = {
x: 1,
y: -20,
z: function() {
return console.log(a.x + a.y);
}
};
a.z();
b = [
1, 2, {
x: 10,
y: 20
}
];
As you might have noticed, the logical blocks curly braces that we use to write code for functions
(i.e., {}) are also replaced by indentation. Lets not forget that functions are just objects in JavaScript.
:-)
13
2.2 Vars
CoffeeScript automatically inserts var keywords for us and prohibits manual usage of var. For
example, a,b, and c variable declarations will have the var in the JavaScript code:
1
2
3
a = 10
b = 'x'
c = [1,2,3]
JavaScript code:
1
2
3
4
5
6
7
var a, b, c;
a = 10;
b = 'x';
c = [1, 2, 3];
CoffeeScript always puts vars at the top of the scope where this particular variable is encountered
first. The scope is defined by the function or window. For example, the anonymous function d will
have e scoped to it, because CoffeeScript first saw e inside of the function:
1
2
3
4
5
6
7
8
a = 10
b = 'x'
c = [1,2,3]
d = () ->
e = a
console.log e
d()
JavaScript output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var a, b, c, d;
a = 10;
b = 'x';
c = [1, 2, 3];
d = function() {
var e;
e = a;
return console.log(e);
};
d();
2.3 Conditions
Conditions are more readable by humans (English-like?) in CoffeeScript:
1
2
3
4
5
a = b = c = d = 1
if a is b or b isnt c and not c is d
console.log 'true'
else
console.log 'false'
1
2
3
4
5
6
7
8
9
var a, b, c, d;
a = b = c = d = 1;
if (a === b || b !== c && !c === d) {
console.log('true');
} else {
console.log('false');
}
So is is ===, isnt is !==, not is !, and is &&, and or is ||.

In CoffeeScript some fancy and arguably more readable constructions are possible:
14
1
2
3
4
15
console.log a if a is not null

if a isnt null then console.log a
if not a is null then console.log a
unless a is null then console.log a
Note: unless is just a shortcut for if not.
2.4 Functions
Functions in CoffeeScript are defined with arrows ()-> and fat arrows ()=> (more on this later):
1
2
a = (x,y) -> console.log x+y

a(10,-5)
JavaScript code:
1
2
3
4
5
6
7
var a;
a = function(x, y) {
return console.log(x + y);
};
a(10, -5);
Longer expressions can be on multiple lines using indentation, while the default values can be
assigned right in the function signature (i.e., (name=value)):
1
2
3
4
a = (x, y, z=15) ->

sum = x + y + z
console.log sum
a(10,-5)
1
2
3
4
5
6
7
8
9
10
11
12
16
var a;
a = function(x, y, z) {
var sum;
if (z == null) {
z = 15;
}
sum = x + y + z;
return console.log(sum);
};
a(10, -5);
So back to the far arrow, it does two things: 1. Defines a function 2. Binds the new functions scope
to the current value of this
Remember that this is dynamically scoped, i.e., its meaning changes based on where it is situated
in the code (whats the scope). For example, if we have a jQuery event handler click, we might
want to use this as the object in which we defined the handler, not as the DOM element to which
the handler is bound.
For example, this CoffeeScript code will return window object both times (thats what we want):
1
2
3
console.log @
$('div').click ()=>
console.log @
The JavaScript code:

1
2
3
4
5
6
7
console.log(this);
$('div').click((function(_this) {
return function() {
return console.log(_this);
};
})(this));
However, with skinny (single) arrows its back to the DOM scope for the event handler, (this might
be bad if unexpected):
1
2
3
console.log @
$('div').click ()->
console.log @
1
2
3
4
5
console.log(this);
17
$('div').click(function() {
return console.log(this);
});
Traditionally for the snippet above, without the CoffeeScripts far arrows, you would see workarounds
like these which use interim variables like that, self, or _this:
1
2
3
4
5
console.log(this);
var that = this;
$('div').click(function() {
return console.log(that);
});
2.5 Classes
Classes are probably the yummiest and the most complex and confusing feature in CoffeeScript. In
JavaScript classes are absent! We use prototypes instead, so the objects inherit from other objects.
We can also use factories, i.e., the functions that create objects.
However, if a developer wants to implement a class, it could be really tricky and often requires a
good understanding of pseudo-classical instantiation patterns. This is not the case with CoffeeScript,
which introduces class keyword. Inside of the class we can use constructor method and super
call, for the initialization logic and the invocation of the parents methods correspondingly.
For example, we have a parent class Vehicle from which we extend two classes, Compact and Suv.
In these classes, we write custom move methods with the super call, that allows us to re-use the logic
from the parent class Vehicle.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
18
class Vehicle
constructor: (@name) ->
move: (meters) ->
console.log @name + " moved #{meters} miles."
class Compact extends Vehicle
move: ->
console.log "Cruising..."
super 5
class Suv extends Vehicle
move: ->
console.log "Speeding..."
super 45
camry = new Compact "Camry"
caddi = new Suv "Cadillac"
camry.move()
caddi.move()
The console outputs this:

1
2
3
4
Cruising...
Camry moved 5 miles.
Speeding...
Cadillac moved 45 miles.
The JavaScript output is quite lengthy, so no wonder developers often prefer functional or other
patterns:
1
2
3
4
5
6
7
8
9
10
var Compact, Suv, Vehicle, caddi, camry,

__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.\
call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructo\
r = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); ch\
ild.__super__ = parent.prototype; return child; };
Vehicle = (function() {
function Vehicle(name) {
this.name = name;
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
}
Vehicle.prototype.move = function(meters) {
return console.log(this.name + (" moved " + meters + " miles."));
};
return Vehicle;
})();
Compact = (function(_super) {
__extends(Compact, _super);
function Compact() {
return Compact.__super__.constructor.apply(this, arguments);
}
Compact.prototype.move = function() {
console.log("Cruising...");
return Compact.__super__.move.call(this, 5);
};
return Compact;
})(Vehicle);
Suv = (function(_super) {
__extends(Suv, _super);
function Suv() {
return Suv.__super__.constructor.apply(this, arguments);
}
Suv.prototype.move = function() {
console.log("Speeding...");
return Suv.__super__.move.call(this, 45);
};
return Suv;
})(Vehicle);
19
53
54
55
56
57
58
59
20
camry = new Compact("Camry");

caddi = new Suv("Cadillac");
camry.move();
caddi.move();
2.6 Arrays and Slicing

Arrays in CoffeeScript can be defined just as they are in native JavaScript: arr = [1, 2, 3]. But we
can do so much more with arrays in CoffeeScript! For example, we can use a range when defining
an array (useful in iterators and comprehensions) and use slice:
1
2
3
arr = [1..10]
slicedArr = arr[2..4]
console.log arr, slicedArr
The console outputs:

1
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] [3, 4, 5]
1
2
3
4
5
6
7
var arr, slicedArr;

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
slicedArr = arr.slice(2, 5);
console.log(arr, slicedArr);
Trivia fact: for array declarations with 20+ items (e.g., range of [0..20] and larger), CoffeeScript
compiler will switch to the for loop.
2.7 Splats
Splats is a better way of using a variable number of arguments and arguments object (from native
JavaScript):
1
2
3
4
5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
21
a = (x...) ->
sum = 0
x.forEach (item) -> sum += item
console.log sum
a(10,-5, 15)
var a,
__slice = [].slice;
a = function() {
var sum, x;
x = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
sum = 0;
x.forEach(function(item) {
return sum += item;
});
};
a(10, -5, 15);
Spats work with invocations too. For example, our sum function from the previous example needs
to treat the array not as a first element, but as all arguments:
1
2
3
4
5
6
a = (x...) ->
sum = 0
x.forEach (item) -> sum += item
console.log sum
a [-5..50]...
The output is 1260. And the JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
22
var a, _i, _results,

__slice = [].slice;
a = function() {
var sum, x;
x = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
sum = 0;
x.forEach(function(item) {
return sum += item;
});
};
a.apply(null, (function() {
_results = [];
for (_i = -5; _i <= 50; _i++){ _results.push(_i); }
return _results;
}).apply(this));
2.8 Comprehensions
The last but not least topic is comprehensions. They are probably the most used feature in
CoffeeScript and replace (or at least try to replace) all loops.
For example, a simple iteration over an array:
1
2
3
4
5
6
7
8
arr = [
'x',
'y',
'z'
]
for a in arr
console.log a
The console output is:

1
2
3
x
y
z
The compiled code:
1
2
3
4
5
6
7
8
23
var a, arr, _i, _len;

arr = ['x', 'y', 'z'];
for (_i = 0, _len = arr.length; _i < _len; _i++) {
a = arr[_i];
console.log(a);
}
As is the case with conditions, comprehensions might be reversed in order, e.g., console.log a for
a in arr. Then, we can get an index which will be the second parameter, e.g., console.log a, i
for a, i in arr outputs:
1
2
3
x 0
y 1
z 2
The when clause acts like a filter method; in other words, we can apply a test to the iterator:
1
2
arr = ['x', 'y', 'z']

console.log a, i for a, i in arr when a isnt 'y'
The console outputs:

1
2
x 0
z 2
To step with an increment we can use by: evens = (x for x in [0..10] by 2). In addition, for
iterating over objects we can use of:
1
2
3
4
5
6
7
8
obj =
'x': 10
'y':-2
'z': 50
coordinates = for key, value of obj
"coordinate #{key} is #{value}pt"
console.log coordinates
The console output is:
24
["coordinate x is 10pt", "coordinate y is -2pt", "coordinate z is 50pt"]
The JavaScript code is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var coordinates, key, obj, value;

obj = {
'x': 10,
'y': -2,
'z': 50
};
coordinates = (function() {
var _results;
_results = [];
for (key in obj) {
value = obj[key];
_results.push("coordinate " + key + " is " + value + "pt");
}
return _results;
})();
2.9 Conclusion
This CoffeeScript FUNdamentals is a concise overview that should highlight major pros of this
language, which has many more useful features. We hope that classes, arrow function declaration,
comprehensions, splats, and the clean syntax were enough to spark interest and lead to more
exploration and experimentation with CoffeeScript.
Heres the list of further CoffeeScirpt reading:
CoffeeScript Quirks
The Little Book on CoffeeScript
CoffeeScript Cookbook
Smooth CoffeeScript
CoffeeScript Ristretto
http://webapplog.com/coffeescript-quirks/
http://arcturo.github.io/library/coffeescript/
http://coffeescriptcookbook.com/
http://autotelicum.github.io/Smooth-CoffeeScript/
https://leanpub.com/coffeescript-ristretto/read
3. Backbone.js FUNdamentals: The

Cornerstone of JavaScript MV*
Frameworks
If you are reading this chapter, youre probably familiar with the benefits of using an MV* (asterisk
means a controller, another view or something else) over plain jQuery that grows into unmanageable
spaghetti code with time and added complexity.
Backbone.js is the cornerstone of all JavaScript frameworks because its one of the most mature
(i.e., dependable) and popular solutions in the ever-growing multitudes of browser JavaScript MV*
(model-view-controllers and model-view-something) frameworks. If we draw a quick comparison
between Backbone.js and other frameworks (not a fair one but still might be useful for some readers),
it will be somewhere in the middle in complexity and features between Spine&KnockoutJS (the
lighter side) and Ember.js&Angular.js (heavier side). Which one to choose depends on whether
developers will have to customize a lot (go with lightweights) or use right-out-of-the-box (go with
heavyweights).
A bit of trivia: Backbone.js was created by the same person (Jeremy Ashmenas) that brought
CoffeeScript and Underscore.js to the world!
Therefore, well demonstrate how to build a Backbone.js simple application from scratch. This is
not your typical to-do list, examples of which you can find plenty at TodoMVC, but a simplified
application that is easier to understand but that still uses all components: views, collections,
subviews, models, and event binding. The example is the apple database application.
In this chapter well cover following:
Typical Backbone.js App Structure

Setting up Backbone.js App from Scratch
Dependencies for the Backbone.js Project
Working with Backbone.js Collections
Event Binding with Backbone.js and jQuery
Backbone.js View and Subviews with Backbone.js Underscore.js
Super Simple Backbone Starter Kit
Conclusion
http://spinejs.com/
http://knockoutjs.com/
http://emberjs.com/
https://angularjs.org/
https://twitter.com/jashkenas
http://todomvc.com/
Backbone.js FUNdamentals: The Cornerstone of JavaScript MV* Frameworks
26
3.1 Typical Backbone.js App Structure

There are just four classes in Backbone.js:
Router: mapping of URL to methods

View: methods related to browser & user events, HTML output (rendering)
Collection: a list of models with extra helpers such as fetch()
Model: an individual data item with extra helpers
A typical Backbone.js app will have the main Router class. From that class all the routes (URL paths)
will be defined. The router can create and call methods of other classes such as Views, Collections,
and Models. For example, for path /books well render books view.
The recommended usage is that Views usually have one Collection or one Model. A Collection is
just a list of Models. However, this is not written in stone. Backbone.js is very flexible and should be
used according to the specific needs. For example, an application can have a Model that has Views
and each View that has collections.
In our concise example, well have one main Router that has Views. These Views will have models
and collections.
3.2 Setting up Backbone.js App from Scratch

Firstly, were going to build a typical starter Hello World application using Backbone.js and the
model-view-controller (MVC) architecture. I know it might sound like overkill in the beginning, but
as we go along well add more and more complexity, including Models, Subviews and Collections.
The structure of the project is to keep it simple stupid:
index.html: the main file and all the applications JavaScript code
jquery.js: jQuery library
underscore.js: Underscore.js library
backbone.js: Backbone.js library
A full source code for the Hello World app is available at GitHub under github.com/azatco/rpjs/backbone/hello-world.
jQuery, Underscore are required dependencies for Backbone.js.
https://github.com/azat-co/rpjs/tree/master/backbone/hello-world
27
3.3 Dependencies for the Backbone.js Project

To build our apple database, well need to download the following libraries:
jQuery 1.9 development source file
Underscore.js development source file
Backbone.js development source file
Alternatively, you can hot-like these libraries from some CDNs (e.g., Google Hosted Libraries), but
then well need an internet connection every time you run your app.
Include these frameworks in the newly created index.html file like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE>
<html>
<head>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script>
//TODO write some awesome JS code!
</script>
</head>
<body>
</body>
</html>
Note
We can also put <script> tags right after the </body> tag in the end of the file. This will
change the order in which scripts and the rest of HTML are loaded and impact performance
in large files.
Some developers shy away from using Backbone Router (its an optional class/component), but we
always find that Router brings more benefits and clarity. In a way, it serves as a starting point of
your application and helps to understand the foundation and how all the pieces fit together such as
views, models, etc. So, lets define a simple Backbone.js Router inside of a <script> tag:
http://code.jquery.com/jquery-1.9.0.js
http://underscorejs.org/underscore.js
http://backbonejs.org/backbone.js
https://developers.google.com/speed/libraries/devguide
1
2
3
4
28
...
var router = Backbone.Router.extend({
});
...
Note
For now, to Keep It Simple Stupid (KISS), well be putting all of our JavaScript code right
into the index.html file. This is not a good idea for a real development or production code.
Well refactor it later.
Then set up a special routes property inside of an extend call:

1
2
3
4

routes: {
}
});
The Backbone.js routes property needs to be in the following format: 'path/:param': 'action'
which will result in the filename#path/param URL triggering a function named action (defined in
the Router object). For now, well add a single home route:
1
2
3
4
5

routes: {
'': 'home'
}
});
This is good, but now we need to add a home function (the right part of the route: action key-value
pair):
1
2
3
4
5
6
7
8

routes: {
'': 'home'
},
home: function(){
//TODO render html
}
});
Well come back to the home function later to add more logic for creating and rendering of a View.
Right now, we should define our homeView:
1
2
29
var homeView = Backbone.View.extend({

});
Does it look familiar to you? Right, Backbone.js uses similar syntax for all of its components,
such as Backbone.View, Backbone.Router, Backbone.Model and Backbone.Collection. The class
is followed by the extend function and a JSON object as a parameter to it. This object often contains
some initialization options or attributes of the class.
There are multiple ways to proceed from now on, but the best practice is to use the el and template
properties, which are magical, i.e., special in Backbone.js, because they allow us to do two things:
1. el: attach the Backbone View object to a Document Object Model (DOM) element
2. template: store the Underscore (in this case we use Underscore but it can be changed to
another library) template
Heres the code for the home view:
1
2
3
4

el: 'body',
template: _.template('Hello World')
});
The property el is just a string that holds the jQuery selector (you can use class name with . and id
name with #). The template property has been assigned an Underscore.js function template with
just a plain text Hello World.
To render our homeView we use this.$el which is a compiled jQuery object referencing element
in an el property, and the jQuery .html() function to replace HTML with this.template() value.
Here is what the full code for our home Backbone.js View looks like:
1
2
3
4
5
6
7

el: 'body',
template: _.template('Hello World'),
render: function(){
this.$el.html(this.template({}));
}
});
Now, if we go back to the router we can add these two lines to the home function:
1
2
3
4
5
6
7
8
9
10
11
12
30

routes: {
'': 'home'
},
initialize: function(){
// some awesome code that will be executed during object's creation
},
home: function(){
this.homeView = new homeView;
this.homeView.render();
}
});
The first line will create the homeView object and assign it to the homeView property of the router.
The second line will call the render() method in the homeView object, triggering the Hello World
output.
Finally, to start a Backbone app, we call new Router inside of a document-ready wrapper to make
sure that the files DOM is fully loaded. The app variable is made global in this sense, this helps to
access some Router properties (its a good idea to use a prefix specific to your application):
1
2
3
4
5
var app;
$(document).ready(function(){
app = new router;
Backbone.history.start();
})
Confused so far? Dont be because here is the full code of the index.html file:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE>
<html>
<head>
<script>
var app;
routes: {
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
31
'': 'home'
},
//some code to execute
//when the object is instantiated
},
home: function(){
this.homeView = new homeView;
}
});
el: 'body',
template: _.template('Hello World'),
render: function(){
this.$el.html(this.template({}));
}
});
app = new router;
})
</script>
</head>
<body>
<div></div>
</body>
</html>
Open index.html in the browser to see if it works, i.e., the Hello World message should be on the
page.
3.4 Working with Backbone.js Collections

Backbone Collections are useful classes that developers can use for storing any sets of data that
belong to the same type. In other words, Collections are sets or lists of models, and they (collections)
can have their own custom methods and logic as well as some built-in Backbone methods.
32
The full source code of Backbone Collections example is under the GitHubs rpjs/backbone/collections.
This example is about Backbone Collections, and its built on top of the previous Hello World
example from the Setting up Backbone.js App from Scratch which is available for download at
rpjs/backbone/hello-world.
We should add some data to play around with and to hydrate our views. To do this, add this right
after the script tag and before the other code:
1
2
3
4
5
6
7
8
9
10
var appleData = [
{
name: "fuji",
url: "img/fuji.jpg"
},
{
name: "gala",
url: "img/gala.jpg"
}
];
Grab the images of Fuji (Figure 3-2) and Gala (Figure 3-3) from GitHub: https://github.com/azatco/rpjs/tree/master/backbone/collections/img, or add your own.
Figure 3-2: Fuji apple illustration

https://github.com/azat-co/rpjs/tree/master/backbone/collections
https://github.com/azat-co/rpjs/tree/master/backbone/hello-world
33
Figure 3-3: Gala apple illustration
This is our apple database. :-) Or to be more accurate, our REST API endpoint-substitute, which
provides us with names and image URLs of the apples (data models). If you want some real-world
servers, you can use:
Parse.com: back-end-as-a-service provider
Node.js and MongoDB REST API: a free-JSON API built with Node.js, Express.js and
MongoDB
Note
This mock dataset can be easily substituted by assigning REST API endpoints of your backend to url properties in Backbone.js Collections and/or Models, and calling the fetch()
method on them.
Now to make the User Experience (UX) a little bit better, we can add a new route to the routes
object in the Backbone Route:
1
2
3
4
5
6
...
routes: {
'': 'home',
'apples/:appleName': 'loadApple'
},
...
This will allow users to go to index.html#apples/SOMENAME and expect to see some information
about an apple. This information will be fetched and rendered by the loadApple function in the
Backbone Router definition:
http://parse.com
http://webapplog.com/express-js-4-node-js-and-mongodb-rest-api-tutorial/
1
2
3
34
loadApple: function(appleName){
this.appleView.render(appleName);
}
Have you noticed an appleName variable? Its exactly the same name as the one that weve used
in route. This is how we can access query string parameters (e.g., ?param=value&q=search) in
Backbone.js.
Now well need to refactor some more code to create a Backbone Collection, populate it with data
in our appleData variable, and to pass the collection to homeView and appleView. Conveniently
enough, we do it all in the Router constructor method initialize:
1
2
3
4
5
6
var apples = new Apples();
apples.reset(appleData);
this.homeView = new homeView({collection: apples});
this.appleView = new appleView({collection: apples});
},
At this point, were pretty much done with the Router class, and it should look like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

routes: {
'': 'home',
'apples/:appleName': 'loadApple'
},
},
home: function(){
},
}
});
Lets modify our homeView a bit to see the whole database:
1
2
3
4
5
6
7
8
9
35

el: 'body',
template: _.template('Apple data: <%= data %>'),
render: function(){
this.$el.html(this.template({
data: JSON.stringify(this.collection.models)
}));
}
});
For now, we just output the string representation of the JSON object in the browser. This is not
user-friendly at all, but later well improve it by using a list and subviews.
So far, our apple Backbone Collection is very clean and simple:
1
2
var Apples = Backbone.Collection.extend({

});
Note
Backbone automatically creates models inside of a collection when we use the fetch() or
reset() functions.
Apple view is not any more complex; it has only two properties: template and render. In a template,
we want to display figure, img and figcaption tags with specific values. The Underscore.js template
engine is handy at this task:
1
2
3
4
5
6
7
8
var appleView = Backbone.View.extend({

template: _.template(
'<figure>\
<img src="<%= attributes.url %>"/>\
<figcaption><%= attributes.name %></figcaption>\
</figure>'),
...
});
To make a JavaScript string, which has HTML tags in it, more readable we can use the backslash
line breaker escape (\) symbol, or close strings and concatenate them with a plus sign (+). This is an
example of appleView above, which is refactored using the latter approach:
1
2
3
4
5
6
7
36

template: _.template(
'<figure>'+
+'<img src="<%= attributes.url %>"/>'+
+'<figcaption><%= attributes.name %></figcaption>'+
+'</figure>'),
...
Please note the <%= and %> symbols; they are the instructions for Undescore.js to print values in
properties url and name of the attributes object.
Finally, were adding the render function to the appleView class.
1
2
3
4
5
render: function(appleName){
var appleModel = this.collection.where({name:appleName})[0];
var appleHtml = this.template(appleModel);
$('body').html(appleHtml);
}
We find a model within the collection via where() method and use [] to pick the first element.
Right now, the render function is responsible for both loading the data and rendering it. Later well
refactor the function to separate these two functionalities into different methods.
The whole app, which is in the rpjs/backbone/collections/index.html folder, looks like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE>
<html>
<head>
<script>
var appleData = [
{
name: "fuji",
url: "img/fuji.jpg"
},
{
name: "gala",
url: "img/gala.jpg"
https://github.com/azat-co/rpjs/tree/master/backbone/collections
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
}
];
var app;
routes: {
"": "home",
"apples/:appleName": "loadApple"
},
},
home: function(){
},
}
});
el: 'body',
render: function(){
}));
}
//TODO subviews
});
});
template: _.template('<figure>\
</figure>'),
//TODO re-write with load apple and event binding
37
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
38
var appleModel = this.collection.where({
name:appleName
})[0];
var appleHtml = this.template(appleModel);
}
});
app = new router;
})
</script>
</head>
<body>
<div></div>
</body>
</html>
Open collections/index.html file in your browser. You should see the data from our database,
i.e., Apple data: [{"name":"fuji","url":"img/fuji.jpg"},{"name":"gala","url":"img/gala.jpg"}].
Now, let go to collections/index.html#apples/fuji or collections/index.html#apples/gala
in your browser. We expect to see an image with a caption. Its a detailed view of an item, which in
this case is an apple. Nice work!
3.5 Event Binding with Backbone.js and jQuery

In real life, getting data does not happen instantaneously, so lets refactor our code to simulate it.
For a better UI/UX, well also have to show a loading icon (a.k.a., spinner or ajax-loader, see Figure
3-4) to users to notify them that the information is being loaded.
Figure 3-4: Spinner GIF
Its a good thing that we have event binding in Backbone. The event binding is not an exclusive
to Backbone feature, because it is part of jQuery. But without Backbone organization and code
39
structure, things tend to end up messier (with plain jQuery). For example, well have to pass a
function that renders HTML as a callback to the data loading function, to make sure that the
rendering function is not executed before we have the actual data to display.
Therefore, when a user goes to detailed view (apples/:id) we only call the function that loads the
data. Then, with the proper event listeners, our view will automagically (this is not a typo) update
itself; when there is a new data (or on a data change, Backbone.js supports multiple and even custom
events).
Lets change the code in the router:
1
2
3
4
5
...
this.appleView.loadApple(appleName);
}
...
Everything else remains the same until we get to the appleView class. Well need to add a constructor
or an initialize method, which is a special word/property in the Backbone.js framework. Its called
each time we create an instance of an object, i.e., var someObj = new SomeObject(). We can also
pass extra parameters to the initialize function, as we did with our views (we passed an object
with the key collection and the value of apples Backbone Collection). Read more on Backbone.js
constructors at backbonejs.org/#View-constructor.
1
2
3
4
5
6
...
//TODO: create and setup model (aka an apple)
},
...
Great, we have our initialize function. Now we need to create a model which will represent a
single apple and set up proper event listeners on the model. Well use two types of events, change and
a custom event called spinner. To do that, we are going to use the on() function, which takes these
properties: on(event, actions, context) read more about it at backbonejs.org/#Events-on:
http://backbonejs.org/#View-constructor
http://backbonejs.org/#Events-on
1
2
3
4
5
6
7
40
...
this.model = new (Backbone.Model.extend({}));
this.model.bind('change', this.render, this);
this.bind('spinner',this.showSpinner, this);
},
...
The code above basically boils down to two simple things:

1. Call render() function of appleView object when the model has changed
2. Call showSpinner() method of appleView object when event spinner has been fired.
So far, so good, right? But what about the spinner, a GIF icon? Lets create a new property in
appleView:
1
2
3
...
templateSpinner: '<img src="img/spinner.gif" width="30"/>',
...
Remember the loadApple call in the router? This is how we can implement the function in
appleView:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
loadApple:function(appleName){
this.trigger('spinner');
//show spinner GIF image
var view = this;
//we'll need to access that inside of a closure
setTimeout(function(){
//simulates real time lag when
//fetching data from the remote server
view.model.set(view.collection.where({
name:appleName
})[0].attributes);
},1000);
},
...
The first line will trigger the spinner event (the function for which we still have to write).
41
The second line is just for scoping issues (so we can use appleView inside of the closure).
The setTimeout function is simulating a time lag of a real remote server response. Inside of it, we
assign attributes of a selected model to our views model by using a model.set() function and a
model.attributes property (which returns the properties of a model).
Now we can remove an extra code from the render method and implement the showSpinner
function:
1
2
3
4
5
6
7
8
var appleHtml = this.template(this.model);
},
showSpinner: function(){
$('body').html(this.templateSpinner);
}
...
Thats all! Open index.html#apples/gala or index.html#apples/fuji in your browser and enjoy

the loading animation while waiting for an apple image to load.
The full code of the index.html file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE>
<html>
<head>
<script>
var appleData = [
{
name: "fuji",
url: "img/fuji.jpg"
},
{
name: "gala",
url: "img/gala.jpg"
}
];
var app;
routes: {
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
"": "home",
},
},
home: function(){
},
}
});
el: 'body',
render: function(){
}));
}
//TODO subviews
});
});
this.model.on('change', this.render, this);
this.on('spinner',this.showSpinner, this);
},
</figure>'),
42
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

var view = this; //we'll need to access
//that inside of a closure
setTimeout(function(){ //simulates real time
//lag when fetching data from the remote server
name:appleName
})[0].attributes);
},1000);
},
},
}
});
app = new router;
})
</script>
</head>
<body>
<a href="#apples/fuji">fuji</a>
<div></div>
</body>
</html>
43
44
3.6 Backbone.js Views and Subviews with

Underscore.js
This example is available at rpjs/backbone/subview.
Subviews are Backbone Views that are created and used inside of another Backbone View. A
subviews concept is a great way to abstract (separate) UI events (e.g., clicks) and templates for
similarly structured elements (e.g., apples).
A use case of a Subview might include a row in a table, a list item in a list, a paragraph, a new line,
etc.
Well refactor our home page to show a nice list of apples. Each list item will have an apple name
and a buy link with an onClick event. Lets start by creating a subview for a single apple with our
standard Backbone extend() function:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
var appleItemView = Backbone.View.extend({
tagName: 'li',
template: _.template(''
+'<a href="#apples/<%=name%>" target="_blank">'
+'<%=name%>'
+'</a> <a class="add-to-cart" href="#">buy</a>'),
events: {
'click .add-to-cart': 'addToCart'
},
render: function() {
this.$el.html(this.template(this.model.attributes));
},
addToCart: function(){
this.model.collection.trigger('addToCart', this.model);
}
});
...
Now we can populate the object with tagName, template, events, render and addToCart properties/methods.
https://github.com/azat-co/rpjs/tree/master/backbone/subview
1
2
3
45
...
tagName: 'li',
...
tagName automatically allows Backbone.js to create an HTML element with the specified tag name,
in this case <li> list item. This will be a representation of a single apple, a row in our list.
1
2
3
4
5
6
...
+'<%=name%>'
...
The template is just a string with Undescore.js instructions. They are wrapped in <% and %> symbols.
<%= simply means print a value. The same code can be written with backslash escapes:
1
2
3
4
5
6
7
...
template: _.template('\
<a href="#apples/<%=name%>" target="_blank">\
<%=name%>\
</a> <a class="add-to-cart" href="#">buy</a>\
'),
...
Each <li> will have two anchor elements (<a>), links to a detailed apple view (#apples/:appleName)
and a buy button. Now were going to attach an event listener to the buy button:
1
2
3
4
5
...
events: {
},
...
The syntax follows this rule:

1
event + jQuery element selector: function name
Both the key and the value (right and left parts separated by the colon) are strings. For example:
46
or
1
'click #load-more': 'loadMoreData'
To render each item in the list, well use the jQuery html() function on the this.$el jQuery object,
which is the <li> HTML element based on our tagName attribute:
1
2
3
4
5
...
},
...
The addToCart method will use the trigger() function to notify the collection that this particular
model (apple) is up for the purchase by the user:
1
2
3
4
5
...
}
...
Here is the full code of the appleItemView Backbone View class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
tagName: 'li',
+'<%=name%>'
events: {
},
},
}
});
...
47
Easy peasy! But what about the master view, which is supposed to render all of our items (apples)
and provide a wrapper <ul> container for <li> HTML elements? We need to modify and enhance
our homeView.
To begin with, we can add extra properties of string type understandable by jQuery as selectors to
homeView:
1
2
3
4
5
...
el: 'body',
listEl: '.apples-list',
cartEl: '.cart-box',
...
We can use properties from above in the template, or just hard-code them (well refactor our code
later) in homeView:
1
2
3
4
5
6
...
template: _.template('Apple data: \
<ul class="apples-list">\
</ul>\
<div class="cart-box"></div>'),
...
The initialize function will be called when homeView is created (new homeView()) in it we
render our template (with our favorite by now html() function), and attach an event listener to the
collection (which is a set of apple models):
1
2
3
4
5
6
...
initialize: function() {
this.$el.html(this.template);
this.collection.on('addToCart', this.showCart, this);
},
...
The syntax for the binding event is covered in the previous section. In essence, it is calling the
showCart() function of homeView. In this function, we append appleName to the cart (along with a
line break, a <br/> element):
1
2
3
4
5
48
...
showCart: function(appleModel) {
$(this.cartEl).append(appleModel.attributes.name+'<br/>');
},
...
Finally, here is our long-awaited render() method, in which we iterate through each model in the
collection (each apple), create an appleItemView for each apple, create an <li> element for each
apple, and append that element to view.listEl <ul> element with a class apples-list in the DOM:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
render: function(){
view = this;
//so we can use view inside of closure
this.collection.each(function(apple){
var appleSubView = new appleItemView({model:apple});
// creates subview with model apple
appleSubView.render();
// compiles template and single apple data
$(view.listEl).append(appleSubView.$el);
//append jQuery object from single
//apple to apples-list DOM element
});
}
...
Lets make sure we didnt miss anything in the homeView Backbone View:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
el: 'body',
</ul>\
},
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
49
},
render: function(){
view = this; //so we can use view inside of closure
// create subview with model apple
// compiles template and single apple data
//append jQuery object from single apple
//to apples-list DOM element
});
}
});
...
You should be able to click on the buy, and the cart will populate with the apples of your choice.
Looking at an individual apple does not require typing its name in the URL address bar of the browser
anymore. We can click on the name, and it opens a new window with a detailed view as illustrated
in Figure 3-1.
Figure 3-1: The list of apples rendered by subviews.
By using subviews, we reused the template for all of the items (apples) and attached a specific event
to each of them. Those events are smart enough to pass the information about the model to other
objects: views and collections.
Just in case, here is the full code for the subviews example, which is also available at rpjs/backbone/-
subview/index.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE>
<html>
<head>
<script>
var appleData = [
{
name: "fuji",
url: "img/fuji.jpg"
},
{
name: "gala",
url: "img/gala.jpg"
}
];
var app;
routes: {
"": "home",
},
},
home: function(){
},
}
});
https://github.com/azat-co/rpjs/blob/master/backbone/subview/index.html
50
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
tagName: 'li',
// template: _.template(''
//
//
+'<%=name%>'
//
template: _.template('\
<a href="#apples/<%=name%>" target="_blank">\
<%=name%>\
</a> <a class="add-to-cart" href="#">buy</a>\
'),
events: {
},
},
}
});
el: 'body',
</ul>\
},
},
render: function(){
view = this; //so we can use view inside of closure
// create subview with model apple
51
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
// compiles tempalte and single apple data
//append jQuery object from
//single apple to apples-list DOM element
});
}
});
});
this.model.on('change', this.render, this);
this.on('spinner',this.showSpinner, this);
},
</figure>'),
var view = this;
//we'll need to access that inside of a closure
setTimeout(function(){
//simulates real time lag when fetching data
// from the remote server
name:appleName
})[0].attributes);
},1000);
},
},
}
52
124
125
126
127
128
129
130
131
132
133
134
135
136
53
});
app = new router;
})
</script>
</head>
<body>
<div></div>
</body>
</html>
The link to an individual item, e.g., collections/index.html#apples/fuji, also should work

independently, by typing it in the browser address bar.
3.7 Super Simple Backbone Starter Kit

To jump-start your Backbone.js development, consider using Super Simple Backbone Starter Kit
by Azator, or similar projects like:
Backbone Boilerplate
Sample App with Backbone.js and Twitter Bootstrap
More Backbone.js tutorials
3.8 Conclusion
The already-mentioned in this chapter, and reputable Addys TodoMVC resource contains a lot
of browser JavaScript MV* frameworks with tutorials and examples. I often get asked What do
you think of X or Y? The main point is not to get into analysis paralysis when choosing a front-end
framework. Learn the foundation with Backbone.js, just because its not so bloated and complicated,
yet so widely-used and powerful in the right hands. Then pick a few newer and shinier libraries (e.g.,
React.js, Angular.js) and see how they fit the particular goals of project at hand.
https://github.com/azat-co/super-simple-backbone-starter-kit
http://azat.co
http://backboneboilerplate.com/
http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/
https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites
https://github.com/addyosmani
http://todomvc.com/
4. Node.js FUNdamentals: JavaScript

on The Server
Node.js is a highly efficient and scalable non-blocking I/O platform that was built on top of
Google Chrome V8 engine and its ECMAScript. This means that most front-end JavaScript (another
implementation of ECMAScript) objects, functions and methods are available in Node.js. Please refer
to JavaScript FUNdamentals if you need a refresher on JS-specific basics.
Developers can install Node.js from its website (Figure 4-1) and follow this overview of main Node.js
concepts.
http://webapplog.com/js-fundamentals/
http://nodejs.org
Node.js FUNdamentals: JavaScript on The Server
55
Figure 4-1: Node.js home page
4.1 Read-Eval-Print Loop (a.k.a. Console) in Node.js

Like in many other programming language and platforms, Node.js has a read-eval-print loop tool
which is opened by $ node command. The prompt changes to > and we can execute JavaScript akin to
Chrome Developer Tools console as shown in Figure 4-2. There are slight deviations in ECMAScript
implementations in Node.js and browsers (e.g., {}+{}), but for the most part the results are similar.
56
Figure 4-2: Node.js console
So as you see, we can write JavaScript in the console all day long, but sometime we can to save script
so we can run them later.
4.2 Launching Node.js Scripts

To start a Node.js script from a file, simply run $ node filename, e.g., $ node program.js. If all we
need is a quick set of statements, theres a -e option that allow to run inline JavaScript/Node.js, e.g.,
$ node -e "console.log(new Date());".
4.3 Node.js Process Information

Each Node.js script that is running is a process in its essence. For example, ps aux | grep 'node'
will output all Node.js programs running on a machine. Conveniently, developers can access useful
process information in code with process object, e.g., node -e "console.log(process.pid)" as
illustrated in Figure 4-3.
57
Figure 4-3: Node.js process examples using pid and cwd.
4.4 Accessing Global Scope in Node.js

As you know from JS FUNdamentals, browser JavaScript by default puts everything into its
global scope. This was coined as one of the bad part of JavaScript in Douglas Crockfords famous
[JavaScript: The Good Parts]. Node.js was designed to behave differently with everything being
local by default. In case we need to access globals, there is a global object. Likewise, when we need
to export something, we should do so explicitly.
In a sense, window object from front-end/browser JavaScript metamorphosed into a combination
of global and process objects. Needless to say, the document object that represent DOM of the
webpage is nonexistent in Node.js.
4.5 Exporting and Importing Modules

Another bad part in browser JavaScript is that theres no way to include modules. Scripts are
supposed to be linked together using a different language (HTML) with a lacking dependency
http://webapplog.com/
58
management. CommonJS and RequireJS solve this problem with AJAX-y approach. Node.js
borrowed many things from the CommonJS concept.
To export an object in Node.js, use exports.name = object;, e.g.,
1
2
3
4
5
6
7
8
9
10
var messages = {
find: function(req, res, next) {
...
},
add: function(req, res, next) {
...
},
format: 'title | date | author'
}
exports.messages = messages;
While in the file where we import aforementioned script (assuming the path and the file name is
route/messages.js):
1
var messages = require('./routes/messages.js');
However, sometime its more fitting to invoke a constructor, e.g., when we attach properties
to Express.js app (more on Express.js in Express.js FUNdamentals: An Essential Overview of
Express.js). In this case module.exports is needed:
1
2
3
4
5
6
module.exports = function(app) {
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
return app;
}
In the file that includes the example module above:
http://www.commonjs.org/
http://requirejs.org/
http://webapplog.com/express-js-fundamentals/
1
2
3
4
5
59
...
var app = express();
var config = require('./config/index.js');
app = config(app);
...
The more succinct code: var = express(); require('./config/index.js')(app);.

The most common mistake when including modules is a wrong path to the file. For core Node.js
modules, just use the name without any path, e.g., require(name). Same goes for modules in node_modules folder. More on that later in the NPM section.
For all other files, use . with or without a file extension, e.g.,
1
2
var keys = require('./keys.js'),

messages = require('./routes/messages.js');
In addition, for the latter category its possible to use a longer looking statements with __dirname
and path.join(), e.g., require(path.join(__dirname, ,routes, messages));
If require() points to a folder, Node.js will attempt to read index.js file in that folder.
4.6 Buffer is a Node.js Super Data Type

Buffer is a Node.js addition to four primitives (boolean, string, number and RegExp) and allencompassing objects (array and functions are also objects) in front-end JavaScript. We can think
of buffers as extremely efficient data stores. In fact, Node.js will try to use buffers any time it can,
e.g., reading from file system, receiving packets over the network.
4.7 __dirname vs. process.cwd

__dirname is an absolute path to the file in which this global variable was called, while process.cwd
is an absolute path to the process that runs this script. The latter might not be the same as the former
if we started the program from a different folder, e.g., $ node ./code/program.js.
4.8 Handy Utilities in Node.js

Although, the core of the Node.js platform was intentionally kept small it has some essential utilities
such as
60
URL
Crypto
Path
String Decoder
The method that we use in this tutorials is path.join and it concatenates path using an appropriate
folder separator (/ or \\).
4.9 Reading and Writing from/to The File System in

Node.js
Reading from files is done via the core fs module. There are two sets of methods: async and sync.
In most cases developers should use async methods, e.g., fs.readFile:
1
2
3
4
5
6
7
var fs = require('fs');
var path = require('path');
fs.readFile(path.join(__dirname, '/data/customers.csv'), {encoding: 'utf-8'}, fu\
nction (err, data) {
if (err) throw err;
console.log(data);
});
And the writing to the file:

1
2
3
4
5
fs.writeFile('message.txt', 'Hello World!', function (err) {
if (err) throw err;
console.log('Writing is done.');
});
4.10 Streaming Data in Node.js

Streaming data is a term that mean an application processes the data while its still receiving it. This
is useful for extra large datasets, like video or database migrations.
Heres a basic example on using streams that output the binary file content back:
http://nodejs.org/api/url.html
http://nodejs.org/api/crypto.html
http://nodejs.org/api/path.html
http://nodejs.org/api/string_decoder.html
http://nodejs.org/api/fs.html
http://nodejs.org/api/fs.html#fs_fs_readfile_filename_options_callback
1
2
61
fs.createReadStream('./data/customers.csv').pipe(process.stdout);
By default, Node.js uses buffers for streams.

For a more immersive training, take a loot at stream-adventure and Stream Handbook.
4.11 Installing Node.js Modules with NPM

NPM comes with the Node.js platform and allows for seamless Node.js package management. The
way npm install work is similar to Git in a way how it traverses the working tree to find a current
project. For starter, keep in mind that we need either the package.json file or the node_modules
folder, in order to install modules locally with $ npm install name, for example $ npm install
superagent; in the program.js: var suparagent = require('superagent');.
The best thing about NPM is that it keeps all the dependencies local, so if module A uses module
B v1.3 and module C uses module B v2.0 (with breaking changes comparing to v1.3), both A and
C will have their own localized copies of different versions of B. This proves to be a more superior
strategy unlike Ruby and other platforms that use global installations by default.
The best practice is not to include a node_modules folder into Git repository when the project is a
module that supposed to be use in other application. However, its recommended to include node_modules for deployable applications. This prevents a breakage caused by unfortunate dependency
update.
Note: The NPM creator like to call it npm (lowercase).
4.12 Hello World Server with HTTP Node.js Module

Although, Node.js can be used for a wide variety of tasks, its mostly knows for building web
applications. Node.js is thrives in the network due to its asynchronous nature and build-in modules
such as net and http.
Heres a quintessential Hello World examples where we create a server object, define request handler
(function with req and res arguments), pass some data back to the recipient and start up the whole
thing.
http://npmjs.org/stream-adventure
https://github.com/substack/stream-handbook
https://npmjs.org/doc/files/npm-folders.html
http://npmjs.org/doc/misc/npm-faq.html#Is-it-npm-or-NPM-or-Npm
1
2
3
4
5
6
62
var http = require('http');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');]
The req and res parameters have all the information about a given HTTP request and response
correspondingly. In addition, req and res can be used as streams (look in the previous section).
4.13 Debugging Node.js Programs

The best debugger is console.log(), but sometime we need to see the call stack and orient ourselves
in async code a bit more. To do that, put debugger statements in your code and use $ node debug
program.js to start the debugging process. For more developer-friendly interface, download node
inspector.
4.14 Taming Callbacks in Node.js

Callbacks are able to Node.js code asynchronous, yet programmers unfamiliar with JavaScript,
who come from Java or PHP, might be surprised when they see Node.js code described on Callback
Hell:
1
2
3
4
5
6
7
8
9
10
11
12
13
fs.readdir(source, function(err, files) {

if (err) {
console.log('Error finding files: ' + err)
} else {
files.forEach(function(filename, fileIndex) {
console.log(filename)
gm(source + filename).size(function(err, values) {
if (err) {
console.log('Error identifying file size: ' + err)
} else {
console.log(filename + ' : ' + values)
aspect = (values.width / values.height)
widths.forEach(function(width, widthIndex) {
http://nodejs.org/api/debugger.html
https://github.com/node-inspector/node-inspector
https://github.com/maxogden/art-of-node#callbacks
http://callbackhell.com/
14
15
16
17
18
19
20
21
22
23
24
25
63
height = Math.round(width / aspect)

console.log('resizing ' + filename + 'to ' + height + 'x' + height)
this.resize(width, height).write(destination + 'w' + width + '_' + f\
ilename, function(err) {
if (err) console.log('Error writing file: ' + err)
})
}.bind(this))
}
})
})
}
})
Theres nothing to be afraid of here as long as two-space indentation is used. ;-) However, callback
code can be re-write with the use of event emitters, promises or by utilizing the async library.
4.15 Introduction to Node.js with Ryan Dahl

Last, but not least, take a few minutes and watch this Introduction to Node.js with Ryan Dahl video.
4.16 Moving Forward with Express.js

For more meticulous Node.js instructions, take a look at Rapid Prototyping with JS: Agile JavaScript
Development and Node School (Figure 4-1).
http://www.youtube.com/embed/jo_B4LTHi3I
http://nodeschool.io
Figure 4-4: Node School home page
64
5. Express.js FUNdamentals: The Most

Popular Node.js Framework
Express.js is an amazing framework for Node.js projects and used in the majority of such web apps.
Unfortunately, theres a lack of tutorials and examples on how to write good production-ready
code. To mitigate this need, we released Express.js Guide: The Comprehensive Book on Express.js.
However, all things start from basics, and for that reason well give you a taste of the framework in
this post, so you can decide if you want to continue the learning further.
5.1 Express.js Installation

Assuming you downloaded and installed Node.js (and NPM with it), run this command:
1
$ sudo npm install -g express@3.4.3
5.2 Express.js Command-Line Interface

Now we can use command-line interface (CLI) to spawn new Express.js apps:
1
2
3
$ express -c styl expressfun

$ cd expressfun && npm install
$ node app
Open browser at http://localhost:3000.

Here is the full code of expressfun/app.js if you dont have time to create an app right now:
http://expressjsguide.com
Express.js FUNdamentals: The Most Popular Node.js Framework
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var
var
var
var
var
66
express = require('express');
routes = require('./routes');
user = require('./routes/user');
http = require('http');
path = require('path');
var app = express();

// all environments
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
5.3 Routes in Express.js

If you open the expressfun/app.js, youll see two routes in the middle:
1
2
3
4
...
app.get('/', routes.index);
app.get('/users', user.list);
...
The first one is basically takes care of all the requests to the home page, e.g., http://localhost:3000/
and the latter of requests to /users, such as http://localhost:3000/users. Both of the routes
process URLs case insensitively and in a same manner as with trailing slashes.
67
The request handler itself (index.js in this case) is straightforward: everything from the HTTP
request is in req and write results to the response in res:
1
2
3
exports.list = function(req, res){

res.send("respond with a resource");
};
5.4 Middleware as The Backbone of Express.js

Each line above the routes is a middleware:
1
2
3
4
5
6
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
The middleware is a pass thru functions that add something useful to the request as it travels along
each of them, for example req.body or req.cookie. For more middleware writings check out Intro
to Express.js: Parameters, Error Handling and Other Middleware.
5.5 Configuration of an Express.js App

Here is how we define configuration in a typical Express.js app:
1
2
3

An ordinary settings involves a name (e.g., views) and a value (e.g., path to the folder where out
templates/views live). There is more than one way to define a certain settings, e.g, app.enable for
boolean flags.
5.6 Jade is Haml for Express.js/Node.js

Jade template engine is akin to Ruby on Rails Haml in the way it uses whitespace and indentation,
e.g., layout.jade:
http://webapplog.com/intro-to-express-js-parameters-error-handling-and-other-middleware/
1
2
3
4
5
6
7
68
doctype 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
Other than that, its possible to utilize full-blown JavaScript code inside of Jade templates.
5.7 Conclusion About The Express.js Framework

As youve seen, its effortless to create MVC web apps with Express.js. The framework is splendid for
REST APIs as well. If you interested in them, visit the Tutorial: Node.js and MongoDB JSON REST
API server with Mongoskin and Express.js and Intro to Express.js: Simple REST API app with Monk
and MongoDB.
If you want to know what are the other middlewares and configurations, check out Express.js API
docs, Connect docs and of course our book Express.js Guide. For those who already familiar
with some basics of Express.js, I recommend going through ExpressWorks an automated
Express.js workshop.
5.8 ExpressWorks
After youve mastered Node.js and Express.js basics in this book, you might want to consider
working on ExpressWorks(Figure 5-1). This is an interactive class about the Express.js framework
which is as of today is the most popular module on NPM.
http://webapplog.com/tutorial-node-js-and-mongodb-json-rest-api-server-with-mongoskin-and-express-js/
http://webapplog.com/intro-to-express-js-simple-rest-api-app-with-monk-and-mongodb/
http://expressjs.com/api.html
http://www.senchalabs.org/connect/
http://webapplog.com/expressworks
http://webapplog.com/expressworks
69
Figure 5-1: ExpressWorks menu
5.9 Update
For migrating from Express.js 3.x to 4.x take a look at this guide: Migrating Express.js 3.x to 4.x:
Middleware, Route and Other Changes.
Share on Twitter with ClickToTweet link: http://clicktotweet.com/HDUx0, or just click:
Ive finished JavaScript and Node.js FUNdamentals: A Collection of Essential Basics
by @azat_co #nodejs https://leanpub.com/jsfun
http://webapplog.com/migrating-express-js-3-x-to-4-x-middleware-route-and-other-changes/
http://ctt.ec/VQcEb
6. About the Author
Azat Mardan: A software engineer, author and yogi.
Azat Mardan has over 12 years of experience in web, mobile and software development. With a
Bachelors Degree in Informatics and a Master of Science in Information Systems Technology
degree, Azat possesses deep academic knowledge as well as extensive practical experience.
Currently, Azat works as a Software Engineer Team Lead at DocuSign, where his team rebuilds 50
million user product (DocuSign web app) using the tech stack of Node.js, Express.js, Backbone.js,
CoffeeScript, Jade, Stylus and Redis.
Recently, he worked as an engineer at the curated social media news aggregator website Storify.com
(acquired by LiveFyre). Before that, Azat worked as a CTO/co-founder at Gizmo an enterprise
cloud platform for mobile marketing campaigns, and he has undertaken the prestigious 500
Startups business accelerator program. Previously, he was developing mission-critical applications
for government agencies in Washington, DC: National Institutes of Health, National Center for
Biotechnology Information, Federal Deposit Insurance Corporation, and Lockheed Martin. Azat
is a frequent attendee at Bay Area tech meet-ups and hackathons (AngelHack, and was a hackathon
2012 finalist with team FashionMetric.com).
http://docusign.com
http://storify.com
http://livefyre.com
http://www.crunchbase.com/company/gizmo
http://500.co/
http://nih.gov
http://ncbi.nlm.nih.gov
http://fdic.gov
http://lockheedmartin.com
http://angelhack.com
http://fashionmetric.com
About the Author
71
In addition, Azat teaches technical classes at General Assembly and Hack Reactor, pariSOMA
and Marakana (acquired by Twitter) to much acclaim.
In his spare time, he writes about technology on his blog: webAppLog.com which is number one
in express.js tutorial Google search results. Azat is also the author of Express.js Guide, Rapid
Prototyping with JS and Oh My JS.
http://generalassemb.ly
http://hackreactor.com
http://parisoma.com
http://marakana.com
http://webapplog.com
http://expressjsguide.com/assets/img/expressjs-tutorial.png
http://leanpub.com/ohmyjs
7. Review
If you liked this book (or not), please leave your review on the Amazom page.
http://amzn.to/19qbVzn
8. Errata
Please help us make this book better by submitting issues via other means of communication listed
below in the Contact Us section.
9. Contact Us
Lets be friends on the Internet!
Tweet Node.js question on Twitter: @azat_co
Follow Azat on Facebook: facebook.com/profile.php?id=1640484994
GitHub: github.com/azat-co
Other Ways to Reach Us
Email Azat directly: hi@azat.co

Google Group: rpjs@googlegroups.com and https://groups.google.com/forum/#!forum/rpjs
Blog: webapplog.com
HackHall: community for hackers, hipsters and pirates
Share on Twitter with ClickToTweet link: http://clicktotweet.com/HDUx0, or just click:

Ive finished JavaScript and Node.js FUNdamentals: A Collection of Essential Basics
by @azat_co #nodejs https://leanpub.com/jsfun
https://twitter.com/azat_co
https://www.facebook.com/profile.php?id=1640484994
https://github.com/azat-co
mailto:hi@azat.co
mailto:rpjs@googlegroups.com
http://webapplog.com
http://hackhall.com
http://ctt.ec/VQcEb

JavaScript Fundamentals

Uploaded by

JavaScript Fundamentals

Uploaded by

Sold to

JavaScript and Node FUNdamentals

Tweet This Book!

Also By Azat Mardan

2. CoffeeScript FUNdamentals: The Better JavaScript

3. Backbone.js FUNdamentals: The Cornerstone of JavaScript MV* Frameworks .

4. Node.js FUNdamentals: JavaScript on The Server . . . . .

5. Express.js FUNdamentals: The Most Popular Node.js Framework

6. About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

If its not fun, its not JavaScript.

1. JavaScript FUNdamentals: The

public class HelloWorld {

The same example in JavaScript:

or from within an HTML page:

JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web

1.2 Loose Typing

'a' === new String('a') //false

'a' === new String('a').toString() //true

'a' == new String('a') //true

By the way, == performs automatic type casting while === not.

1.3 Object Literal Notation

JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web

Remember that functions are objects?

var obj = function () {

1.4.1 Create a Function

JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web

var f = function () {console.log('Boo');}

1.4.2 Pass Functions as Params

var convertNum = function (num) {

1.4.3 Invocation vs. Expression

Function invocation looks like this:

function f() {return false;}

On the other hand, if a function doesnt return anything, its a statement:

JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web

function f(a) {console.log(a);}

1.6 Prototypal Nature

var user = function (ops) {

JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web

var MainView = Backbone.View.extend({...})

var obj = { firstName: "John"

JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web

1.7.6 White spaces

1.9 Immediately-Invoked Function Expressions (IIFEs)

JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web

Now try this:

1.10 Keyword this

var app = this

target anchor element

When in doubt: console.log!

JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web

1.12 Further Learning

2. CoffeeScript FUNdamentals: The

Semicolons, Whitespace and Parentheses

2.1 Semicolons, Whitespace and Parentheses

CoffeeScript FUNdamentals: The Better JavaScript

Translates into this JavaScript:

CoffeeScript FUNdamentals: The Better JavaScript

CoffeeScript FUNdamentals: The Better JavaScript

So is is ===, isnt is !==, not is !, and is &&, and or is ||.

CoffeeScript FUNdamentals: The Better JavaScript

console.log a if a is not null

Note: unless is just a shortcut for if not.

a = (x,y) -> console.log x+y

a = (x, y, z=15) ->

CoffeeScript FUNdamentals: The Better JavaScript

The JavaScript code:

CoffeeScript FUNdamentals: The Better JavaScript

CoffeeScript FUNdamentals: The Better JavaScript

The console outputs this:

var Compact, Suv, Vehicle, caddi, camry,

CoffeeScript FUNdamentals: The Better JavaScript

CoffeeScript FUNdamentals: The Better JavaScript

camry = new Compact("Camry");

2.6 Arrays and Slicing

The console outputs:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] [3, 4, 5]