JavaScript Basics & Best Practices

Competence Center Front-end & UX

Dennis JaamannFront-end developer

Overview

▪ Part 1: Introduction

▪ What is JavaScript?

▪ How a JavaScript engine works

▪ Language features

▪ The future of JavaScript

Overview

▪ Part 2: The Basics

▪ Types, variables, constants and literals

▪ Expressions and operators

▪ Statements

▪ Functions

▪ Objects

▪ Prototypical inheritance

▪ Equality

Overview

▪ Part 3: Best Practices for enterprise apps

JavaScript Basics & Best Practices

Part 1: Introduction

What is JavaScript? According to java devs

▪ Works in all browsers except IE

▪ A crappy version of Java

▪ No type safety

▪ Something to stay miles away from

▪ JavaScript sucks *ss (1)

(1) = Actual wording of most Java developers, presenter cannot be held accountable for harshness thereof

What is JavaScript? Really

▪ Invented by Brendan Eich (1995)

▪ Former CTO / CEO of mozilla

▪ Cross-platform

▪ Object based

▪ Dynamic

▪ Scripting language

▪ Currently ECMA-262 (ECMAScript 5)

▪ Web APIs (DOM, ..)

How a JavaScript engine works

▪ Virtual machine▪ Interpret and execute JavaScript▪ Most common in browsers▪ For example: Google V8 engine

Language features - The bad

▪ Easy to introduce globals = root of all evil

▪ Automatic line termination▪ Semicolons automatically inserted by interpreter▪ Can lead to quirky behavior▪ No warning

▪ Object equality and Object comparison▪ Error prone due to dynamically typed objects▪ Type coercion happens automagically (= auto casting)

Language features - The good

▪ Everything is an Object▪ Including functions

▪ Objects are loosely typed▪ Every object can be assigned any value

▪ Objects are dynamic ▪ Can change type @ runtime▪ Add members on the fly

▪ Object literals

The future of JavaScript

▪ ECMAScript 6▪ Classes▪ Modules▪ Promises▪ http://kangax.github.io/compat-table/es6/

▪ WebComponents▪ Extend HTML with your own components▪ Already available through usage of Polymer

JavaScript Basics & Best Practices

Part 2: The basics

Types, variables, constants and literals - Types

▪ 5 primitive types in JavaScript

Type Possible values

Number 1337, 3.14

String “JavaScript sucks *ss according to java devs”

Boolean true, false

null null

undefined undefined

Types, variables, constants and literals - Types

▪ 2 complex types in JavaScript

▪ Object▪ Constructor▪ Members▪ Inheritance-like behavior through prototypes

▪ Function▪ Every function is a new instance of the Function object▪ Block of code designed to perform a specific task

Types, variables, constants and literals - Types

▪ null vs. undefined

▪ null: value that can be assigned to a variable to indicate an empty value

▪ undefined: value of a variable that has been declared but has not been assigned a value

var someNullifiedVariable = null;console.log(someNullifiedVariable); // nullconsole.log(typeof someNullifiedVariable); // Object

var someUndefinedVariable;console.log(someUndefinedVariable); // undefinedconsole.log(typeof someNullifiedVariable); // undefined

Types, variables, constants and literals - Variables

▪ Declaring a variable

▪ The good way▪ Use var keyword▪ Variable always declared on current scope

▪ The evil way▪ No keyword▪ Variable always declared on global scope▪ Warning in strict mode

var someNumber = 42; // The good waysomeOtherNumber = 42 // The evil way

Types, variables, constants and literals - Variables

▪ Variable scope

▪ Global scope▪ Variable declared outside of any function▪ Accessible to any other code in the document

▪ Function scope▪ Variable declared inside of any function▪ Accessible to function and all inner functions

▪ Block scope▪ Variable declared within block is local to containing function

Types, variables, constants and literals - Variables

if(true){ var someGlobalVar = 1337; //global scope, since block is outside of any function } function someFunction(){ var someLocalVar = 9000; // function scope function someInnerFunction(){ console.log(someLocalVar); //9000 someLocalVar = 90210; } someInnerFunction(); console.log(someLocalVar); //90210 }

console.log(someGlobalVar); //1337 someFunction(); console.log(someLocalVar); //Uncaught ReferenceError

Types, variables, constants and literals - Constants

▪ Defining a constant

const myTotallyAwesomeConstant = 3;console.log(myTotallyAwesomeConstant); // 3

const myTotallyAwesomeConstant = 1337;console.log(myTotallyAwesomeConstant); // 3

Types, variables, constants and literals - Literals

▪ Defining literals▪ Represent fixed values, not variables▪ Literally providing values in code var myAwesomeArray = [1,2,"test",true]; var myAwesomeObject = {firstMember:1,secondMember:2}; var myAwesomeBoolean = true; var myAwesomeNumber = 1337; var myAwesomeString = "Ordina is too awesome"; console.log(myAwesomeArray.toString()); // 1,2,test,true console.log(myAwesomeObject); // Object {firstMember: 1, secondMember: 2} console.log(myAwesomeBoolean); // true console.log(myAwesomeNumber); // 1337 console.log(myAwesomeString); // Ordina is too awesome

Expressions and operators

▪ Expressions and operators very similar to Java▪ Precedence also similar

Assignment Comparison Arithmetic Bitwise Logical String

+=-=*=/=%=<<=>>=>>>=&=^=|=

==!====!==>>=<<=

%++---

&|^~<<>>>>>

&&||!

++=

Statements

▪ Statements also very similar to Java

Conditional Loops Exceptions

if(){}else{}

switch(){}

while(){};

do{}while();

for(){};

continue;

break

throw

try{}catch(){};

Functions

▪ Fundamental building blocks in JavaScript

▪ Perform a set of statements▪ Calculate a value▪ Perform a task

▪ Define on the scope from where you want to call it

Functions - Arguments

▪ Primitive arguments always passed by value (copy)

function myAwesomeFunction(somePrimitiveNumber){ console.log(somePrimitiveNumber); // 99 somePrimitiveNumber = 1337; console.log(somePrimitiveNumber); // 1337 } var someNumber = 99; console.log(someNumber)// 99 myAwesomeFunction(someNumber); console.log(someNumber); // 99

Functions - Arguments

▪ Complex arguments always passed by reference▪ Arrays, Objects, Functions▪ Changing value of any property => visible outside function scope

function myAwesomeFunction(someComplexObject){ console.log(someComplexObject); // Object {member1:"gold",member2:"silver"} someComplexObject.member2 = "wood"; console.log(someComplexObject); // Object {member1:"gold",member2:"wood"} } var someComplexObject = {member1:"gold",member2:"silver"}; console.log(someComplexObject)// Object {member1:"gold",member2:"silver"} myAwesomeFunction(someComplexObject); console.log(someComplexObject); // Object {member1:"gold",member2:"wood"}

Functions - Arguments

▪ Complex arguments always passed by reference▪ Arrays, Objects, Functions▪ Changing argument value => NOT visible outside function scope

function myAwesomeFunction(someComplexObject){ console.log(someComplexObject); // Object {member1:"gold",member2:"silver"} someComplexObject = {superMember:"Titanium"}; console.log(someComplexObject); // Object {superMember:"Titanium"} } var someComplexObject = {member1:"gold",member2:"silver"}; console.log(someComplexObject)// Object {member1:"gold",member2:"silver"} myAwesomeFunction(someComplexObject); console.log(someComplexObject); // Object {member1:"gold",member2:"silver"}

Functions - Multiple Arguments

▪ Array-like object to iterate through arguments▪ Can pass any number of arguments (overloading-ish)

function myAwesomerFunction(firstNumber){ var result = "" + firstNumber; for(var i = 1; i < arguments.length; i++) { result += "," + arguments[i]; } console.log(result); } var myFirstNumber = 99; myAwesomerFunction(myFirstNumber); // 99 myAwesomerFunction(myFirstNumber,100); // 99,100 myAwesomerFunction(myFirstNumber,100,101); // 99,100,101

Functions - Closures

▪ Powerful JavaScript feature

▪ Closure = nested function▪ Inner function can access all variables and functions of outer function▪ Inner function can access scope of outer function▪ Outer function CANNOT access any variable or function of inner function

▪ Encapsulation of variables and functions of inner function

Functions - Closures

▪ A simple example

var outerCarFunction = function(outerMake) { var getInnerMake = function() { return outerMake; //Inner function has access to outer function variables } return getInnerMake; //Expose inner method to outer scope }; var myCar = outerCarFunction("Beamer, Benz or Bentley"); console.log(myCar()); // Beamer, Benz or Bentley

Functions - Closures

▪ A more complex examplevar createCar = function(manufacturer,model) { return {

setManufacturer: function(newManufacturer) { manufacturer = newManufacturer;

}, getManufacturer:function(){ return manufacturer; },

setModel: function(newModel) { model = newModel;

}, getModel: function(){ return model; }};}

Functions - Closures

▪ A more complex example (2)

var car = createCar("Crappy Co.","Ruster");console.log(car.getManufacturer());// Crappy Co.console.log(car.getModel()); // Ruster

car.setManufacturer("Bugatti");car.setModel("Veyron");console.log(car.getManufacturer());// Bugatticonsole.log(car.getModel()); // Veyron

Objects

▪ JavaScript is designed to be Objects-based▪ Objects can have properties▪ Objects can have methods▪ Use predefined objects or create your own

▪ Objects are also associative arrays (basic maps)

var movie = new Object(); // or var movie = {};movie.title = "Sharknado";movie.rating = "Utter crap";

var movie = new Object(); // or var movie = {};movie["title"] = "Sharknado";movie["rating"] = "Utter crap";

Objects

▪ Creating objects▪ Using literals

▪ Using a constructor function

var movie = {title:”Sharknado”,rating:”Utter crap”};

function Movie(title,rating){ this.title = title; this.rating = rating;};

var sharknado = new Movie("Sharknado","Utter crap");

Prototypical inheritance

▪ No classes in JavaScript

▪ JavaScript uses object linking▪ Also known as prototypes

▪ Multiple ways to create a prototype▪ Object.create()▪ Constructor

▪ Can have a performance impact▪ Never extend native prototypes. For example Object.prototype

Prototypical inheritance - Object.create()

var baseAnimal = { hasTail:true, numberOfLegs:4, makeSound: function(){ return "Roar"; }};console.log(baseAnimal.makeSound()); // Roar

var spider = Object.create(baseAnimal);spider.hasTail = false;spider.numberOfLegs = 8;spider.makeSound = function(){return "Kill it, with fire!"};

console.log(spider); // Object {hasTail: false, numberOfLegs: 8, makeSound: function, hasTail: true, numberOfLegs: 4…}console.log(spider.makeSound()); // Kill it, with fire!

Prototypical inheritance - Constructor

var baseAnimal = { hasTail:true, numberOfLegs:4, makeSound: function(){ return "Roar";}};

function Spider(){ this.hasTail = false; this.numberOfLegs = 8; this.makeSound = function(){return "Kill it, with fire!"};};

Spider.prototype = baseAnimal;

var spider = new Spider();console.log(spider); // Object {hasTail: false, numberOfLegs: 8, makeSound: function, hasTail: true, numberOfLegs: 4…}console.log(spider.makeSound()); // Kill it, with fire!

Equality

▪ 2 ways of determining equality of 2 objects

▪ Abstract equality▪ Attempts an automatic type conversion, then compare▪ Error prone, avoid whenever possible

▪ Strict equality▪ No automatic type conversion, return false when object not of same type

x == y

x === y

Equality

▪ Equality only works on primitives & same object references▪ Does not apply to complex objects, no traversal of properties

var developer = {totallyAwesome:true};var architect = {totallyAwesome:true};var manager = {totallyAwesome:false};

console.log(developer == manager);// falseconsole.log(developer === manager);// falseconsole.log(developer == architect);// falseconsole.log(developer === architect);// falseconsole.log(developer == developer);// true, same object referenceconsole.log(developer === developer);// true, same object reference

Equality - Abstract vs. strict equality

x y == ===

undefined undefined true true

null null true true

true true true true

false false true true

“0rd1n4 r0ck5” “0rd1n4 r0ck5” true true

{member:”one”} x true true

0 0 true true

Equality - Abstract vs. strict equality (2)

x y == ===

0 false true false

“” false true false

“” 0 true false

“0” 0 true false

“17” 17 true false

[1,2] “1,2” true false

null undefined true false

Equality - Abstract vs. strict equality (3)

x y == ===

null false false false

undefined false false false

{member:”one”} {member:”one”} false false

0 null false false

0 NaN false false

“0rd1n4 r0ck5” NaN false false

NaN NaN false false

JavaScript Basics & Best Practices

Part 3: Best Practices for enterprise applications

Best Practices #1

▪ Use JSLint / JSHint

▪ Automatically detect problems in your JavaScript code

▪ Strict equality

▪ Trailing comma

▪ Missing semicolon

▪ Undeclared variables

▪ ...

▪ Available in the better JS IDE

▪ Plugins available for CI environments

Best Practices #2

▪ Use a code formatter

▪ Code should be easy to read

▪ Team standard

▪ Easy to spot potential problems in your code

▪ Missing semicolon

▪ Trailing comma

▪ Available by default in the better JS IDE

Best Practices #3

▪ Never use inline <script>

▪ Always use an external .js file

▪ Separation of concerns

▪ Easier to maintain

▪ Reusability

▪ Inline scripts cannot be cached

▪ Inline scripts block the browser while processing JavaScript

Best Practices #4

▪ Use strict mode

▪ Indicate that code should execute in strict mode

▪ No undeclared variables

▪ No defining a variable multiple times

▪ No duplication of parameters

▪ File or function scope

▪ ECMAScript 5+ only

“use strict”

Best Practices #5

▪ Do not use native Array.sort()

▪ Quirky behaviour in some browsers

▪ Converts all items to strings by default and sorts them alphabetically

Best Practices #6

▪ eval() is evil

▪ Takes any string containing js code, compiles it and runs it

▪ Usually used for

▪ Serialization of objects

▪ Parsing of user input

▪ Problems

▪ Will try to convert any string into an object

▪ Slow

▪ Difficult to debug

Best Practices #7

▪ Beware of console.log()

▪ Quirky behaviour in some version of IE (8 and under)

▪ Will crash your application when not using developer tools.. DAFUQ?!!!

▪ Monkey patches available

▪ Remove console.log() statements from production code automatically

▪ Using grunt uglify plugin

Best Practices #8

▪ Concatenate your separate JavaScript files

▪ Concatenation = making 1 big file out of multiple smaller ones

▪ Less HTTP requests = less overhead bandwidth

▪ HTTP allows only up to 4 concurrent downloads

▪ Pitfall: has an impact on caching strategies

▪ Make 1 file per module your application uses

▪ Automate using grunt plugin

Best Practices #9

▪ Minify your JavaScript files

▪ Minification = Removing unnecessary chars from .js file

▪ Whitespaces, newlines, comments, ..

▪ Minification essentially removes obsolete bytes from the file

▪ Faster download

▪ More code = more optimization

▪ Great in conjunction with concatenation

▪ Automate using grunt plugin

Best Practices #10

▪ Enable Gzip compression on your server

▪ Often forgotten

▪ Easiest way to compress your files

▪ Save a lot of bandwidth

Best Practices #11

▪ Use lodash

▪ Lodash = fork of underscore with more features

▪ Functional programming library

▪ Abstraction layer for many quirky JavaScript features

▪ Sameness

▪ Collections

▪ ...

▪ Makes code more concise

▪ Write less code, write less bugs

Best Practices #12

▪ Use grunt

▪ Automate building your JavaScript code

▪ 1 Configuration file

▪ Create build workflow

▪ Many plugins

▪ Minify

▪ Obfuscate

▪ Concatenate

Best Practices #13

▪ Use bower

▪ External dependency management tool

▪ Only 1 configuration file{ "name": "app-name", "version": "0.0.1", "dependencies": {

"sass-bootstrap": "~3.0.0","modernizr": "~2.6.2","jquery": "~1.10.2"

}, "private": true}

Best Practices #14

▪ Use modernizr

▪ Automatically detect features of the browser used

▪ Detect HTML5 / CSS3 features

▪ Provide fallbacks for older browsers

Sources

▪ Websites▪ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview

▪ http://www.ecma-international.org/publications/standards/Ecma-262.htm

▪ http://addyosmani.com/blog/

▪ http://dailyjs.com/

▪ http://webcomponents.org/

▪ http://www.quirksmode.org/js/events_order.html

▪ Books▪ Javascript: The good parts (http://shop.oreilly.com/product/9780596517748.do)

▪ Understanding ECMAScript 6 (https://leanpub.com/understandinges6/read)

▪ Effective JavaScript (http://www.amazon.com/Effective-JavaScript-Specific-Software-Development/dp/0321812182)

▪ You don’t know JS (http://www.amazon.com/You-Dont-Know-JS-Prototypes-ebook/dp/B00LPUIB9G)

▪ Head First JavaScript (http://www.amazon.com/dp/144934013X)