Door Gaya Kessler / @GayaNinja

Gaya Kessler

JavaScript Developer

Blue Mango

Site: http://gaya.ninja

Blog: http://blog.gaya.ninja

Twitter: @GayaNinja

JavaScript is meer

dan een jQuery scriptje

Kleine greep uit mijn

Ervaring

In deze presentatie:

• Wat is this?
  
  
• Async vs. Sync
  
  
• Prototypical Inheritance
  
  
• Isomorphic JS en Browserify

De beste tip ooit.

Leer geen framework,
leer JavaScript.

Wat is

this?

var obj = {
    name: "Barry",

    bar: function () {
        console.log(this.name);
    }
}

obj.bar(); //Barry

setTimeout(obj.bar, 10); //Storage

Huh?

obj //<-- call-site for obj.bar()
    .bar();

setTimeout(obj.bar, 10); //not the call-site for obj.bar()

//passes function obj.bar, not the object
function setTimeOutCallback(callback) {
    callback(); //<-- call-site for obj.bar()
}

En function?

function Foo() {
    this.count++;
}

Foo.count = 0;

Foo();
Foo();
Foo();

console.log(Foo.count); //0

function Foo() {
    this.count++;
}

Foo(); // <-- call-site for Foo() is `Window`

.bind() is de oplossing

Vergeet var that = this;

var obj = {
    name: "Barry",

    bar: function () {
        console.log(this.name);
    }
}

obj.bar(); //Barry

setTimeout(obj.bar.bind(obj), 10); //Barry

function Foo() {
    this.count++;
}

Foo.count = 0;

Foo.call(Foo);
Foo.call(Foo);
Foo.call(Foo);

console.log(Foo.count); //3

Async vs. Sync

var newUser = User();

newUser.name = getName(); //Ad
newUser.town = getTown(); //Universe
newUser.age = getAge(); //42

[...]

newUser.save();

var newUser = User();

getName(function handleName(name) {
    newUser.name = name; });

getTown(function gotTown(town) {
    newUser.town = town; });

getAge(function gotAge(age) {
    newUser.age = age; });

console.log(newUser.name, newUser.town, newUser.age);
    //undefined undefined undefined

var newUser = User();

getName(function handleName(name) {
    newUser.name = name;
    getTown(function handleTown(town) {
        newUser.town = town;
        getAge(function handleAge(age) {
            newUser.age = age;
            newUser.save();
        });
    });
});

Yuck.

var newUser = User();
getName(handleName);

function handleName(name) {
    newUser.name = name; getTown(handleTown); }

function handleTown(town) {
    newUser.town = town; getAge(handleAge); }

function handleAge(age) {
    newUser.age = age; newUser.save(); }

Prototypical
Inheritance

vs. Classical Inheritance

"JavaScript is niet OO"

"Favor 'object composition' over 'class inheritance'."

Gang of Four, 1995

Een class is slechts een blauwdruk.

Leen methodes van andere objecten

var Foo = {
    name: "Barry",
    bar: function () {
        console.log(this.name); }
}

var Loel = {
    name: "Ad",
    all: Foo.bar
}

Loel.all(); //Ad

Export factory's in plaats van constructors

/CoolStuff/
    index.js
    logic.js
/Other/
    index.js
index.js

var CoolStuff = { ... }

module.exports = function () {
    var newObject = Object.create(CoolStuff);

    newObject.iets = "Iets";
    newObject.method();

    return newObject;
}

var CoolStuff = require("./CoolStuff/");

CoolStuff(); //instant throw away
var stuff = CoolStuff(); //keep in object

Isomorphic JS

& Browserify

Zelfde code, op server en browser.

"Normale" stack:

Server:

PHP / JSP / .NET / Ruby

Browser:

HTML, CSS, JavaScript

JavaScript stack:

Server:

JavaScript (Node.js, io.js)

Browser:

HTML, CSS, JavaScript

We herhalen concepten

Stel je voor: Objecten in front- en backend met gelijke code.

Node.js functionaliteit in de browser?

• Gebruik van require
  
  
• Bundelt ook npm modules
  
  
• ES6+ ondersteuning met Babelify

Verder lezen

Bedankt!

Gaya Kessler

@GayaNinja

http://gaya.ninja