Pocket Knife JS

KILL ALL
Pocket Knife
HUMANS!
JS I. Robot
Forensic Anthropologist
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


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 deﬁnitely 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
stuﬀ with node.js, use it for rendering
stuﬀ in CouchDB’s views

• Plugins for jQuery, Dojo, Yui,
CommonJS, qooxdoo


Mustache
var view = {
"name": "Bill",
"address": {
"street": "801 Streetly street",
"city": "Boston",
"state": "MA", <h1>Contact: Bill</h1>
"zip" "02101" <p>801 Streetly street</p>
} <p>Boston, MA 02101</p>
}

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

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


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 ﬁle and
module loader.

• It is optimized for in-browser use, but
it can be used in other JavaScript
environments


require.js
project-directory/
project.html
scripts/
main.js
require.js
helper/
util.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.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.


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


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>
</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 sniﬃng
• Only 3kb (miniﬁed and gzipped)

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


enhancement


underscore

• functional programming
• utility-belt library
• think Prototype.js
• without extending built-in
• so ﬁts 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.


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


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


communication


jXHR

• clone-variant of the XMLHttpRequest
object API

• makes cross-domain JSON-P styled
call


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


benchmarking


benchmark.js

• works on nearly all JavaScript
platforms

• supports high-resolution timers
• returns statistically signiﬁcant results


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


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 ﬂags that help you building
your code


Modernizr

<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">

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


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


polyﬁlls


Augment.js

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


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


State Machine


gowiththeﬂow

• asynchronous ﬂow-control micro
library

• asynchronous code is executed,
sequentially or in parallel


gowiththeﬂow

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


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


full purpose frameworks


full purpose frameworks

• jQuery
• Dojo
• Prototype.js
• YUI
• LibSAPO.js
• etc.

why should I bother?


be a better developer


Make It Work
Make It Right
Make It Fast


Do’s and don’ts


Wrap Up


Use it carefully


Think for yourself


Thanks


Pocket Knife JS

More Related Content

What's hot

Viewers also liked

Similar to Pocket Knife JS

Recently uploaded

Pocket Knife JS