SlideShare ist ein Scribd-Unternehmen logo
1 von 80
Downloaden Sie, um offline zu lesen
KILL ALL
              Pocket Knife
               HUMANS!
                  JS I. Robot
             Forensic Anthropologist
               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
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
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
                                      project-directory/
                                          project.html
                                          scripts/
                                              main.js
                                              require.js
                                              helper/
                                                   util.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>




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
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
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') // true
                           Jaguar.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.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
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
(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
communication



Friday, November 11, 11
jXHR

                    • clone-variant of the XMLHttpRequest
                          object API

                    • makes cross-domain JSON-P styled
                          call




Friday, November 11, 11
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();
                          }




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


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

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




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




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 Work
                          Make It Right
                          Make 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

Weitere ähnliche Inhalte

Was ist angesagt?

JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)jeresig
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patternsStoyan Stefanov
 
The ideal module system and the harsh reality
The ideal module system and the harsh realityThe ideal module system and the harsh reality
The ideal module system and the harsh realityAdam Warski
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)jeresig
 
The no-framework Scala Dependency Injection Framework
The no-framework Scala Dependency Injection FrameworkThe no-framework Scala Dependency Injection Framework
The no-framework Scala Dependency Injection FrameworkAdam Warski
 
Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)iloveigloo
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)jeresig
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013dmethvin
 
Puppet Conf 2012 - Managing Network Devices with Puppet
Puppet Conf 2012 - Managing Network Devices with PuppetPuppet Conf 2012 - Managing Network Devices with Puppet
Puppet Conf 2012 - Managing Network Devices with PuppetNan Liu
 
Best Practices - Mobile Developer Summit
Best Practices - Mobile Developer SummitBest Practices - Mobile Developer Summit
Best Practices - Mobile Developer Summitwolframkriesing
 
1.6 米嘉 gobuildweb
1.6 米嘉 gobuildweb1.6 米嘉 gobuildweb
1.6 米嘉 gobuildwebLeo Zhou
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your WebsiteAcquia
 
Styling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS EditionStyling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS Editionbensmithett
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
 
Getting Started with jQuery
Getting Started with jQueryGetting Started with jQuery
Getting Started with jQueryAkshay Mathur
 

Was ist angesagt? (20)

JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
 
The ideal module system and the harsh reality
The ideal module system and the harsh realityThe ideal module system and the harsh reality
The ideal module system and the harsh reality
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 
Web2.0 with jQuery in English
Web2.0 with jQuery in EnglishWeb2.0 with jQuery in English
Web2.0 with jQuery in English
 
The no-framework Scala Dependency Injection Framework
The no-framework Scala Dependency Injection FrameworkThe no-framework Scala Dependency Injection Framework
The no-framework Scala Dependency Injection Framework
 
Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)
 
bcgr3-jquery
bcgr3-jquerybcgr3-jquery
bcgr3-jquery
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
Puppet Conf 2012 - Managing Network Devices with Puppet
Puppet Conf 2012 - Managing Network Devices with PuppetPuppet Conf 2012 - Managing Network Devices with Puppet
Puppet Conf 2012 - Managing Network Devices with Puppet
 
Best Practices - Mobile Developer Summit
Best Practices - Mobile Developer SummitBest Practices - Mobile Developer Summit
Best Practices - Mobile Developer Summit
 
1.6 米嘉 gobuildweb
1.6 米嘉 gobuildweb1.6 米嘉 gobuildweb
1.6 米嘉 gobuildweb
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your Website
 
The jQuery Library
The  jQuery LibraryThe  jQuery Library
The jQuery Library
 
Styling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS EditionStyling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS Edition
 
JS Essence
JS EssenceJS Essence
JS Essence
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
Getting Started with jQuery
Getting Started with jQueryGetting Started with jQuery
Getting Started with jQuery
 

Andere mochten auch

Debugging your JavaScript
Debugging your JavaScriptDebugging your JavaScript
Debugging your JavaScriptDiogo Antunes
 
It works on your computer... but does it render fast enough?
It works on your computer... but does it render fast enough?It works on your computer... but does it render fast enough?
It works on your computer... but does it render fast enough?Diogo Antunes
 
Making burgers with JavaScript
Making burgers with JavaScriptMaking burgers with JavaScript
Making burgers with JavaScriptDiogo Antunes
 
Cq5 for enterprises: content delivery strategies
Cq5 for enterprises: content delivery strategiesCq5 for enterprises: content delivery strategies
Cq5 for enterprises: content delivery strategiesStefanFranck
 

Andere mochten auch (6)

Debugging your JavaScript
Debugging your JavaScriptDebugging your JavaScript
Debugging your JavaScript
 
Know your errors
Know your errorsKnow your errors
Know your errors
 
It works on your computer... but does it render fast enough?
It works on your computer... but does it render fast enough?It works on your computer... but does it render fast enough?
It works on your computer... but does it render fast enough?
 
Nodejs
NodejsNodejs
Nodejs
 
Making burgers with JavaScript
Making burgers with JavaScriptMaking burgers with JavaScript
Making burgers with JavaScript
 
Cq5 for enterprises: content delivery strategies
Cq5 for enterprises: content delivery strategiesCq5 for enterprises: content delivery strategies
Cq5 for enterprises: content delivery strategies
 

Ähnlich wie Pocket Knife JS

DataMapper on Infinispan
DataMapper on InfinispanDataMapper on Infinispan
DataMapper on InfinispanLance Ball
 
MongoDB at Sailthru: Scaling and Schema Design
MongoDB at Sailthru: Scaling and Schema DesignMongoDB at Sailthru: Scaling and Schema Design
MongoDB at Sailthru: Scaling and Schema DesignDATAVERSITY
 
Javascript - How to avoid the bad parts
Javascript - How to avoid the bad partsJavascript - How to avoid the bad parts
Javascript - How to avoid the bad partsMikko Ohtamaa
 
Rails ORM De-mystifying Active Record has_many
Rails ORM De-mystifying Active Record has_manyRails ORM De-mystifying Active Record has_many
Rails ORM De-mystifying Active Record has_manyBlazing Cloud
 
JBoss AS 7 from a user perspective
JBoss AS 7 from a user perspectiveJBoss AS 7 from a user perspective
JBoss AS 7 from a user perspectiveMax Andersen
 
Play concurrency
Play concurrencyPlay concurrency
Play concurrencyJustin Long
 
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptx
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptxMicrosoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptx
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptxtutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Mastering the shortcode api
Mastering the shortcode apiMastering the shortcode api
Mastering the shortcode apiPeter Baylies
 
Your first rails app - 2
 Your first rails app - 2 Your first rails app - 2
Your first rails app - 2Blazing Cloud
 
ProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applicationsProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applicationsBinary Studio
 
QA Fes 2016. Александр Хотемской. Обзор ProtractorJS как фреймворка для брауз...
QA Fes 2016. Александр Хотемской. Обзор ProtractorJS как фреймворка для брауз...QA Fes 2016. Александр Хотемской. Обзор ProtractorJS как фреймворка для брауз...
QA Fes 2016. Александр Хотемской. Обзор ProtractorJS как фреймворка для брауз...QAFest
 
Server Side Javascript
Server Side JavascriptServer Side Javascript
Server Side Javascriptrajivmordani
 
Node.js, toy or power tool?
Node.js, toy or power tool?Node.js, toy or power tool?
Node.js, toy or power tool?Ovidiu Dimulescu
 

Ähnlich wie Pocket Knife JS (20)

DataMapper on Infinispan
DataMapper on InfinispanDataMapper on Infinispan
DataMapper on Infinispan
 
HTML5 and Sencha Touch
HTML5 and Sencha TouchHTML5 and Sencha Touch
HTML5 and Sencha Touch
 
MongoDB at Sailthru: Scaling and Schema Design
MongoDB at Sailthru: Scaling and Schema DesignMongoDB at Sailthru: Scaling and Schema Design
MongoDB at Sailthru: Scaling and Schema Design
 
Javascript - How to avoid the bad parts
Javascript - How to avoid the bad partsJavascript - How to avoid the bad parts
Javascript - How to avoid the bad parts
 
Rails ORM De-mystifying Active Record has_many
Rails ORM De-mystifying Active Record has_manyRails ORM De-mystifying Active Record has_many
Rails ORM De-mystifying Active Record has_many
 
JBoss AS 7 from a user perspective
JBoss AS 7 from a user perspectiveJBoss AS 7 from a user perspective
JBoss AS 7 from a user perspective
 
eZ Publish nextgen
eZ Publish nextgeneZ Publish nextgen
eZ Publish nextgen
 
Node at artsy
Node at artsyNode at artsy
Node at artsy
 
Play concurrency
Play concurrencyPlay concurrency
Play concurrency
 
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptx
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptxMicrosoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptx
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptx
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
jQuery-1-Ajax
jQuery-1-AjaxjQuery-1-Ajax
jQuery-1-Ajax
 
jQuery-1-Ajax
jQuery-1-AjaxjQuery-1-Ajax
jQuery-1-Ajax
 
Mastering the shortcode api
Mastering the shortcode apiMastering the shortcode api
Mastering the shortcode api
 
Railsconf 2010
Railsconf 2010Railsconf 2010
Railsconf 2010
 
Your first rails app - 2
 Your first rails app - 2 Your first rails app - 2
Your first rails app - 2
 
ProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applicationsProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applications
 
QA Fes 2016. Александр Хотемской. Обзор ProtractorJS как фреймворка для брауз...
QA Fes 2016. Александр Хотемской. Обзор ProtractorJS как фреймворка для брауз...QA Fes 2016. Александр Хотемской. Обзор ProtractorJS как фреймворка для брауз...
QA Fes 2016. Александр Хотемской. Обзор ProtractorJS как фреймворка для брауз...
 
Server Side Javascript
Server Side JavascriptServer Side Javascript
Server Side Javascript
 
Node.js, toy or power tool?
Node.js, toy or power tool?Node.js, toy or power tool?
Node.js, toy or power tool?
 

Kürzlich hochgeladen

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Kürzlich hochgeladen (20)

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

Pocket Knife JS

  • 1. KILL ALL Pocket Knife HUMANS! JS I. Robot Forensic Anthropologist November 10, 2011 Friday, November 11, 11
  • 2. Who am I Friday, November 11, 11
  • 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
  • 15. Lab.js • Loading And Blocking JavaScript • Load JS from anywhere at anytime • You can even load LABjs dynamically Friday, November 11, 11
  • 16. 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
  • 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
  • 18. require.js project-directory/ project.html scripts/ main.js require.js helper/ util.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> Friday, November 11, 11
  • 19. 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
  • 21. zepto.js • minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. • ~5kb • has almost everything Friday, November 11, 11
  • 22. zepto.js $(document).ready(function(){ ... }); $.isFunction(function), $.isObject(object), $.isArray(array); $('some selector').bind('click', function(event){ ... }); 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
  • 34. 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 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
  • 45. jXHR • clone-variant of the XMLHttpRequest object API • makes cross-domain JSON-P styled call Friday, November 11, 11
  • 46. 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(); } Friday, November 11, 11
  • 48. benchmark.js • works on nearly all JavaScript platforms • supports high-resolution timers • returns statistically significant results Friday, November 11, 11
  • 49. 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 }); Friday, November 11, 11
  • 51. mibbu • fast prototyping your Javascript game • displayed using Canvas or DOM mode • CSS animations 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
  • 56. 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
  • 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
  • 61. Augment.js • Enables use of modern JavaScript by augmenting built in objects with the latest JavaScript methods Friday, November 11, 11
  • 62. 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 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
  • 66. what you just need 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
  • 69. 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
  • 70. 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) }) Friday, November 11, 11
  • 72. full purpose frameworks • jQuery • Dojo • Prototype.js • YUI • LibSAPO.js • etc. Friday, November 11, 11
  • 73. why should I bother? Friday, November 11, 11
  • 74. be a better developer Friday, November 11, 11
  • 75. Make It Work Make It Right Make It Fast Friday, November 11, 11
  • 76. Do’s and don’ts Friday, November 11, 11
  • 78. Use it carefully Friday, November 11, 11
  • 79. Think for yourself Friday, November 11, 11