pocket knife js
DESCRIPTION
Overview of some js micro frameworks.#codebits2011TRANSCRIPT
KILL ALL HUMANS!
I. RobotForensic 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
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>
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
<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>
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
<!DOCTYPE html><html> <head> <title>My Sample Project</title> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <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
Friday, November 11, 11
require.js
<!DOCTYPE html><html> <head> <title>My Sample Project</title> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <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.});
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
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.});
Friday, November 11, 11
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>
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') // trueJaguar.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.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();
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
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();}
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.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 });
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}
<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">
Friday, November 11, 11
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 />' );
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 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'));
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.everyArray.prototype.filterArray.prototype.forEachArray.prototype.indexOfArray.isArrayDate.nowDate.prototype.toJSONDate.prototype.toISOStringFunction.prototype.bindObject.keysString.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 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)})
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 WorkMake It RightMake 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