pocket knife js

KILL ALL HUMANS!

I. RobotForensic Anthropologist

Pocket Knife JS

November 10, 2011

Friday, November 11, 11

Who am I


Who am I

• Diogo Antunes


Who am I

• Diogo Antunes

• JavaScript developer @ SAPO


Who am I

• Diogo Antunes


• @dicode


Who am I

• Diogo Antunes


• @dicode

• http://js.sapo.pt


http://js.sapo.pt

http://js.sapo.pt

JS World

• Wonderful things are happening

• Lot’s of new code, snippets

• Great community

• Always looking forward


Why?

• JS is cool

• Lot to learn

• Lot to innovate


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


Going deep


Templating


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


http://nodejs.org/

http://nodejs.org/

http://couchdb.apache.org/

http://couchdb.apache.org/

Mustachevar view = { "name": "Bill", "address": { "street": "801 Streetly street", "city": "Boston", "state": "MA", "zip" "02101" }}

var template = '<h1>Contact: {{name}}</h1>{{#address}} <p>{{street}}</p> <p>{{city}}, {{state}} {{zip}}</p>{{/address}}';

var html = Mustache.to_html(template, view);

<h1>Contact: Bill</h1><p>801 Streetly street</p><p>Boston, MA 02101</p>


Loaders


Lab.js

• Loading And Blocking JavaScript

• Load JS from anywhere at anytime

• You can even load LABjs dynamically


Lab.js

<script src="framework.js"></script><script src="plugin.framework.js"></script><script src="myplugin.framework.js"></script><script src="init.js"></script>

<script> $LAB .script("framework.js").wait() .script("plugin.framework.js") .script("myplugin.framework.js").wait() .script("init.js").wait();</script>


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


require.js

<!DOCTYPE html><html> <head> <title>My Sample Project</title>  <script data-main="scripts/main" src="scripts/require.js"></script> </head> <body> <h1>My Sample Project</h1> </body></html>

project-directory/ project.html scripts/ main.js require.js helper/ util.js

require.js

<!DOCTYPE html><html> <head> <title>My Sample Project</title>  <script data-main="scripts/main" src="scripts/require.js"></script> </head> <body> <h1>My Sample Project</h1> </body></html>

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

webkit-based


zepto.js

• minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

• ~5kb

• has almost everything


zepto.js

$(document).ready(function(){ ... });

$.isFunction(function), $.isObject(object), $.isArray(array);

$('some selector').bind('click', function(event){ ... });


animation


é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


émile

• one method

emile(element, style, options, after)


shifty

• A teeny tiny tweening engine in JavaScript

• low-level library meant to be encapsulated by higher-level tools


shifty - do’s

• Tweening of Numbers.

• Extensibility hooks for the tweening.


shifty - dont’s

• Keyframing.

• Drawing.

• Much else.


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


swipe.js

• lightweight mobile slider with 1-to-1 touch movement

<div id='slider'> <ul> <li style='display:block'></li> <li style='display:none'></li> <li style='display:none'></li> <li style='display:none'></li> <li style='display:none'></li> </ul></div>


swipe.js

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


selectors


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)


Jaguar

Jaguar.search(String selector[, DOMElement|DOMDocument context])// Or simply:Jaguar(String selector[, DOMElement|DOMDocument context])

Jaguar.match(Jaguar('#id')[0], '#id') // trueJaguar.match(Jaguar('#cake')[0], '.edible') // hopefully true


enhancement


underscore

• functional programming

• utility-belt library

• think Prototype.js

• without extending built-in

• so fits great with jQuery or Zepto


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 ... }


MVC


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.


http://documentcloud.github.com/underscore/

http://documentcloud.github.com/underscore/

https://github.com/douglascrockford/JSON-js

https://github.com/douglascrockford/JSON-js

http://jquery.com/

http://jquery.com/

http://zeptojs.com/

http://zeptojs.com/

Backbone.jsvar 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();


OOP


my-class

• 100% no wrappers, same perfs as hand-written pure JS classes

• not only a class implementation, it's mostly a class design


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

})();


communication


jXHR

• clone-variant of the XMLHttpRequest object API

• makes cross-domain JSON-P styled call


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


benchmarking


benchmark.js

• works on nearly all JavaScript platforms

• supports high-resolution timers

• returns statistically significant results


benchmark.jsvar suite = new Benchmark.Suite;

// add testssuite.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 });


games


mibbu

• fast prototyping your Javascript game

• displayed using Canvas or DOM mode

• CSS animations


mibbu


feature detection


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


Modernizr

if (Modernizr.geolocation) { //do whatever you want}

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">


system.js

• Javacript object with the user's system information

document.body.innerHTML = [

'<strong>Browser</strong> ' + System.browser, '<strong>OS</strong> ' + System.os, '', '<strong>Canvas</strong> ' + System.support.canvas, '<strong>Local storage</strong> ' + System.support.localStorage, '<strong>File API</strong> ' + System.support.file, '<strong>FileSystem API</strong> ' + System.support.fileSystem, '<strong>RequestAnimationFrame</strong> ' + System.support.requestAnimationFrame, '<strong>Session storage</strong> ' + System.support.sessionStorage, '<strong>WebGL</strong> ' + System.support.webgl, '<strong>Worker</strong> ' + System.support.worker

].join( '<br />' );


events


EventEmitter

• you can listen for and emit events from what ever objects you choose

• port of the node.js EventEmitter


EventEmitter// Initialise the EventEmittervar ee = new EventEmitter();

// Initialise the listener functionfunction myListener() { console.log('The foo event was emitted.');}

// Add the listeneree.addListener('foo', myListener);

// Emit the foo eventee.emit('foo'); // The listener function is now called

// Remove the listeneree.removeListener('foo', myListener);

// Log the array of listeners to show that it has been removedconsole.log(ee.listeners('foo'));


polyfills


Augment.js

• Enables use of modern JavaScript by augmenting built in objects with the latest JavaScript methods


Augment.js

Array.prototype.everyArray.prototype.filterArray.prototype.forEachArray.prototype.indexOfArray.isArrayDate.nowDate.prototype.toJSONDate.prototype.toISOStringFunction.prototype.bindObject.keysString.prototype.trim


State Machine


gowiththeflow

• asynchronous flow-control micro library

• asynchronous code is executed, sequentially or in parallel


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


what you just need


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


https://github.com/isaacs/npm

https://github.com/isaacs/npm

Ender is not a JavaScript library.


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


Ender

// IN THE BROWSER

// Require packages to access them as raw packagesvar _ = 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)})


full purpose frameworks


full purpose frameworks

• jQuery

• Dojo

• Prototype.js

• YUI

• LibSAPO.js

• etc.


why should I bother?


be a better developer


Make It WorkMake It RightMake It Fast


http://c2.com/cgi/fullSearch






Do’s and don’ts


Wrap Up


Use it carefully


Think for yourself


Thanks


pocket knife js

Technology