• Every value has a prototype
  
• Prototype properties are accessible on the concrete value
• "foo" => String.prototype
• OOP can be implemented using prototypes
• "foo".match(/f/); "Translates" to:
• String.prototype.match.call('foo', /f/)

var myProto = {foo:function(){return'bar';}};var Class = function() {};Class.prototype = myProto;
var obj = new Class();
obj.foo();

• A function is just a value, no different from a string
• var foo = function() {};
• bar = foo; // Passes a reference to same function
• foo = null;
• bar() still works

• this is not idempotent as in PHP
• Context (this) is defined at call-time:

var obj = {  greeting: 'Hello world',  hello: function() {    console.log(this.greeting);  }};// Lets break thingsobj.hello(); // So far so goodvar em = new require('events').EventEmitter();em.on('hello', obj.hello);em.emit('hello'); // Oh hello errorobj.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);    }  };}());

• Functions are first class citizens
• == pleasant functional programming in JavaScript
  

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);});

• Using forEach was undoubtedly cleaner
• But this is so important it has its own method

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);

Calculation example

 <script src="jquery.js"></script> <script src="jquery.plugin.js"></script>
 <script src="scripts.js"></script>

document.getElementById('#message').innerHTML = '<strong>Hello world</strong>';

define(['dependency1', 'dependency2'], function(Dep1, Dep2) {  return myModule;});
require(['mymodule'], function(App) {  App.run();});

• Unnamed or named
• URI path, or path mapping, used to load unnamed modules
• Callback triggered once dependencies are loaded
• Loader takes care of resolving dependencies
• Optimizable (combine and uglify)
• Doesn't break the save/reload cycle
• Easily achieve lazy loading

• Fork/clone eZJSFunBundle and install into src/nervetattoo/
• git@github.com:nervetattoo/eZJSFunBundle.git
  
• Enable it in EzPublishKernel.php
• Symlink assets ezpublish/console assets:install web --symlink
• Create a new object and take note of its ID
• Edit Resources/config/overrides.yml and replace the Location Id

Resources/public/js/hello_world.js

define(['jquery'], function($) {  return function(selector) {    $(selector).text('Hello world');  };});

requirejs.config({  baseUrl: '/ezjsfunbundle/js',  paths: {    jquery: "libs/jquery/jquery.js",
    underscore: "libs/lodash/dist/lodash.compat.js",
    backbone: "libs/backbone/backbone"
  }
});

1. Install required packages from bower
2. Create public/js/main.js
3. Configure require.js path mappings from bower
4. Create a hello world module that depends on jquery

grunt.initConfig({  //task: {configobj}  uglify: {
    build: {
      src: 'Resources/public/js/main.js',
      dest: 'Resources/public/js/main.min.js'
    }
  }});
> grunt uglify

• sudo npm install -g grunt-cli
• npm install --save-dev grunt

• npm install --save-dev grunt-contrib-jshint grunt-contrib-uglify

• Chromes V8 ripped out into a non-blocking I/O-platform
• Fast and popular — JS on the server — JS everywhere!
• Node Packaged Modules: 40k modules raring to go
• Whatever your needs, NPM got you covered.
• (From AST based code transformations to flying drones)
• package.json in your repo describes your project + deps
• npm init . to generate it