SlideShare a Scribd company logo
YUI on the go
How to include YUI components on demand


                   Christian Heilmann
         Yahoo! Frontend Engineering Summit UK
                     December 2007
Why use libraries?
Plan   Use good   Job
Code    library   done
Without libraries:
Plan     Browser Hell
Code
       OS inconsistencies
         Forget about
         obscure bugs

        Cannot reproduce
> CVS commit
> Conflict:
> Too much fail error.
You.sacked = true
MCSE
“You want fries
  with that?”
Ergo:
Libraries are good, mkay?
A common complaint.
“YUI is too big! If I want to
build something on top of it, I
need to include a lot of large
           files!”
yahoo.js – 4.6kb
      dom.js – 35kb
      event.js – 61kb
    reset.css – 0.5kb
    fonts.css – 0.6kb
     grids.css – 3kb

6 HTTP requests – 104.7kb
First Aid remedies:

– Use the minified YUI versions
yahoo-min.js – 1kb
  dom-min.js – 10.2kb
  event-min.js – 13kb
 reset-min.css – 0.4kb
 fonts-min.css – 0.2kb
 grids-min.css – 2.4kb

6 HTTP requests – 27.2kb
First Aid remedies:

– Use the minified YUI versions
– Cut down on included YUI
  components by using the combined
  component includes.
yahoo-dom-event.js – 24.1kb
reset-fonts-grids.css – 3.1kb

 2 HTTP requests – 27.2kb
First Aid remedies:

– Use the minified YUI versions
– Cut down on included YUI
  components by using the combined
  component includes.
– Use the hosted YUI versions.
This is all packing and level
         crunching.
What we really want is...
On-demand delivery
Why is that needed?
Use cases:
Use cases:

– We don’t want to make users load
  things they don’t need.
Use cases:

– We don’t want to make users load
  things they don’t need.
– Distribution (badges, banners) works a
  lot better if it is one <script> and not 3.
Use cases:

– We don’t want to make users load
  things they don’t need.
– Distribution (badges, banners) works a
  lot better if it is one <script> and not 3.
– We can offer implementers to trigger
  extra functionality with markup:
Use cases:

– We don’t want to make users load
  things they don’t need.
– Distribution (badges, banners) works a
  lot better if it is one <script> and not 3.
– We can offer implementers to trigger
  extra functionality with markup:
          “add an ‘animated’ CSS class for
                smooth transitions”
Example?
<div class=quot;flickrbadgequot;>
  <p>
    <a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
       My latest photos on flickr
    </a>
  </p>
</div>
<script src=quot;flickrbadgeloader.jsquot;></script>




        http://icant.co.uk/sandbox/flickrbadgev2/
<div class=quot;flickrbadgequot;>
  <p>
    <a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
       My latest photos on flickr
    </a>
  </p>
</div>
<script src=quot;flickrbadgeloader.jsquot;></script>




        http://icant.co.uk/sandbox/flickrbadgev2/
<div class=quot;flickrbadgequot;>
  <p>
    <a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
       My latest photos on flickr
    </a>
  </p>
</div>
<script src=quot;flickrbadgeloader.jsquot;></script>




        http://icant.co.uk/sandbox/flickrbadgev2/
How?
Supercool Solution:

        The YUI Loader

http://developer.yahoo.com/yui/yuiloader
YUI Loader:
YUI Loader:

– Knows about dependencies
YUI Loader:

– Knows about dependencies
– Automatically gets the newest
  hosted versions
YUI Loader:

– Knows about dependencies
– Automatically gets the newest
  hosted versions
– Works without yahoo.js
YUI Loader:

– Knows about dependencies
– Automatically gets the newest
  hosted versions
– Works without yahoo.js
– Extendable with non-YUI
  components(!)
<script
src=quot;http://yui.yahooapis.com/2.3.1/b
uild/yuiloader/yuiloader-beta-
min.jsquot;></script>

<script>
loader = new YAHOO.util.YUILoader();
loader.require('calendar','tabview');
loader.insert(function() {
    // Your code
});
</script>
http://yuiblog.com/assets/pdf/cheatsheets/yuiloader.pdf
Other option – 11kb is too
          much!
Rolling your own


The YAHOO_config way
YUI has an often forgotten
 configuration setting in
     YAHOO_config.
YUI has an often forgotten
   configuration setting in
       YAHOO_config.

http://developer.yahoo.com/yui/yahoo/#config
YUI has an often forgotten
   configuration setting in
       YAHOO_config.
                                No
                                   ww
http://developer.yahoo.com/yui/yahoo/#config
                                 mo ith
                            AW       re
                                 ES
                                    OM
                                        E!
It allows you to define a
listener function that gets
 notified every time a YUI
    component is loaded.
<script>
function snitch(component){
   console.log('can has YUI ' +
                component.name);
};
YAHOO_config = {
   listener:snitch
};
</script>
<script
src=quot;http://yui.yahooapis.com/2.3.1/build/ya
hoo/yahoo-min.jsquot;></script>
<script
src=quot;http://yui.yahooapis.com/2.3.1/build/ev
ent/event-min.jsquot;></script>
Using this in conjunction with
your scripts and repeat calls
   of the “snitch” function
 allows you to dynamically
       include the YUI.
var myScript = function(){
    // other code
    function addScript(url){
        var s = document.createElement('script');
        s.setAttribute('type', 'text/javascript');
        s.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(s);
    };
    function YUIready(o){
        if(typeof o === 'undefined'){
             var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                          'build/yahoo-dom-event/' +
                          'yahoo-dom-event.js';
             addScript(APIurl);
        } else {
            if(o.name === 'yahoo-dom-event'){ // YUI is ready
           }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
    function addScript(url){
        var s = document.createElement('script');
        s.setAttribute('type', 'text/javascript');
        s.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(s);
    };
    function YUIready(o){
        if(typeof o === 'undefined'){
             var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                          'build/yahoo-dom-event/' +
                          'yahoo-dom-event.js';
             addScript(APIurl);
        } else {
            if(o.name === 'yahoo-dom-event'){ // YUI is ready
           }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
    function addScript(url){
        var s = document.createElement('script');
        s.setAttribute('type', 'text/javascript');
        s.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(s);
    };
    function YUIready(o){
        if(typeof o === 'undefined'){
             var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                          'build/yahoo-dom-event/' +
                          'yahoo-dom-event.js';
             addScript(APIurl);
        } else {
            if(o.name === 'yahoo-dom-event'){ // YUI is ready
           }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
You can extend that to load
different YUI components one
        after the other.
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            var url = 'http://yui.yahooapis.com/2.3.1/' +
                      'build/animation/' +
                      'animation-min.js';
            addScript(url);
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
  +     if(typeof o === 'undefined'){
         } else {
          if(o.name === 'yahoo-dom-event'){
            var url = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/animation/' +
                       'animation-min.js';
             addScript(url);
          };
          if(o.name === 'animation'){
              // done …
          };
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
You can also make it
dependent on classes or IDs
  used in the document, or
configuration options of your
 main script and many more
           things.
Have fun!



Thanks!

More Related Content

What's hot

HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
Robert Nyman
 
Seti 09
Seti 09Seti 09
Seti 09
bzanchet
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
Remy Sharp
 
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web -  at NackademinHTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web - at Nackademin
Robert Nyman
 
Ember background basics
Ember background basicsEmber background basics
Ember background basics
Philipp Fehre
 
Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013
Kristoffer Deinoff
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
Kris Wallsmith
 
HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next
지수 윤
 
Deploying
DeployingDeploying
Deploying
soon
 
Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3
Kris Wallsmith
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
gerbille
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
Robert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
Robert Nyman
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
Remy Sharp
 
Desbravando Web Components
Desbravando Web ComponentsDesbravando Web Components
Desbravando Web Components
Mateus Ortiz
 
Add loop shortcode
Add loop shortcodeAdd loop shortcode
Add loop shortcode
Peter Baylies
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
Remy Sharp
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
Robert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
Robert Nyman
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
Robert Nyman
 

What's hot (20)

HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
 
Seti 09
Seti 09Seti 09
Seti 09
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web -  at NackademinHTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web - at Nackademin
 
Ember background basics
Ember background basicsEmber background basics
Ember background basics
 
Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
 
HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next
 
Deploying
DeployingDeploying
Deploying
 
Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Desbravando Web Components
Desbravando Web ComponentsDesbravando Web Components
Desbravando Web Components
 
Add loop shortcode
Add loop shortcodeAdd loop shortcode
Add loop shortcode
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
 

Viewers also liked

Yui- Yahoo! User Interface Library
Yui- Yahoo! User Interface LibraryYui- Yahoo! User Interface Library
Yui- Yahoo! User Interface Library
Momentum Design Lab
 
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
Joseph Chiang
 
The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)
Joseph Chiang
 
Yui3
Yui3Yui3
YUI introduction to build hack interfaces
YUI introduction to build hack interfacesYUI introduction to build hack interfaces
YUI introduction to build hack interfaces
Christian Heilmann
 
Introduction to YUI
Introduction to YUIIntroduction to YUI
Introduction to YUI
Christian Heilmann
 

Viewers also liked (6)

Yui- Yahoo! User Interface Library
Yui- Yahoo! User Interface LibraryYui- Yahoo! User Interface Library
Yui- Yahoo! User Interface Library
 
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
 
The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)
 
Yui3
Yui3Yui3
Yui3
 
YUI introduction to build hack interfaces
YUI introduction to build hack interfacesYUI introduction to build hack interfaces
YUI introduction to build hack interfaces
 
Introduction to YUI
Introduction to YUIIntroduction to YUI
Introduction to YUI
 

Similar to YUI on the go

The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
Michael Girouard
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
rajivmordani
 
Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)
Nordic APIs
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
mwbrooks
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPress
wpnepal
 
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoDjango + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
Javier Abadía
 
Express Presentation
Express PresentationExpress Presentation
Express Presentation
aaronheckmann
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
Joseph Chiang
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
aglemann
 
WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015
Fernando Daciuk
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
dion
 
Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2
Christoffer Noring
 
夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》
Koubei Banquet
 
Security testing of YUI powered applications
Security testing of YUI powered applicationsSecurity testing of YUI powered applications
Security testing of YUI powered applications
dimisec
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
Nishan Subedi
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
Ben Lin
 
Loadrunner
LoadrunnerLoadrunner
Loadrunner
danwrong
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
Bastian Feder
 
Embracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend PerfEmbracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend Perf
Morgan Cheng
 
Service worker: discover the next web game changer
Service worker: discover the next web game changerService worker: discover the next web game changer
Service worker: discover the next web game changer
Sandro Paganotti
 

Similar to YUI on the go (20)

The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
 
Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPress
 
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoDjango + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
 
Express Presentation
Express PresentationExpress Presentation
Express Presentation
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
 
WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 
Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2
 
夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》
 
Security testing of YUI powered applications
Security testing of YUI powered applicationsSecurity testing of YUI powered applications
Security testing of YUI powered applications
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
 
Loadrunner
LoadrunnerLoadrunner
Loadrunner
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
Embracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend PerfEmbracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend Perf
 
Service worker: discover the next web game changer
Service worker: discover the next web game changerService worker: discover the next web game changer
Service worker: discover the next web game changer
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
Christian Heilmann
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
Christian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
Christian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
Christian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
Christian Heilmann
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Christian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
Christian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 

Recently uploaded (20)

“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 

YUI on the go

  • 1. YUI on the go How to include YUI components on demand Christian Heilmann Yahoo! Frontend Engineering Summit UK December 2007
  • 3. Plan Use good Job Code library done
  • 5. Plan Browser Hell Code OS inconsistencies Forget about obscure bugs Cannot reproduce
  • 6.
  • 7. > CVS commit > Conflict: > Too much fail error.
  • 10.
  • 11.
  • 12. “You want fries with that?”
  • 13.
  • 16. “YUI is too big! If I want to build something on top of it, I need to include a lot of large files!”
  • 17. yahoo.js – 4.6kb dom.js – 35kb event.js – 61kb reset.css – 0.5kb fonts.css – 0.6kb grids.css – 3kb 6 HTTP requests – 104.7kb
  • 18. First Aid remedies: – Use the minified YUI versions
  • 19. yahoo-min.js – 1kb dom-min.js – 10.2kb event-min.js – 13kb reset-min.css – 0.4kb fonts-min.css – 0.2kb grids-min.css – 2.4kb 6 HTTP requests – 27.2kb
  • 20. First Aid remedies: – Use the minified YUI versions – Cut down on included YUI components by using the combined component includes.
  • 21. yahoo-dom-event.js – 24.1kb reset-fonts-grids.css – 3.1kb 2 HTTP requests – 27.2kb
  • 22. First Aid remedies: – Use the minified YUI versions – Cut down on included YUI components by using the combined component includes. – Use the hosted YUI versions.
  • 23. This is all packing and level crunching.
  • 24. What we really want is...
  • 26. Why is that needed?
  • 28. Use cases: – We don’t want to make users load things they don’t need.
  • 29. Use cases: – We don’t want to make users load things they don’t need. – Distribution (badges, banners) works a lot better if it is one <script> and not 3.
  • 30. Use cases: – We don’t want to make users load things they don’t need. – Distribution (badges, banners) works a lot better if it is one <script> and not 3. – We can offer implementers to trigger extra functionality with markup:
  • 31. Use cases: – We don’t want to make users load things they don’t need. – Distribution (badges, banners) works a lot better if it is one <script> and not 3. – We can offer implementers to trigger extra functionality with markup: “add an ‘animated’ CSS class for smooth transitions”
  • 33. <div class=quot;flickrbadgequot;> <p> <a href=quot;http://www.flickr.com/photos/11414938% 40N00quot;> My latest photos on flickr </a> </p> </div> <script src=quot;flickrbadgeloader.jsquot;></script> http://icant.co.uk/sandbox/flickrbadgev2/
  • 34. <div class=quot;flickrbadgequot;> <p> <a href=quot;http://www.flickr.com/photos/11414938% 40N00quot;> My latest photos on flickr </a> </p> </div> <script src=quot;flickrbadgeloader.jsquot;></script> http://icant.co.uk/sandbox/flickrbadgev2/
  • 35. <div class=quot;flickrbadgequot;> <p> <a href=quot;http://www.flickr.com/photos/11414938% 40N00quot;> My latest photos on flickr </a> </p> </div> <script src=quot;flickrbadgeloader.jsquot;></script> http://icant.co.uk/sandbox/flickrbadgev2/
  • 36. How?
  • 37. Supercool Solution: The YUI Loader http://developer.yahoo.com/yui/yuiloader
  • 39. YUI Loader: – Knows about dependencies
  • 40. YUI Loader: – Knows about dependencies – Automatically gets the newest hosted versions
  • 41. YUI Loader: – Knows about dependencies – Automatically gets the newest hosted versions – Works without yahoo.js
  • 42. YUI Loader: – Knows about dependencies – Automatically gets the newest hosted versions – Works without yahoo.js – Extendable with non-YUI components(!)
  • 43. <script src=quot;http://yui.yahooapis.com/2.3.1/b uild/yuiloader/yuiloader-beta- min.jsquot;></script> <script> loader = new YAHOO.util.YUILoader(); loader.require('calendar','tabview'); loader.insert(function() { // Your code }); </script>
  • 45. Other option – 11kb is too much!
  • 46. Rolling your own The YAHOO_config way
  • 47. YUI has an often forgotten configuration setting in YAHOO_config.
  • 48. YUI has an often forgotten configuration setting in YAHOO_config. http://developer.yahoo.com/yui/yahoo/#config
  • 49. YUI has an often forgotten configuration setting in YAHOO_config. No ww http://developer.yahoo.com/yui/yahoo/#config mo ith AW re ES OM E!
  • 50. It allows you to define a listener function that gets notified every time a YUI component is loaded.
  • 51. <script> function snitch(component){ console.log('can has YUI ' + component.name); }; YAHOO_config = { listener:snitch }; </script> <script src=quot;http://yui.yahooapis.com/2.3.1/build/ya hoo/yahoo-min.jsquot;></script> <script src=quot;http://yui.yahooapis.com/2.3.1/build/ev ent/event-min.jsquot;></script>
  • 52. Using this in conjunction with your scripts and repeat calls of the “snitch” function allows you to dynamically include the YUI.
  • 53. var myScript = function(){ // other code function addScript(url){ var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(s); }; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 54. var myScript = function(){ // other code function addScript(url){ var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(s); }; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 55. var myScript = function(){ // other code function addScript(url){ var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(s); }; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 56. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 57. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 58. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 59. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 60. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 61. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 62. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 63. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 64. You can extend that to load different YUI components one after the other.
  • 65. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ var url = 'http://yui.yahooapis.com/2.3.1/' + 'build/animation/' + 'animation-min.js'; addScript(url); } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 66. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ + if(typeof o === 'undefined'){ } else { if(o.name === 'yahoo-dom-event'){ var url = 'http://yui.yahooapis.com/2.3.1/' + 'build/animation/' + 'animation-min.js'; addScript(url); }; if(o.name === 'animation'){ // done … }; }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 67. You can also make it dependent on classes or IDs used in the document, or configuration options of your main script and many more things.