In this presentation I share some tips about how to improve the quality and readability of JavaScript code, more specifically: - Object Oriented JavaScript (comparing JS with Java) - Bad practices - Good practices - Guidelines - Recommended books

1. BUILDING MAINTAINABLE
JAVASCRIPT APPLICATIONS
JUAN DAVID CUARTAS
@JUANCUARTAS

3. BECAUSE JAVASCRIPT WILL BECOME THE
DOMINANT PROGRAMMING LANGUAGE OF THE
FUTURE…
• JavaScript is de facto language in Web Browsers, where Java Applets,
VBScript and Adobe Flash become obsolete.
• JavaScript is becoming a popular Server Programming Language after
the success of Node.js.
• JavaScript will become de facto language to write multi-platform apps
running on mobile devices, and mobile devices will rule the world!
• JavaScript is being used to write smart TV apps.
• JavaScript is now adopted by GNOME and Windows 8 to write desktop
applications.

4. …AND THE FUTURE IS CLOSER THAN YOU
THINK!
What do you think were the most popular programming languages ​​in GitHub on 2013?

5. THAT SOUNDS VERY COOL BUT…
PEOPLE HATE JAVASCRIPT!

6. IT IS BECAUSE JAVASCRIPT IS A
MISUNDERSTOOD PROGRAMMING
LANGUAGE…
Some people think JavaScript is such a bad programming language because it doesn´t allow
Object Oriented Programming features like:
• Classes
• Inheritance
• Packages/Namespaces
• Enumerations
• Access Modifiers
• Polymorphism
• Exceptions

7. ... AND AS A RESULT, PEOPLE END UP
WRITING SPAGHETTI CODE

9. JAVASCRIPT ALLOWS CLASSES
Java class
JavaScript class
public class Person {
private String _name;
public Person(String name) {
_name = name;
}
public String getName() {
return _name;
};
@Override
public String toString() {
return "name: " + _name;
};
}
function Person(name) {
var _name = name;
this.getName = function () {
return _name;
};
this.toString = function () {
return "name: " + _name;
};
}

10. JAVASCRIPT ALLOWS CLASSES
Java: instance of a class JavaScript: instance of a class

11. JAVASCRIPT ALLOWS INHERITANCE
Java inheritance JavaScript inheritance

12. JAVASCRIPT ALLOWS INHERITANCE
Java: instance of an
inherited class
JavaScript: instance of an
inherited class
For both objects, it is invoked toString() method defined in “Person” parent class, having the sam

13. JAVASCRIPT ALLOWS NAMESPACES
Java package JavaScript namespace

14. JAVASCRIPT ALLOWS ENUMERATIONS
Java enumeration JavaScript enumeration

15. JAVASCRIPT ALLOWS ACCESS MODIFIERS
Java: public and private access modifiersJavaScript: public and private access modifiers

16. JAVASCRIPT ALLOWS POLYMORPHISM
Lets to explain a classic example…

17. THIS IS HOW WE IMPLEMENT POLYMORPHISM IN
JAVA

18. … AND THIS IS HOW WE IMPLEMENT POLYMORPHISM IN
JAVASCRIPT

19. JSDOC
JSDoc is a markup language used to annotate JavaScript source
code files, similar to Javadoc.
All files, classes, methods and properties should be documented
with JSDoc with the appropriate tags and types.
For more reference see: {@link http://usejsdoc.org}

20. JSDOC - TAGS
@access Specifies the access level of a member: private, protected, public.
@author Identifies the author of an item.
@callback Documents a callback function.
@class Marks a function as a class.
@constant {type} Marks an object as a constant.
@copyright Documents some copyright information.
@default Documents a default value.
@enum {type} Marks an object as an enumeration.
@extends Indicates that a class inherits from another class.
@file Provides a description for a file.
@ignore Removes a JSDoc item from the final output.
@link Links to a JSDoc namepath or an external URL.
@module Documents a JavaScript module.
@namespace Marks an object as a namespace.
@param {type} Documents a parameter of a function.
@requires Describes a required module.
@return {type} Documents the return value of a function.
@type {type} Documents the type of an object.
@version Documents the version number of an item.

21. JSDOC - TYPES
- Primitive types: {boolean}, {number}, {string}
- Instance types: {myNamespace.MyClass}, {{a: type, b: type>}}, {type[]}
- Functions: {function(a: type, b: type): type}
- Nullable types: {?type}
- Variable args: {...type}

22. JSDOC - EXAMPLE
/**
* @file Here goes file description. Filenames should be all lowercase in
* order to avoid confusion on case-sensitive platforms.
*
* @version 1.0
* @author Juan Cuartas <me@juancuartas.com>
* @copyright Juan Cuartas, 2013
*
* @requires some/module
*/

23. JAVASCRIPT BAD PRACTICES

24. BAD PRACTICES – GLOBAL VARIABLES
Bad practice:
“items” is attached to the
Window object. Any other
function can easily
override that variable.
Good practice:
“items” is attached to a custom
namespace.
<script>
var items = [];
function addToCart(item) {
items.push(item);
}
</script>
<script>
var shoppingCart = shoppingCart || {};
shoppingCart.items = [];
function addToCart(item) {
shoppingCart.items.push(item);
}
</script>

25. BAD PRACTICES – MISSING SEMICOLONS
Not using semicolons
is a sin!
var qty = 3
var price = 17
var total = qty * price
Father, I
don´t use
semicolons!

26. BAD PRACTICES – NO STRICT COMPARISION
Bad practice:
This comparition performs
coercion, so "1" == 1 is
true!
Good practice
<script>
if (numericVar == 1) {
// Statements...
}
if (numericVar != 1) {
// Statements...
}
</script>
<script>
if (numericVar === 1) {
// Statements...
}
if (numericVar !== 1) {
// Statements...
}
</script>

27. BAD PRACTICES – CURLY BRACES IN NEW
LINE
function getTotal()
{
var qty = 10;
var price = 150;
var total = qty * price;
return
{
qty: qty,
price: price,
total: total
}
}
function getTotal() {
var qty = 10;
var price = 150;
var total = qty * price;
return {
qty: qty,
price: price,
total: total
}
}
function getTotal()
{
var qty = 10;
var price = 150;
var total = qty * price;
return;
{
qty: qty,
price: price,
total: total
}
}
WRONG!
Because the JavaScript interpreter performs
semicolon insertion, it thinks is missing a
semicolon after the return statement, and the
function doesn´t return anything at all.
Right style!

28. BAD PRACTICES – LOOPING OVER ARRAYS
Bad
practice
var fruits = ["banana", "apple", "lemon", "grape"];
for (var i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
var fruits = ["banana", "apple", "lemon", "grape"];
fruits.forEach(function (fruit) {
console.log(fruit);
});
Good practice:
More understandable
code
Use JS capabilities
Less code

29. BAD PRACTICES – INLINE EVENT HANDLERS
Bad practice:
Attaching logic from
the UI.
Good practice:
Separate logic in a controller
file.
<button id="btnSomething" onclick="doSomething();">
Click here...
</button>
$("#btnSomething").click(doSomething);

30. JAVASCRIPT GUIDELINES

31. GUIDELINES - USE STRICT
<script>
"use strict";
hello = "Hello World!";
alert(hello);
</script>
<script>
hello = "Hello World!";
alert(hello);
</script>
Always use "use strict" at the top of JS files. That allows to place
a program, or a function, in a strict operating context,
preventing certain actions from being taken and throws more
exceptions with more information.

32. GUIDELINES - VARIABLES
/**
* Use lowerCamelCase for variable names.
*
* When you fail to specify var, the variable gets placed in the global context,
* potentially clobbering existing values. Also, if there's no declaration,
* it's hard to tell in what scope a variable lives (e.g., it could be in the
* Document or Window just as easily as in the local scope). So always declare
* with var.
*
* @type {string}
*/
var someVariable = "Some value";

33. GUIDELINES - CONSTANTS
/**
* Use UPPER_CASE for constant names. Words should be separated through
* underscore character. Always add the @const annotation.
*
* @const
* @type {number}
*/
var SOME_CONSTANT = 0;

34. GUIDELINES - NAMESPACES
/**
* Always prefix identifiers in the global scope with a unique pseudo namespace
* related to the project or library. Use lowerCamelCase for namespaces. Always
* add the @namespace annotation.
*
* @namespace
*/
var namespace = namespace || {};

35. GUIDELINES - FUNCTIONS
/**
* Use lowerCamelCase for function names.
*
* @param {number} arg - This is a description for "arg".
* @return {number} If the function returns something, it must be specified.
*/
namespace.someFunction = function ( arg ) {
return arg + 1;
};

36. GUIDELINES - ENUMERATIONS
/**
* Use UperCamelCase for enum names, and UPPER_CASE for item names.
* Always add the @enum annotation following enum type.
*
* @enum {string}
*/
var MyEnumeration = {
ITEM_A: "A",
ITEM_B: "B",
ITEM_C: "C"
};

37. GUIDELINES - CLASSES
/**
* Use UperCamelCase for class names. Always add the @class annotation.
* @class
*/
function MyClass() {
/**
* Private attributes and methods should be named with a trailing underscore.
* @type {number}
*/
var _attribute = 1;
/**
* Returns a string that represents the current object.
* @return {string} A string that represents the current object.
*/
var _toString = function () {
return _attribute.toString();
};
return {
attribute: _attribute,
toString: _toString
};
}

38. GUIDELINES – BOOLEAN EXPRESSIONS
/**
* The following are all false in boolean expressions:
*
* - null
* - undefined
* - "" the empty string
* - 0 the number
*/
/* USE */ if (x) /* INSTEAD OF */ if (x != null)
/* USE */ if (x) /* INSTEAD OF */ if (x != null && x != "")
/* USE */ if (array.length) /* INSTEAD OF */ if (array.length > 0)

39. FRAMEWORKS REVIEW

40. JAVASCRIPT: THE GOOD PARTS
• Is the Holy Book for JavaScript Programmers
• Writen by Douglas Crockford in 2008
• Best known for popularize JSON Notation
• Creator of JSLint and JSON2.js
For more reference see:
{@link http://crockford.com}

41. LEARNING JAVASCRIPT DESIGN PATTERNS
• Written by Addy Osmani in 2012
• This book is targeted at professional developers wishing to
improve their knowledge of design patterns and how they can
be applied to the JavaScript programming language.
For more reference see:
{@link
http://addyosmani.com/resources/essentialjsdesignpatterns/bo
ok}

42. THANK
S!