Hands on:

The sexy side of JavaScript (feat. node.js)

@pirafrankfpira.com Francesco Pira

Google #io16 Extended Catania

fpira.com

Who I am ?

• Web developer

• Co-founder @ fileshute.com

• VP @ Youth Hub Catania

• I like coding, learning new stuff, meet new people (yay!)

Can JavaScript be sexy?

fpira.com

ECMAScript, actually…

• Official language name

• Versions often abbreviated as 'ESx'

• ES3 = 1999;

• var ES5 = 2015;

• const ES6 = 2016;

• (ES7 is WIP…)

JavaScript for back-end developers

!==

fpira.com

nvm

• nvm : node version manager (bash script)

• $ nvm install 6.1.0

fpira.com

Types

• Number (dp 64 bit)

• String

• Boolean

• Object

• function, Array,

• Date, RegExp

• Symbol (ES6+)

• NaN

• Special objects

• undefined

• null

fpira.com

Truthy and falsy

• true

• non-zero numbers

• "strings"

• objects

• arrays

• functions

• false

• 0

• ""

• undefined

• null

• NaN

fpira.com

Flow control

• Conditional statements

• Exception handling statements

• Promises (since ES6)

fpira.com

Conditional statements

• if…else

• switch

if (condition_1) { //statement_1; } else if (condition_2) { //statement_2; } else { //statement_last; }

switch (myVar) { case one: //statements break; case two: //statements break; ... default: //statements break; }

fpira.com

Loops

• while

• do…while

• for

• for…in

• for…of

for (i==0; i<3; i++) { //statement }

var i = 0; do { i += 1; console.log(i); } while (i < 5);

while (x < 10) { x++; }

fpira.com

for…in vs for…of

• for...in iterates over property names

• for...of iterates over property values

let arr = [3, 5, 7]; arr.foo = "hello";

for (let i in arr) { console.log(i); // logs "0", "1", "2", "foo" }

for (let i of arr) { console.log(i); // logs "3", "5", "7" }

fpira.com

Exception handling

• throw

• try…catch

• try…catch…finally

openMyFile(); try { writeMyFile(theData); } catch(e) { handleError(e); } finally { closeMyFile(); }

throw expression;

fpira.com

Objects

• (almost) everything is an object!

var obj = { property1: 'value', property2: 2 };

// OR

function Car(make, model) { this.make = make; this.model = model; }

var mycar = new Car(“Ford”, “Fiesta");

fpira.com

Functions

function square(number) { return number * number }; var x = square(5); // x gets the value 25

// OR

var square = function(number) { return number * number }; var x = square(4); // x gets the value 16

// OR

var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) }; console.log(factorial(3)); // logs 6

fpira.com

JSON

• JS Object Notation

• Like 'English' for web apps

• "key":value notation

• value can be any type (even another object!)

{ "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021" }, "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ]}

fpira.com

Strict mode

• Introduced in ES5

• No subset, it’s different semantics

• Dummy errors got illegal

• Strict code is faster

• Entire script vs. function

• ES6 modules are always in strict mode

fpira.com

let and const

• var , scope is global

• let , scope is block (if, loops, switch).

• In functions is same as var

• const SOME = 4 (can’t be reassigned)

• best practise: use it when you require a module

ES6

fpira.com

Spread operator (…)

ES6

// Example 1 function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction(...args); // arguments are 0,1,2

// Example 2 function myFunction(v, w, x, y, z) { } var args = [0, 1]; myFunction(-1, ...args, 2, ...[3]); // arguments are -1,0,1,2,3

// Example 3 var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; // lyrics is -> ['head', 'shoulders', 'knees', 'and', 'toes']

fpira.com

Destructuring

• Python-like

• Pretty useful

• works w/ Objects

• works w/ Arrays

• Can have defaults

• Defaults for functions parameters

ES6

var foo = ["x", "y"]; var [one, two] = foo; console.log(one); // "x" console.log(two); // "y"

[a, b, ...rest] = [1, 2, 3, 4, 5] console.log(a) // 1 console.log(b) // 2 console.log(rest) // [3, 4, 5]

({a, b} = {a:1, b:2}) console.log(a) // 1 console.log(b) // 2

var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true

fpira.com

Classes

• Syntax sugar for specific kind of function

• Support for properties and inheritance

• No private methods (you need to fake them!)

• We can pass a class as parameter

ES6

fpira.com

Classes: ES5 vs ES6

// ES6 class Shape { constructor (id, x, y) { this.id = id this.move(x, y) } move (x, y) { this.x = x this.y = y } }

// ES5 var Shape = function (id, x, y) { this.id = id; this.move(x, y); };

Shape.prototype.move = function (x, y) { this.x = x; this.y = y; };

ES6

fpira.com

Arrow functions

• More concise syntax

• this has same scope of parent

• no arguments, use spread operator (…args)

• use ({}) for empty objects

function (a, b) { return a * b; }(a, b) => a * b

var that = this;var helper = function () { that.num = add(that.num, that.num);};

function () { return arguments[0]; }(...args) => args[0]

() => {} // undefined() => ({}) // {}

ES6

fpira.com

…there’s more!

• Symbols

• Iterators and Generators

• new Array methods

• Map, Set

• functional programming in JS

ES6

node.js for back-end developers

fpira.com

What’s node.js?

• Event-driven JavaScript runtime

• Built on top of V8 (Chromium JS engine)

• Core in C++

• Rest of it in JavaScript

• v6.x covers 93% of ES6 (http://kangax.github.io/compat-table/es6/)

• "Designed to build scalable web applications"

fpira.com

Why node.js?

• Event driven

• Async I/O

• Non-blocking calls

• Single-threaded

• Thousands of concurrent connections

• Great in cluster environment

fpira.com

npm

• npm : node package manager

• $ npm install -g gulp

• $ npm …

• init

• install

• start

• test

• etc.

fpira.com

App structure

• package.json

• node_modules

• test

• src/app

• …

fpira.com

Import and Export

"use strict";

var xorshift = require('xorshift');

function uniformint(a, b) { return Math.floor(a + xorshift.random() * (b - a)); }

console.log(uniformint(100100, 990900));

module.exports = { generateCode: function (){ return uniformint(100100, 990900); } }

var myModule = require('./genCode');

fpira.com

Coding style

• Curly braces go in same line

• Don’t use curly braces if not needed!

• 99.98% no need to use semicolons

• Multiple line list? Comma first

• Single quotes are better

• white space before (

• use named functions

• callback last argument, err its first argument

• UpperCamelCase for class names

• lower-and-hyphed for config keys

• CAPS_SNAKE_CASE for constants

• lowerCamelCase for all the rest

• Init to true, false, null or 0 responsibly

• undefined means 'no set yet'

• new Error obj w/ your message

• Make logs, save lives

fpira.com

Non-blocking code

var data = file.readFileSync('file.txt');console.log(data);console.log('Hello');// These lines log data and then 'Hello'

// VS

file.readFile('file.txt', function(err, data) { console.log(data);});console.log('Hello');// These lines log 'Hello' and then data

fpira.com

Promises

• For deferred and async operations

• 4 states:

• pending: initial state, not fulfilled or rejected.

• fulfilled: successful operation

• rejected: failed operation.

• settled: the Promise is either fulfilled or rejected, but not pending.

• Piramide of doom! => to be improved… (ES7?)

ES6

fpira.com

Promises

ES6

fpira.com

A dummy webserver

const http = require('http');

const hostname = '127.0.0.1'; const port = 3000;

const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World\n'); });

server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });

fpira.com

• JavaScript: The Good Parts

• MDN

• node.js doc

• yourModuleOfChoice doc

Notes

- not all courses are good

- no good doc, no good module

Resources

fpira.com

Next

• Read the doc!

• Explore Symbol, Map, Set, Iterators and Generators

• Write your first node.js project

• Try the Express web framework

• Understand Express middleware

• Get to know JS testing (Mocha and Jasmine)

fpira.com

Next (more)

• Gulp

• Babel

• TypeScript

• Read about JS functional programming

• (https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504#.bawhglud6)

Thank you!

Questions?

@pirafrankfpira.com Francesco Pira