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