Becoming better at JavaScript.
Eindhoven Developers Meetup
new Date(2016, 0, 26);Gaya Kessler
- Lead Frontend Developer
for BaaS at GHG Tech - Likes JavaScript
- https://blog.gaya.ninja
- @GayaNinja
The typical JavaScript developer?
- Probably uses or used jQuery
- Familiar with Ajax
- Knows how to code
- Tried or uses a form of OOP
Frontend is moving fast
ES6 / ES7 / ESWHATEVER
Grunt / Gulp / Webpack / NPM
ALL THESE F*CKING FRAMEWORKS
I can't see wood for trees
So what now?
Learn something new?
New ES versions, maybe React?
Nope.
The 'why' is more important than the 'how'
Go learn ES5 again.
Think in isolated module style coding.
Isolate
Low coupling
high cohesion
Single responsibility
"Do One Thing and Do It Well."
- Unix philosophy
Revise knowlegde about scope and closures
What is this?
function foo(cb) {
this.a = 'hey';
cb();
}
function bar() {
console.log(this.a);
}
var hi = bar;
hi.a = 'hi';
foo(hi); //hey
function foo(cb) {
this.a = 'hey';
cb();
}
function bar() {
console.log(this.a);
}
var hi = bar;
hi.a = 'hi';
foo(hi.bind(hi)); //hi
function foo(cb) {
this.a = 'hey';
cb.call(this); //<-- wait a minute!
}
function bar() {
console.log(this.a);
}
var hi = bar;
hi.a = 'hi';
foo(hi.bind(hi)); //hi --- pfew!
Beware of frameworks!
const Thing = React.createClass({
foo() {
this.bar();
},
bar() {
console.log('Hi');
},
render() { return <button onClick={this.foo} />; },
});
var Thing = {
foo: function() {
this.bar(); //Uncaught TypeError: this.bar is
//not a function
},
bar: function() {
console.log('Hi');
}
};
document.getElementById('something')
.addEventListener('click', Thing.foo);
Learn about prototypical inheritance
"Composition over inheritance."
- Design Patterns by Gang of Four (1994)
How we explain inheritance:
Execute function in different contexts
var Foo = {
a: 'World',
bar: function() {
console.log(this.a);
},
};
var Whoop = {
a: 'Hello',
bar: Foo.bar,
};
Whoop.bar(); //Hello
Problem with classes in JavaScript
A class should be a blueprint
Construction function !== class
function Foo() {} //<-- already an instance
Foo.prototype.bar = function() {};
new foo = Foo(); //1. new object
//2. constructor of Foo
//3. delegate to Foo.prototype
//4. call Foo() in new context
Better
var Foo = {
bar: function() {},
};
var foo = Object.create(Foo, {
a: { value: 'hi' }
});
//or
var foo = Object.create(Foo);
foo.a = 'hi';
Use linters and style guides!
Keeps code consistent
Keeps code clear
Keeps code cleaner
Tools:
JSHint
JSCS
Airbnb
;
Just... type the damn thing.
Modules and structure
require or import
//index.js
var Obj = require('./obj');
//obj.js
var Obj = {};
module.exports = Obj;
//index.js
import Obj from './obj';
//obj.js
export default {};
//index.js
import * as lib from './obj';
lib.foo();
//or
import { foo, bar } from './obj';
foo();
//obj.js
export function foo() {};
export function bar() {};
Dependency management using NPM
browserify, webpack, babel
Learn from doing Node.js
eg. making tools
Be wary of starters
Async is kind of promising
Callbacks are "just" executable arguments
Avoid nesting callbacks inline
setTimeout(function() {
setTimeout(function() {
setTimeout(function() {}, 0);
}, 0);
}, 0);
Callbacks from hell
Passing along callback can become complicated, quick.
https://github.com/caolan/async
async.map(['file1','file2'], fs.stat,
function(err, results){
//results is now an array of stats
//for each file
});
async.parallel([
function(){ ... },
function(){ ... }
], callback);
async.series([
function(){ ... },
function(){ ... }
]);