YUI on the go

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

“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/

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(!)

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.

Using this in conjunction with your scripts and repeat calls of the “snitch” function allows you to dynamically include the YUI.

You can extend that to load different YUI components one after the other.

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!

http://www.wait-till-i.com	666
http://christianheilmann.com	86
http://icant.co.uk	23
http://semanticly.blogspot.com	14
http://www.slideshare.net	9
http://www.netvibes.com	7
http://developer.yahoo.com	3
http://www.hanrss.com	1
http://localhost	1
http://developer.yahoo.net	1
http://static.slideshare.net	1
http://webnl.tumblr.com	1

YUI on the go

by Christian Heilmann on Dec 06, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 813

Statistics

YUI on the go — Presentation Transcript