3. Who am I
• Diogo Antunes
Friday, November 11, 11
4. Who am I
• Diogo Antunes
• JavaScript developer @ SAPO
Friday, November 11, 11
5. Who am I
• Diogo Antunes
• JavaScript developer @ SAPO
• @dicode
Friday, November 11, 11
6. Who am I
• Diogo Antunes
• JavaScript developer @ SAPO
• @dicode
• http://js.sapo.pt
Friday, November 11, 11
7. JS World
• Wonderful things are happening
• Lot’s of new code, snippets
• Great community
• Always looking forward
Friday, November 11, 11
8. Why?
• JS is cool
• Lot to learn
• Lot to innovate
Friday, November 11, 11
9. 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
12. 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
13. 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);
Friday, November 11, 11
17. 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
21. zepto.js
• minimalist JavaScript framework for
mobile WebKit browsers, with a
jQuery-compatible syntax.
• ~5kb
• has almost everything
Friday, November 11, 11
24. é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
25. émile
• one method
emile(element, style, options, after)
Friday, November 11, 11
26. shifty
• A teeny tiny tweening engine in
JavaScript
• low-level library meant to be
encapsulated by higher-level tools
Friday, November 11, 11
27. shifty - do’s
• Tweening of Numbers.
• Extensibility hooks for the tweening.
Friday, November 11, 11
28. shifty - dont’s
• Keyframing.
• Drawing.
• Much else.
Friday, November 11, 11
29. 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
30. 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
31. 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
33. 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
36. underscore
• functional programming
• utility-belt library
• think Prototype.js
• without extending built-in
• so fits great with jQuery or Zepto
Friday, November 11, 11
37. 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
39. 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
40. 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
42. 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
43. (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) {
my-class
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
54. 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
55. 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
}
Friday, November 11, 11
58. EventEmitter
• you can listen for and emit events
from what ever objects you choose
• port of the node.js EventEmitter
Friday, November 11, 11
59. 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
64. gowiththeflow
• asynchronous flow-control micro
library
• asynchronous code is executed,
sequentially or in parallel
Friday, November 11, 11
65. 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
67. 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
68. Ender is not a
JavaScript library.
Friday, November 11, 11