Underpinnings of the great web experience
Raymond Julin
Lead Product Developer at Keyteq Labs
& eZ Exceed lead ++
<3 JS
@nervetattoo (Twitter,Github)
var myProto = {foo:function(){return'bar';}};
var Class = function() {};
Class.prototype = myProto; var obj = new Class(); obj.foo();
var obj = {
greeting: 'Hello world',
hello: function() {
console.log(this.greeting);
}
};
// Lets break things
obj.hello(); // So far so good
var em = new require('events').EventEmitter();
em.on('hello', obj.hello);
em.emit('hello'); // Oh hello error
obj.hello.call({greeting:'Oh no'})
var boundHello = obj.hello.bind(obj); // Always Hello world
var foo = 'bar';
var f = function() { return foo; }
foo = 'foo';
f(); // bar
obj.greeting = 'mwhahaha';
obj.hello();
var obj = (function() {
var greeting = 'Hello world';
return {
hello: function() {
console.log(greeting);
}
};
}());
var arr = [0,1,2];
var result = [];
for (var i = 0, l = arr.length; i < l; i++) {
result.push(arr[i] * 2);
}
arr.forEach(function(item) {
result.push(item * 2);
});
var result = arr.map(function(num) { return num * 2 });
var arr = [1,2,3,'a'];
var justNumbers = arr.filter(function(item) {
return typeof item === 'number';
});
var result = arr.filter(function(item) {
return typeof item === 'number';
}).map(function(item) {
return item * 2;
});
var isNumber = function(num) {
return typeof num === 'number';
};
var multiplyByTwo = function(num) {
return num * 2;
};
var result = arr.filter(isNumber).map(multiplyByTwo);
var createMultiplicator = function(factor) {
return function(num) {
return num * factor;
}
};
var result = arr.filter(isNumber).map(createMultiplicator(2));
var add = function(a,b) { return a + b; };
[1,2].reduce(add);
arr.filter(isNumber).reduce(add);
["Hello"," world"].reduce(add);
arr.reduce(add);
Calculation example
JavaScript used to be horrendous:
<input type="button" onclick="javascript:doFoo();">
<script src="jquery.js"></script>
<script src="jquery.plugin.js"></script>
<script src="scripts.js"></script>
You will soon (ES6) be writing this:
HTML5 brings great APIs and further browser standardisations for JS/CSS.import $ from "jquery";
import {View, Model, Controller} from "framework-x";
class Widget extends View {
render() {
// rendering
}
}
We have the tools to write proper JavaScript applications without tearing our hair out.
document.getElementById('#message').innerHTML = '<strong>Hello world</strong>';
<?php
echo '<strong>Hello world</strong>';
define(['dependency1', 'dependency2'], function(Dep1, Dep2) {
return myModule;
});
require(['mymodule'], function(App) {
App.run();
});
Resources/public/js/hello_world.js
define(['jquery'], function($) {
return function(selector) {
$(selector).text('Hello world');
};
});
In dev tools:
What have we achieved?require(['hello_world'], function(hello) {
hello('body');
});
requirejs.config({
paths: {
'hello_world': 'hello_moon'
}
});
requirejs.config({
baseUrl: '/ezjsfunbundle/js',
paths: {
jquery: "libs/jquery/jquery.js", underscore: "libs/lodash/dist/lodash.compat.js", backbone: "libs/backbone/backbone" }
});
Creating our first module.
grunt.initConfig({
//task: {configobj}
uglify: { build: { src: 'Resources/public/js/main.js', dest: 'Resources/public/js/main.min.js' } }
});
> grunt uglify
Building our module