KILL ALL HUMANS! I. Robot Forensic Anthropologist Pocket Knife JS November 10, 2011 Friday, November 11, 11 

Who am I Friday, November 11, 11 

Who am I • Diogo Antunes Friday, November 11, 11 

Who am I • Diogo Antunes • JavaScript developer @ SAPO Friday, November 11, 11 

Who am I • Diogo Antunes • JavaScript developer @ SAPO • @dicode Friday, November 11, 11 

Who am I • Diogo Antunes • JavaScript developer @ SAPO • @dicode • http://js.sapo.pt Friday, November 11, 11 

JS World • Wonderful things are happening • Lot’s of new code, snippets • Great community • Always looking forward Friday, November 11, 11 

Why? • JS is cool • Lot to learn • Lot to innovate Friday, November 11, 11 

Pocket Knife • There are code out there that can help • You can use it, fork it, re-write it • but you’ll definitely learn a lot digging in Friday, November 11, 11 

Going deep Friday, November 11, 11 

Templating Friday, November 11, 11 

Mustache • Logic-less templates with JavaScript • you can render templates in your browser, or rendering server-side stuff with node.js, use it for rendering stuff in CouchDB’s views • Plugins for jQuery, Dojo, Yui, CommonJS, qooxdoo Friday, November 11, 11 

Mustache var view = { "name": "Bill", "address": { "street": "801 Streetly street", "city": "Boston", "state": "MA", "zip" "02101" } } var template = '

Contact: {{name}}

{{#address}}

{{street}}

{{city}}, {{state}} {{zip}}

{{/address}}'; var html = Mustache.to_html(template, view);

Contact: Bill

801 Streetly street

Boston, MA 02101

Friday, November 11, 11 

Loaders Friday, November 11, 11 

Lab.js • Loading And Blocking JavaScript • Load JS from anywhere at anytime • You can even load LABjs dynamically Friday, November 11, 11 

Lab.js $LAB .script("framework.js").wait() .script("plugin.framework.js") .script("myplugin.framework.js").wait() .script("init.js").wait(); Friday, November 11, 11 

require.js • plugins for jquery, dojo or node.js • RequireJS is a JavaScript file and module loader. • It is optimized for in-browser use, but it can be used in other JavaScript environments Friday, November 11, 11 

require.js My Sample Project

My Sample Project

project-directory/ project.html scripts/ main.js require.js helper/ util.js Friday, November 11, 11 

require.js My Sample Project

My Sample Project

require(["helper/util"], function() { //This function is called when scripts/helper/util.js is loaded. }); Friday, November 11, 11 

webkit-based Friday, November 11, 11 

zepto.js • minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. • ~5kb • has almost everything Friday, November 11, 11 

zepto.js $(document).ready(function(){ ... }); $.isFunction(function), $.isObject(object), $.isArray(array); $('some selector').bind('click', function(event){ ... }); Friday, November 11, 11 

animation Friday, November 11, 11 

émile • Stand-alone CSS animation JavaScript mini-framework • Doesn't need a JavaScript framework • Full set of CSS properties for animation (length-based and colors) • Easing and callbacks • Less than 50 lines of code Friday, November 11, 11 

émile • one method emile(element, style, options, after) Friday, November 11, 11 

shifty • A teeny tiny tweening engine in JavaScript • low-level library meant to be encapsulated by higher-level tools Friday, November 11, 11 

shifty - do’s • Tweening of Numbers. • Extensibility hooks for the tweening. Friday, November 11, 11 

shifty - dont’s • Keyframing. • Drawing. • Much else. Friday, November 11, 11 

shifty var myTweenable = new Tweenable(); myTweenable.tween( from, to ); myTweenable.tween( from, to, duration, callback, easing ); myTweenable.tween({ from: { }, // Object. Contains the properties to tween. Must all be `Number`s. Note: This object's properties are modified by the tween. to: { }, // Object. The "destination" `Number`s that the properties in `from` will tween to. duration: 1000, // Number. How long the tween lasts for, in milliseconds. easing: 'linear', // String. Easing equation to use. You can specify any easing method that was attached to `Tweenable.prototype.formula`. start: function () {}, // Function. Runs as soon as the tween begins. Handy when used with the `queue` extension. step: function () {}, // Function. Runs each "frame" that the tween is updated. callback: function () {} // Function. Runs when the tween completes. }); Friday, November 11, 11 

swipe.js • lightweight mobile slider with 1-to-1 touch movement Friday, November 11, 11 

swipe.js window.mySwipe = new Swipe(document.getElementById('slider'), { startSlide: 2, speed: 400, auto: 3000, callback: function(event, index, elem) { // do something cool } }); Friday, November 11, 11 

selectors Friday, November 11, 11 

Jaguar • standalone CSS selector engine developed for the Shrike JavaScript library • 0 Regexes • 0 Try-catch blocks • No browser sniffing • Only 3kb (minified and gzipped) Friday, November 11, 11 

Jaguar Jaguar.search(String selector[, DOMElement|DOMDocument context]) // Or simply: Jaguar(String selector[, DOMElement|DOMDocument context]) Jaguar.match(Jaguar('#id')[0], '#id') // true Jaguar.match(Jaguar('#cake')[0], '.edible') // hopefully true Friday, November 11, 11 

enhancement Friday, November 11, 11 

underscore • functional programming • utility-belt library • think Prototype.js • without extending built-in • so fits great with jQuery or Zepto Friday, November 11, 11 

underscore var lyrics = [ {line : 1, words : "I'm a lumberjack and I'm okay"}, {line : 2, words : "I sleep all night and I work all day"}, {line : 3, words : "He's a lumberjack and he's okay"}, {line : 4, words : "He sleeps all night and he works all day"} ]; _(lyrics).chain() .map(function(line) { return line.words.split(' '); }) .flatten() .reduce(function(counts, word) { counts[word] = (counts[word] || 0) + 1; return counts; }, {}).value(); => {lumberjack : 2, all : 4, night : 2 ... } Friday, November 11, 11 

MVC Friday, November 11, 11 

Backbone.js • supplies structure to JavaScript-heavy applications • Backbone's only hard dependency is Underscore.js. For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include json2.js, and either jQuery ( > 1.4.2) or Zepto. Friday, November 11, 11 

Backbone.js var Sidebar = Backbone.Model.extend({ promptColor: function() { var cssColor = prompt("Please enter a CSS color:"); this.set({color: cssColor}); } }); window.sidebar = new Sidebar; var ItemView = Backbone.View.extend({ tagName: 'li' }); var item = new ItemView(); Friday, November 11, 11 

OOP Friday, November 11, 11 

my-class • 100% no wrappers, same perfs as hand-written pure JS classes • not only a class implementation, it's mostly a class design Friday, November 11, 11 

my-class (function() { var Person = my.Class({ constructor: function(name) { this.name = name; }, sayHello: function() { console.log('Hello from ' + this.name + '!'); } }) var Dreamer = my.Class(Person, { constructor: function(name, dream) { Dreamer.Super.call(this, name); this.dream = dream; }, sayDream: function() { console.log('I dream of ' + this.dream + '!'); } }); var sylvester = new Dreamer('Sylvester', 'eating Tweety'); sylvester.sayHello(); sylvester.sayDream(); alert('See this page source & open your JS console'); })(); Friday, November 11, 11 

communication Friday, November 11, 11 

jXHR • clone-variant of the XMLHttpRequest object API • makes cross-domain JSON-P styled call Friday, November 11, 11 

jXHR function handleError(msg,url) { alert(msg); } function doit() { var x1 = new jXHR(); x1.onerror = handleError; x1.onreadystatechange = function(data){ if (x1.readyState === 4) { alert("Success:"+data.source); } }; x1.open("GET","jsonme.php?callback=?&data="+ encodeURIComponent(JSON.stringify({data:"my value 1"}))+ "&_="+Math.random()); x1.send(); } Friday, November 11, 11 

benchmarking Friday, November 11, 11 

benchmark.js • works on nearly all JavaScript platforms • supports high-resolution timers • returns statistically significant results Friday, November 11, 11 

benchmark.js var suite = new Benchmark.Suite; // add tests suite.add('RegExp#test', function() { /o/.test('Hello World!'); }) .add('String#indexOf', function() { 'Hello World!'.indexOf('o') > -1; }) .add('String#match', function() { !!'Hello World!'.match(/o/); }) // add listeners .on('cycle', function(event, bench) { console.log(String(bench)); }) .on('complete', function() { console.log('Fastest is ' + this.filter('fastest').pluck('name')); }) // run async .run({ 'async': true }); Friday, November 11, 11 

games Friday, November 11, 11 

mibbu • fast prototyping your Javascript game • displayed using Canvas or DOM mode • CSS animations Friday, November 11, 11 

mibbu Friday, November 11, 11 

feature detection Friday, November 11, 11 

Modernizr • feature detection with media queries and conditional resource loading • adds classes to html element to say if a certain feature is available • Modernizr JS object let’s you have a set of flags that help you building your code Friday, November 11, 11 

Modernizr if (Modernizr.geolocation) { //do whatever you want } Friday, November 11, 11 

system.js • Javacript object with the user's system information document.body.innerHTML = [ 'Browser ' + System.browser, 'OS ' + System.os, '', 'Canvas ' + System.support.canvas, 'Local storage ' + System.support.localStorage, 'File API ' + System.support.file, 'FileSystem API ' + System.support.fileSystem, 'RequestAnimationFrame ' + System.support.requestAnimationFrame, 'Session storage ' + System.support.sessionStorage, 'WebGL ' + System.support.webgl, 'Worker ' + System.support.worker ].join( '
' ); Friday, November 11, 11 

events Friday, November 11, 11 

EventEmitter • you can listen for and emit events from what ever objects you choose • port of the node.js EventEmitter Friday, November 11, 11 

EventEmitter // Initialise the EventEmitter var ee = new EventEmitter(); // Initialise the listener function function myListener() { console.log('The foo event was emitted.'); } // Add the listener ee.addListener('foo', myListener); // Emit the foo event ee.emit('foo'); // The listener function is now called // Remove the listener ee.removeListener('foo', myListener); // Log the array of listeners to show that it has been removed console.log(ee.listeners('foo')); Friday, November 11, 11 

polyfills Friday, November 11, 11 

Augment.js • Enables use of modern JavaScript by augmenting built in objects with the latest JavaScript methods Friday, November 11, 11 

Augment.js Array.prototype.every Array.prototype.filter Array.prototype.forEach Array.prototype.indexOf Array.isArray Date.now Date.prototype.toJSON Date.prototype.toISOString Function.prototype.bind Object.keys String.prototype.trim Friday, November 11, 11 

State Machine Friday, November 11, 11 

gowiththeflow • asynchronous flow-control micro library • asynchronous code is executed, sequentially or in parallel Friday, November 11, 11 

gowiththeflow var Flow = require('gowiththeflow') Flow().seq(function(next){ console.log("step 1: started, it will last 1sec"); setTimeout(function(){ console.log("step 1: 1sec expired. Step 1 completed"); next(); }, 1000); }).seq(function(next){ console.log("step 2: run after step1 has been completed"); }) Friday, November 11, 11 

what you just need Friday, November 11, 11 

Ender • Build only what you need, when you need it. • Lightweight, expressive, familiar. • think of it as NPM's little sister • if one library goes bad or unmaintained, it can be replaced with another Friday, November 11, 11 

Ender is not a JavaScript library. Friday, November 11, 11 

Ender ender build domready qwery underscore $('#content a.button') .bind('click.button', function (e) { $(this).data('clicked', true).unbind() e.preventDefault() }) .css({ opacity: 1 , color: 'red' }) .fadeOut(250) $.map(['a', 'b', 'c'], function (letter) { return letter.toUpperCase() }) $.ajax('/data', function (resp) { $('#content').html(resp) }) Friday, November 11, 11 

Ender // IN THE BROWSER // Require packages to access them as raw packages var _ = require('underscore') , _.each([1, 2, 3], alert) // Access methods augmented directly to the $ $.ready(function () { $([1, 2, null, 3]) .filter(function (item) { return item }) .each(alert) }) Friday, November 11, 11 

full purpose frameworks Friday, November 11, 11 

full purpose frameworks • jQuery • Dojo • Prototype.js • YUI • LibSAPO.js • etc. Friday, November 11, 11 

why should I bother? Friday, November 11, 11 

be a better developer Friday, November 11, 11 

Make It Work Make It Right Make It Fast Friday, November 11, 11 

Do’s and don’ts Friday, November 11, 11 

Wrap Up Friday, November 11, 11 

Use it carefully Friday, November 11, 11 

Think for yourself Friday, November 11, 11 

Thanks Friday, November 11, 11