JavaScript for PHP Developers

JAVASCRIPT FOR PHP DEVELOPERS

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM @dcousineau

@croscon

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM BASICS

+ DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM
PRIMITIVE TYPES • number • string • boolean • object • array • null • undeﬁned • NaN

OPERATIONS • Arithmetic • + - / * • Bitwise • & | ^ • Boolean • && || !

BOOLEAN OR var first = "truthy" || "something else"; //first == "truthy" var second = false || "something else"; //second == "something else";

TYPEOF • Returns variable type as a string

TYPEOF typeof true; //?? typeof 12; //?? typeof "string"; //?? typeof []; //?? typeof {}; //?? typeof NaN; //?? typeof null; //?? typeof undefined; //?? function Foo() {} typeof Foo; //??

TYPEOF typeof true; //"boolean" typeof 12; //"number" typeof "string"; //"string" typeof []; //"object" typeof {}; //"object" typeof NaN; //"number" typeof null; //"object" typeof undefined; //"undefined" function Foo() {} typeof Foo; //"function"

OBJECT OR ARRAY? var obj = {} , arr = []; typeof obj == typeof arr; //true obj instanceof Array; //false arr instanceof Array; //true

OBJECT OR ARRAY? // Is a given value an array? // Delegates to ECMA5's native Array.isArray _.isArray = Array.isArray || function(obj) { return Object.prototype.toString.call(obj) == '[object Array]'; };

NUMBERS Objects!

NUMBERS var integer = 5; var float = 0.567; var big = 1234567.89 float.toPrecision(2); //"0.57" big.toLocaleString("en-us") //"1,234,567.89" big.toLocaleString("nl-be") //"1.234.567,89"

STRINGS Objects!

STRINGS "Foo" + "Bar"; //"FooBar" var str = "Lorem Ipsum Dolor Sit Amet"; str.toLowerCase(); //"lorem ipsum dolor sit amet" str.toUpperCase(); //"LOREM IPSUM DOLOR SIT AMET" str.split(" "); //["Lorem", "Ispum", "Dolor", "Sit", "Amet"] str.substring(6,9); //"Ips" new String("Lorem Ipsum Dolor Sit Amet") == str; //true

STRINGS – NUMBERS parseInt("56"); //56 parseInt("42.567"); //42 parseInt("asdf"); //NaN parseInt("5a6"); //5 parseFloat("24.68"); //24.68 parseFloat("asdf"); //NaN parseFloat("24a"); //24

OBJECTS • “Dictionary” / “Associative Array” • key: value or 'key': value • Without ': A-Z0-9 only • Does not keep intrinsic ordering • Accessed keys using . (dot) or [] notation

OBJECTS var object = { foo: 'value', 'complex key': 0, bar: { nested: true } }; object.foo; //'value' object['complex key']; //0 object.bar.nested; //true object.bar['nested']; //true object['bar'].nested; //true object['bar']['nested']; //true

IN var test = { foo: 'value', bar: 'value', baz: 'value' } for (var key in test) { console.log(key + ": " + test[key]); } //PRINTS: //foo: value //bar: value //baz: value

ARRAYS • Special Object • Numeric ‘keys’ only • keeps intrinsic ordering

ARRAYS var arrayShort = [ 'one', 'two' ]; arrayShort[2] = 'three'; var arrayLong = new Array(); arrayLong[0] = 'one'; arrayLong[1] = 'two'; arrayLong[2] = 'three'; //arrayShort: ["one", "two", "three"] //arrayLong: ["one", "two", "three"]

ARRAYS var arr = [1,2,3,4,6]; arr.indexOf(2); //1 arr.join(':'); //"1:2:3:4:6" arr.pop(); //6 //[1,2,3,4] arr.push(7); //5 //[1,2,3,4,7] arr.reverse(); //[7,4,3,2,1] arr.shift(); //1 //[2,3,4,7] arr.unshift(8); //5 //[8,2,3,4,7] arr.slice(1); //[2,3,4,7] arr.slice(1,3); //[2,3] arr.slice(-3); //[3,4,7] arr.slice(-3,-1); //[3,4]

ARRAYS var arr1 = [1,2,3]; var arr2 = [3,4,5]; arr1.concat(arr2); //[1,2,3,3,4,5]

DELETE • Removes key from an object • Removes element from array

DELETE • Removes key from an object • Removes element from array just sets it to undefined!

DELETE + ARRAY var test = [0,1,2,3,4]; //[0, 1, 2, 3, 4] delete test[2]; for (var i in test) { console.debug(i); } //0, 1, 3, 4 for (var i = 0; i < test.length; i++) { console.debug(test[i]); } //0, 1, undefined, 3, 4 test.length; //5

FUNCTIONS • Objects! • Elevated • Used a named function before it is defined • func definitions are elevated to the top

FUNCTIONS function Foo() { //... } Foo(); //valid Bar(); //valid function Bar() { //... }

FUNCTIONS function Foo() { //... } Foo.bar = "value"; 'bar' in Foo; //true Foo.bar == "value"; //true

FUNCTION ARGUMENTS • No default arguments • Arguments are not required • unset arguments become undefined

ARGUMENTS • Special variable found in a function • A not-quite array object containing all arguments

ARGUMENTS function sum() { var x = 0; for (var i = 0; i < arguments.length; ++i) { x += arguments[i]; } return x; } sum(1, 2, 3); //6

COMPARISON • a == b / a != b • A and B compared by value alone • 1 == “1” evaluates to true • a === b / a !== b • A and B compared by value and type • 1 === “1” evaluates to false

WINDOW, DOCUMENT • Built in global objects in browser only • window • Provides access to browser window • Contains “global” variables • foo === window.foo • document • Provides access to current DOM

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM FUNCTIONS

FUNCTIONS • First-Class • Can be assigned to variables, pass as arguments, and return as values • Anonymous • Do not require a name • Closures • “closes over” variables defined outside itself

CLOSURE function Foo() { var count = 0; return function() { count = count + 1; return count; }; } var bar = Foo(); bar(); //1 bar(); //2 bar(); //3

CLOSURE function Foo() { var count = 0; return function() { count = count + 1; return count; }; } var bar = Foo(); bar(); //1 bar(); //2 bar(); //3 var baz = Foo(); baz(); //??

CLOSURE function Foo() { var count = 0; return function() { count = count + 1; return count; }; } var bar = Foo(); bar(); //1 bar(); //2 bar(); //3 var baz = Foo(); count = 10; baz(); //??

CLOSURE function createAdder(amount) { return function(input) { return input + amount; }; } var add2 = createAdder(2); add2(2); //4 add2(8); //10 var add3 = createAdder(3); add3(3); //6 add3(7); //10

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM SCOPING

HEADLINE • Functions only way to create new scopes • Variables defined with var are local • Variables defined WITHOUT var are global • In Browser: global variables are members of the window object

LOCAL & GLOBAL var outerScope = 10; var outerScope2 = 10; function Foo() { var outerScope = 20; var innerScope = 20; globalVariable = 30; outerScope2 = 40; } Foo(); alert(outerScope); //10 alert(outerScope2); //40 alert(innerScope); //error alert(globalVariable); //30

LEXICAL SCOPING function Foo() { var baz = 1; function Bar() { return baz; } return Bar(); } Foo(); //1 function Foo() { var baz = 1; return Bar(); } function Bar() { return baz; } Foo(); //baz is not defined

SCOPING function Outer() { myvar = "value1"; function Inner() { return myvar; } return Inner; } var inner = Outer(); inner(); //?? myvar = "value2"; inner(); //??

SCOPING function Outer() { myvar = "value1"; function Inner() { return myvar; } return Inner; } var inner = Outer(); inner(); //"value1" myvar = "value2"; inner(); //"value2"

HOISTING foo(); //called foo! function foo() { console.log('called foo!'); } foo(); //called foo! bar(); //undefined is not a function var bar = function() { console.log('called bar!'); } bar(); //called bar!

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM THIS

THIS var Foo = { bar: "bar", baz: function() { return this.bar; } }; Foo.baz(); //"bar" Foo.bar = "bat"; Foo.baz(); //"bat" var baz = Foo.baz; baz(); //undefined

THIS var Foo = { bar: "bar", baz: function() { return this.bar; } }; Foo.bat = function() { return this.bar + "bat"; }; Foo.bat(); //"barbat"

CALL & APPLY var Foo = { bar: "bar", baz = function(param1, param2) { return this.bar + param1 + param2; } }; var Foo2 = { bar: "123" }; Foo.baz("baz", "bat"); //"barbazbat" Foo.baz.apply(Foo2, "baz", "bat"); //"123bazbat" Foo.baz.call(Foo2, ["baz", "bat"]); //"123bazbat"

BINDING! function bind(func, context) { return function() { return func.call(context, arguments); } }

THIS function RootLevelFunc() { console.debug(this); //?? }

THIS function RootLevelFunc() { console.debug(this); //undefined }

THIS <html> <head> <title>Hello PHPBenelux!</title> </head> <body> <script> console.debug(this); //?? </script> </body> </html>

THIS <html> <head> <title>Hello PHPBenelux!</title> </head> <body> <script> console.debug(this); //Window {top: Window, ...} </script> </body> </html>

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM EXCEPTIONS

EXCEPTIONS try { funcDoesNotExist(); } catch (e) { alert(e); //ReferenceError: funcDoesNotExist is not defined } finally { //Always Executes }

EXCEPTIONS function Foo() { throw new Error("Message"); } function Bar() { throw "Message"; } try { Foo(); } catch (e) { e.message == "Message"; //true } try { Bar(); } catch (e) { e == "Message"; //true }

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM PROTOTYPE

HEADLINE function Foo() { //The "Constructor" } Foo.bar = function() { //A "Static" Function } Foo.prototype.baz = function() { //A "Method" }; Foo ‣ bar ‣ prototype ‣ baz ‣ constructor ‣ __proto__

HEADLINE var instance = new Foo(); instance.baz(); //works instance.bar(); //error Foo.bar(); //works Foo.baz(); //error Foo.prototype.baz(); //works instance ‣ __proto__ ‣ baz ‣ constructor ‣ __proto__ ‣ ...

HEADLINE instance.bat = function() { /* ... */ } instance.bat(); //works  Foo.bat(); //error Foo.prototype.bat(); //error instance ‣ bat ‣ __proto__ ‣ baz ‣ constructor ‣ __proto__ ‣ ...

HEADLINE function Foo(baz) { this.baz = baz; } Foo.prototype.bar = function() { return this.baz; }; var foo1 = new Foo(1); var foo2 = new Foo(2); foo1.bar(); //1 foo2.bar(); //2 Foo.prototype.bar = function() { return this.baz * 2; }; foo1.bar(); //2 foo2.bar(); //4

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM ASYNC

INTERVALS & TIMEOUTS var id = setInterval(function() { //Code to execute every 1000 milliseconds }, 1000); //clearInterval(id); to stop var id = setTimeout(function() { //Code to execute after 1000 milliseconds have passed }, 1000); //clearTimeout(id); to cancel

INTERVAL RACE CONDITIONS setInterval() setTimeout()

INTERVAL WORKAROUND var running = true; , interval = function() { if (!running) return; //do something if (running) setTimeout(interval, 1000); }; interval();

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM DOM

DOM • Document Object Model • API to interact with browser’s representation of the HTML document

SELECTION document.getElementById('foo'); document.getElementsByClassName('.bar'); document.getElementsByTagName('script'); document.querySelectorAll('#foo .bar > script');

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM

DOM: CREATION var paragraph = document.createElement('p'); var content = document.createTextNode("Lorem Ipsum"); paragraph.appendChild(content); paragraph.classList.add('my-class'); document.body.appendChild(paragraph);

DOM: LOADING SCRIPT var script = document.createElement('script'); script.src = "http://path.to/script.js"; script.async = true; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);

DOM: ADDING IMAGE var img = document.createElement('img'); img.src = "http://path.to/some/image.jpeg"; img.onload = function() { /** do something on load */ }; document.body.appendChild(img);

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM BROWSER
TOOLS

SUBTITLE CHROME/SAFARI DEVEL. TOOLS

CONSOLE

BEWARE! • console.log is NOT BLOCKING • Sometimes value displayed is newer than value when log was called

NETWORK TAB & XHR • displays all network requests • Chrome is better for network debugging • Shows full request & response headers and data • Can replay XHR requests!

BREAK HAMMER TIME

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM MODERN
ARCH

HTML & DOM DOM: Object-Graph Representing Parsed HTML PRESENTATION LAYER HTML: The source

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM PRESENTATION
LAYER

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM PRESENT
ATION LAYER

CLASSIC JAVA GUI PROGRAMMING

CLASSIC JAVASCRIPT PROGRAMMING

CLASSIC JAVASCRIPT PROGRAMMING Just modify DOM What is the TextBox’s State Again? Start a jQuery animation

MODERN JS State DOM Events Controllers Modify Events Modify Javascript Read

WHERE IS YOUR DOM NOW? Everything is PUSHED into the DOM PRESENTATION LAYER

WHERE IS YOUR DOM NOW? Data FROM the DOM comes in via Events ONLY PRESENTATION LAYER

CONTROLLERS Update the DOM based on state Update State based on User Interaction

WIDGETS Pieces of functionality are self-contained Their State is self-contained

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM underscorejs.org

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM Functional,
self-contained micro-library

FUNCTIONAL PROGRAMMING??? Functions are mappings between input and output • They have no side-effects • Input A always results in output b

+Functional Programming??? Daniel Cousineau // follow me : @dcousineau or
http://dcousineau.com function input output global state global state global state X X X

UNDERSCORE.JS Collections •each •map •reduce •reduceRight •find •filter •reject •all •any •include •invoke •pluck •max •min •sortBy •groupBy •sortedIndex •shuffle •toArray •size Arrays •first •initial •last •rest •compact •flatten •without •union •intersection •difference •uniq •zip •indexOf •lastIndexOf •range Functions •bind •bindAll •memoize •delay •defer •throttle •debounce •once •after •wrap •compose Objects •keys •values •functions •extend •pick •defaults •clone •tap •has •isEqual •isEmpty •isElement •isArray •isObject •isArguments •isFunction •isString •isNumber •isFinite •isBoolean •isDate •isRegExp •isNaN •isNull •isUndefined Utility •noConflict •identity •times •mixin •uniqueId •escape •result •template Chaining •chain •value

MAP Maps function to each element in the input collection var inp = [1, 2, 3] , out = _.map(inp, function(n) { return n*2; }); //out = [2, 4, 6]

REDUCE Reduces collection to a single value. mem is the initial state, each successive iteration must be returned var inp = [1, 2, 3]; _(inp).reduce(function(mem, n){ return mem + n; }); //Iter 0: mem = 1 | n = 2 //Iter 1: mem = 3 | n = 3 //Returns: 6

PLUCK Iterates over a collection and extracts the values for the input key (assumes all elements in the collection are objects/ arrays) var stooges = [ {name: 'moe', age: 40} , {name: 'larry', age: 50} , {name: 'curly', age: 60} ]; _.pluck(stooges, 'name'); //Returns ["moe", "larry", "curly"]

MIN/MAX Returns the max item in a collection. If second argument (iterator) provided, will use to produce the value to be compared var stooges = [ {name: 'moe', age: 40} , {name: 'larry', age: 50} , {name: 'curly', age: 60} ]; _.max(stooges, function(s){ return s.age; }); //Returns {name: 'curly', age: 60}

KEYS Returns the keys from a dictionary as an array _.keys({ one: 1, two: 2, three: 3 }); //Returns ["one", "two", "three"]

DEFAULTS Maps a duplicate input dictionary on top of a predefined “default” dictionary var iceCream = { flavor: "chocolate" }; _.defaults(iceCream, { flavor: "vanilla" , sprinkles: "lots" }); //Returns {flavor : "chocolate", sprinkles : "lots"}

CHAINING When chain is initiated, method return a self-reference back to underscore but with the value attached [similar to opening with _(val)]. The chain continues until the value is extracted using .value() var stooges = [ {name: 'curly', age : 25}, {name: 'moe', age : 21}, {name: 'larry', age : 23} ]; var youngest = _.chain(stooges) .sortBy(function(s){ return s.age; }) .map(function(s){ return s.name + ' is ' + s.age; }) .first() .value(); //Returns "moe is 21"

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM backbonejs.org

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM micro-application
framework

BACKBONE.JS • builds on jquery/Zepto and underscore.js • provides • views • models • collections • router

MODEL var OurModel = Backbone.Model.extend({ defaults: { foo: 'value' , bar: 1 } }); var instance = new OurModel(); instance.on('change:foo', function(modelobj, foo) { console.log('foo is now ' + foo); }); instance.set('foo', 'bat'); //foo is now bat

COLLECTION var OurModelCollection = Backbone.Collection.extend({ model: OurModel }); var inst1 = new OurModel() , inst2 = new OurModel() , coll = new OurModelCollection(); coll.on('add', function(modelobj) { console.log('Added model ' + modelobj.cid); }); coll.on('change:bar', function(modelobj, bar) { console.log('Bar for ' + modelobj.cid + ' is now ' + bar); }); coll.add(inst1); coll.add(inst2); inst1.set('bar', 'baz'); //Added model c4 //Added model c5 //Bar for c4 is now baz

VIEW var OurView = Backbone.View.extend({ className: 'our-view' , initialize: function() { this.listenTo(this.model, ’change:foo’, this.updateFoo, this); } , render: function() { this.updateFoo(); return this; } , updateFoo: function() { this.$el.html(this.model.get('foo')); } }); var modelInst = new OurModel({foo: 'bar'}); , viewInst = new OurView({model: modelInst}); $('#our-container').append(viewInst.render().el); modelInst.set('foo', 'baz'); //<div class="our-view">bar</div> //<div class="our-view">baz</div>

ROUTER namespace.MessageCollectionRouter = Backbone.Router.extend({ routes: { "page/:page": "viewPage" } , initialize: function(options){ this.collection = options.collection; } , viewPage: function(page) { this.collection.setPage(page); } , setUrlToPage: function(page) { this.navigate('page/' + page, {trigger:false}); } }); Backbone.history.start({pushState: true, root: '/'});

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM REFACTOR

Daniel Cousineau // follow me : @dcousineau or http://dcousineau.com Because
you’re not lucky enough right now to start a project from scratch.

FIRST STEPS <script src="./scripts/jquery-1.9.1.js"></script> <script src="./scripts/underscore.js"></script> <script src="./scripts/backbone.js"></script> <script src="./scripts/jquery-1.9.1.js"></script>

LOOKING CONCEPTUALLY scaffolding DOM Management Event Management State Management Data Synchronization

Daniel Cousineau // follow me : @dcousineau or http://dcousineau.com var
defaults = {/* ... */}; var methods = { init: function(options) { if (!$(this).is('textarea')) { $.error('Poster must be applied to a textarea'); return undefined; } options = _.defaults(options, defaults); var poster = new Poster(this, options); $(this).data('_poster', poster); return this; } }; $.fn.splash_poster = function(method) { //jQuery Plugin Boilerplate }; function Poster($el, options) { this.$el = $el; this.init(); } Poster.prototype.init = function() { var that = this; this.$el.on('change', jQuery.proxy(this.changeHandler, this)); this.$el.on('keyup', jQuery.proxy(this.changeHandler, this)); }; Poster.prototype.changeHandler = function(e) { //Check character counts, identify urls };

init: function(options) { if (!$(this).is('textarea')) { $.error('Poster must be applied to a textarea'); return undefined; } options = _.defaults(options, defaults); var poster = new Poster(this, options); $(this).data('_poster', poster); return this; } }; $.fn.splash_poster = function(method) { //jQuery Plugin Boilerplate }; function Poster($el, options) { this.$el = $el; this.init(); } Poster.prototype.init = function() { var that = this; this.$el.on('change', jQuery.proxy(this.changeHandler, this)); this.$el.on('keyup', jQuery.proxy(this.changeHandler, this)); }; Poster.prototype.changeHandler = function(e) { //Check character counts, identify urls }; DOM Management

init: function(options) { if (!$(this).is('textarea')) { $.error('Poster must be applied to a textarea'); return undefined; } options = _.defaults(options, defaults); var poster = new Poster(this, options); $(this).data('_poster', poster); return this; } }; $.fn.splash_poster = function(method) { //jQuery Plugin Boilerplate }; function Poster($el, options) { this.$el = $el; this.init(); } Poster.prototype.init = function() { var that = this; this.$el.on('change', jQuery.proxy(this.changeHandler, this)); this.$el.on('keyup', jQuery.proxy(this.changeHandler, this)); }; Poster.prototype.changeHandler = function(e) { //Check character counts, identify urls }; Event Management

init: function(options) { if (!$(this).is('textarea')) { $.error('Poster must be applied to a textarea'); return undefined; } options = _.defaults(options, defaults); var poster = new Poster(this, options); $(this).data('_poster', poster); return this; } }; $.fn.splash_poster = function(method) { //jQuery Plugin Boilerplate }; function Poster($el, options) { this.$el = $el; this.init(); } Poster.prototype.init = function() { var that = this; this.$el.on('change', jQuery.proxy(this.changeHandler, this)); this.$el.on('keyup', jQuery.proxy(this.changeHandler, this)); }; Poster.prototype.changeHandler = function(e) { //Check character counts, identify urls }; State Management

textarea.message": "eChangeBody" , "keyup textarea.message": "eChangeBody" } , initialize: function() { this.render(); this.setModel(this.model); } , setModel: function(model) { this.model = model; this.listenTo(this.model, 'change:body', this.handleUpdateBody, this); this.handleUpdateBody(this.model, this.model.get('body')); } , handleUpdateBody: function(model, body) { this.$body.val(body).change(); } , eChangeBody: function(e) { //Check character counts, identify urls } , render: function() { this.$el.append(this._renderBody()); this.$body = this.$('textarea.message'); return this; } }); Daniel Cousineau // follow me : @dcousineau or http://dcousineau.com scaffolding

textarea.message": "eChangeBody" , "keyup textarea.message": "eChangeBody" } , initialize: function() { this.render(); this.setModel(this.model); } , setModel: function(model) { this.model = model; this.listenTo(this.model, 'change:body', this.handleUpdateBody, this); this.handleUpdateBody(this.model, this.model.get('body')); } , handleUpdateBody: function(model, body) { this.$body.val(body).change(); } , eChangeBody: function(e) { //Check character counts, identify urls } , render: function() { this.$el.append(this._renderBody()); this.$body = this.$('textarea.message'); return this; } }); dom management

textarea.message": "eChangeBody" , "keyup textarea.message": "eChangeBody" } , initialize: function() { this.render(); this.setModel(this.model); } , setModel: function(model) { this.model = model; this.listenTo(this.model, 'change:body', this.handleUpdateBody, this); this.handleUpdateBody(this.model, this.model.get('body')); } , handleUpdateBody: function(model, body) { this.$body.val(body).change(); } , eChangeBody: function(e) { //Check character counts, identify urls } , render: function() { this.$el.append(this._renderBody()); this.$body = this.$('textarea.message'); return this; } }); ] event management

textarea.message": "eChangeBody" , "keyup textarea.message": "eChangeBody" } , initialize: function() { this.render(); this.setModel(this.model); } , setModel: function(model) { this.model = model; this.listenTo(this.model, 'change:body', this.handleUpdateBody, this); this.handleUpdateBody(this.model, this.model.get('body')); } , handleUpdateBody: function(model, body) { this.$body.val(body).change(); } , eChangeBody: function(e) { //Check character counts, identify urls } , render: function() { this.$el.append(this._renderBody()); this.$body = this.$('textarea.message'); return this; } }); state management

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM <html>
 <div id="widget"> <ul> <li> <span class="item" data-id="1"> Item 1 <a href="/url/del">Delete</a> </span> </li>  </ul> </div>  <script> $('#widget .item a').click(function(e){ var $this = $(this) , $parent = $this.parent() , id = $parent.data('id'); $.ajax(/* … */); }); //... </script> </body> </html>

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM <html>
 <div id="widget"> <ul> <li> <span class="item" data-id="1"> Item 1 <a href="/url/del">Delete</a> </span> </li>  </ul> </div>  <script src="./post.js"></script> <script> $(function(){ var view = new Foo.Bar({el: $('#widget')}).render(); }); </script> </body> </html>

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM (function(namespace,
$){ namespace.Bar = Backbone.View.extend({ events: { 'click .item a': 'clickItemDelete' } , initialize: function() { } , render: function() { //... return this; } , clickItemDelete: function(e) { var $this = $(e.currentTarget) , $parent = $this.parent() , id = $parent.data('id'); $.ajax(/* … */); } }); })(window.Foo = window.Foo || {}, jQuery);

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM MODULES

REQUIRE.JS define('MyModule', ['dependency', 'jquery'], function(Dep, $) { //Do Stuff return MyExports; }); require(['MyModule'], function(MyExports) { //Do Stuff With MyExports });

BROWSERIFY var Dep = require('dependency') , $ = require('jquery'); //Do Stuff module.exports = MyExports;

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM BUILD

GULP var gulp = require('gulp'), uglify = require('gulp-uglify'), browserify = require('browserify'), hbsfy = require('hbsfy'), rename = require('gulp-rename'), jshint = require('gulp-jshint'), less = require('gulp-less'), sourcemaps = require('gulp-sourcemaps'), source = require('vinyl-source-stream'), buffer = require('vinyl-buffer'); gulp.task('default', ['watch'], function(){}); var rootPath = __dirname + '/static';

GULP gulp.task('watch', ['browserify', 'less-lays'], function() { gulp.watch(rootPath + '/js/**/*.js', ['browserify']); gulp.watch(rootPath + '/js/**/*.hbs', ['browserify']); gulp.watch(rootPath + '/less/**/*.less', ['less']); });

GULP gulp.task('browserify', function () { var b = browserify({ paths: [rootPath + '/js'], debug: true }); b.add(rootPath + '/js/__init__.js'); return b .transform(hbsfy) .bundle() .pipe(source('output.js')) .pipe(buffer()) .pipe(gulp.dest(rootPath + '/dist')) .pipe(uglify()) .pipe(rename({extname: '.min.js'})) .pipe(gulp.dest(rootPath + '/dist')); });

GULP gulp.task('less', function(){ gulp.src(rootPath + '/less/core.less') .pipe(sourcemaps.init()) .pipe(less()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(rootPath + '/css')); });

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM PERF

PERFORMANCE Prefer singular built file Single HTTP request Single Cache Entry

PERFORMANCE Minify/Uglify Ensure comments dropped Pre-compile templates & Include in build gzip!

PERFORMANCE Preload as much data as possible Reduce round trips on load

PRELOAD <script> Blueprint = window.Blueprint || {}; Blueprint._config = ...; Blueprint._current_user = ...; <?php if (isset($preload)): ?> Blueprint._preload = <?php echo json_encode($preload); ?>; <?php endif; ?> </script>

PRELOAD /** * @param {Backbone.Model} model Model object to fill * @param {Function} identifier accepts model, raw preload: returns relevant data * @param {Function} success Triggers on successful preload or successful fetch * @param {Function} error Triggers on failed fetch */ preloadOrFetchModel: function(model, identifier, success, error) { if (Util.hasLocalPreloadData()) { var preload = Util.getLocalPreloadData() , preloadData = identifier(model, preload); if (preloadData) { model.set(preloadData, {silent: true}); success(); return; } } model.fetch({ success: success , error: error }); }

PERFORMANCE Prefer DOM updates to overwrites Make DOM changes in batches, small as possible Beware: Will this Repaint or Reflow? Prefer adding and removing classes

PERFORMANCE taking measurements forces reflow! Cache Measurements Measure only on browser events

PERFORMANCE var $ = require('jquery') , Backbone = require('backbone') , $window = $(window); var dim = _.extend({ window: { width: 0, height: 0 } , viewport: { top: 0, bottom: 0 } }, Backbone.Events); var resizeCallback = _.throttle(function() { dim.window.width = document.documentElement.clientWidth; dim.window.height = document.documentElement.clientHeight; dim.trigger('resize', dim); }, 1); var scrollCallback = _.throttle(function() { dim.viewport.top = $window.scrollTop(); dim.viewport.bottom = dim.viewport.top + dim.window.height; dim.trigger('scroll', dim) }, 1); // Singular browser event listener for resize and scroll events $window.on('resize.myapp-dim', resizeCallback); $window.on('scroll.myapp-dim', scrollCallback); module.exports = dim;

PERFORMANCE Animate in CSS Animate in CSS If not, animate using absolute or fixed positioning

PERFORMANCE var start = null; var element = document.getElementById("SomeElementYouWantToAnimate"); function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; element.style.left = Math.min(progress/10, 200) + "px"; if (progress < 2000) { window.requestAnimationFrame(step); } } window.requestAnimationFrame(step);

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM WHAT
NEXT: ES6

PROMISES • fulfilled - Succeed • rejected - Failed • pending • settled - Completed

PROMISES var promise = new Promise(function(resolve, reject) { // do a thing, possibly async, then… if (/* everything turned out fine */) { resolve("Stuff worked!"); } else { reject(Error("It broke")); } });

PROMISES promise.then(function(result) { console.log(result); // "Stuff worked!" }, function(err) { console.log(err); // Error: "It broke" });

PRACTICAL var loaders = []; images.forEach(function(image, index){ //... var loader = $.Deferred(); loaders.push(loader); img.onload = function() { loader.resolve(); }; img.src = image.src; if (img.complete) { img.onload = null; loader.resolve(); } //... }); $.when.apply(null, loaders).done(hideLoader);

PRACTICAL var loaders = []; images.forEach(function(image, index){ //... loaders.push(new Promise(function(resolve, reject){ img.onload = function() { resolve(); }; img.src = image.src; if (img.complete) { img.onload = null; resolve(); } })); //... }); Promise.all(loaders).then(hideLoader);

YIELD function *foo() { yield 1; yield 2; } var it = foo(); console.log( it.next() ); // { value:1, done:false } console.log( it.next() ); // { value:2, done:false } console.log( it.next() ); // { value:undefined, done: true }

HEADLINE function *foo() { yield 1; yield 2; yield 3; yield 4; yield 5; yield 6; } for (var v of foo()) { console.log(v); } //1 2 3 4 5 6

LET/CONST const x = "value"; x = "another value"; //Error x; //"value" { let x; x = 5; x = 7; x; //7 } x; //"value"

FAT ARROW var adder = function(x) { return x + 1; } adder(1); //2 adder(2); //3 var fatAdder = (x) => x + 1; fatAdder(1); //2 fatAdder(2);

import User from 'user'; var evilTrout = new User(35); MODULES var localVariable = 123; export default function User(age) { this.age = age; };

import {sum, pi} from 'math'; console.log(sum(pi, pi)); MODULES export var pi = 3.141593; export function sum(x, y) { return x + y; };

THANKS. FOR YOUR ATTENTION DANIEL COUSINEAU // FOLLOW ME :
@DCOUSINEAU OR HTTP://DCOUSINEAU.COM

DANIEL COUSINEAU // FOLLOW ME : @DCOUSINEAU OR HTTP://DCOUSINEAU.COM https://joind.in/13105

ADDITIONAL RESOURCES • http://todomvc.com/ – Todo app written in popular frameworks • http://marionettejs.com/ – Extensions for Backbone.js

JavaScript for PHP Developers

JavaScript for PHP Developers

More Decks by Daniel Cousineau

Other Decks in Programming

Featured

Transcript