Why YUI?

Derek Gathright, Yahoo!

Who is this guy?

What is this talk about?

Why YUI?

#1: Architecture

Some 'ilities of smart software

Modularity

JS Modules

// yuiblog.com/blog/2007/06/12/module-pattern/
            
myLibrary.fizzbuzz = (function () {

  var somePrivateVar = "Fizz";
  
  return {
    fizzbuzz: myPrivateVar + " Buzz"
  };
  
})();

YUI Modules

// fizzbuzz.js

YUI.add("fizzbuzz", function(Y){

  // Private variable
  var myPrivateVar = "Fizz";

  // Export as public variable
  Y.fizzbuzz = myPrivateVar + " buzz";

});

JS Modules

Emerging standards

Eventual goal: ECMAScript Modules. Still just a proposal, and incompatible with ES3. :(

What do you gain from modularity?

Extensibility

Lightning McQueen

Don't hack

Extend

Myth: "YUI is too enterprisey"

Enterprisey?

Enterprisey

yuilibrary.com

Why YUI?

#2: Infrastructure

Toolkit

Tools

// DOM
YUI().use('node', function (Y) { ... });

// Canvas/SVG/VML graphics
YUI().use('graphics', function (Y) { ... });

// Calendar widget
YUI().use('calendar', function (Y) { ... });

// YQL client
YUI().use('yql', function (Y) { ... });

YUI Loader

Loading modules

So we organized into modules, great!

<head>
  <script src='/js/coreLibrary.js'> </script>
  <script src='/js/moduleA.js'> </script>
  <script src='/js/moduleB.js'> </script>
  <script src='/js/moduleC.js'> </script>
  <script src='/js/moduleD.js'> </script>
  ...
</head>

Goal of a module loader?

To optimize and simplify the process of loading modules.

How?

  • Async loading
  • Automatic dependency resolution
  • On-demand module loading
  • CSS support
  • ... and more

YUI Loader

YUI Modules example (again)

// fizzbuzz.js

YUI.add("fizzbuzz", function(Y){

  // Private variable
  var myPrivateVar = "Fizz";

  // Export as public variable
  Y.fizz = myPrivateVar + " buzz"

}

YUI Loader

<!DOCTYPE html>
<html>
  <script src='http://yuim.in/'></script>
  <script>
    YUI().use('fizzbuzz', function(Y) { 
      console.log(Y.fizz) // "Fizz buzz"
    });
  </script>
</html>

YUI Loader

<!DOCTYPE html>
<html>
  <script src='http://yuim.in/'></script>
  <script>
    YUI({
      modules:{
        fizzbuzz:{ fullpath: 'path/to/fizzbuzz.js' }
      }
    }).use('fizzbuzz', function(Y) { 
      console.log(Y.fizz) // "Fizz buzz"
    });
  </script>
</html>

YUI Loader

// Example @ http://jsfiddle.net/derek/sfcsE/
YUI({
    modules: {
        'jquery': {
            fullpath: 'jquery.min.js',
            condition: 'before' },
        'jCarousel': {
            fullpath: 'jquery.jcarousel.min.js',
            requires: ['jquery', 'jCarouselCSS'] },
        'jCarouselCSS': {
            fullpath: 'skin.css',
            requires: ['jCarouselCSS'],
            type: 'css' }
    }
}).use('jCarousel', function(Y) { ... });

Combo-loading

Combo-loading

Addresses the problem of one-module-per-HTTP-request.

Instead of:

GET moduleA.js
GET moduleB.js
GET moduleC.js

= 3 HTTP requests

Combo-loading

You get:

GET moduleA.js&moduleB.js&moduleC.js
        
= 1 HTTP request

Combo-loading

What about long URLs?

GET moduleA.js&moduleB.js&moduleC.js
GET moduleD.js&moduleE.js&moduleF.js
        
= 2 HTTP requests

Combo-loading
+ Modules
+ Loader
= Magic!

More Awesome Stuff

Why YUI?

Why #3: Open

Open Source

Open CDN

Open Hours

Open Communication

Open Development

Open Documentation

'Watch' YUI3 on Github!

Thank You

Questions, comments -> @derek