hands on: the sexy side of javascript (feat. node.js)
TRANSCRIPT
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