YUIHack U – IIT Kharagpur

Harsha Vashishtmail@harsharv.comhttp://www.harsharv.com

The client side is where strange things happen.

Browsers render in fascinating and totally wrong ways.

Random code from dubious sources interferes with your godlike, clean and high quality code.

...and you fix more than you develop.

The web is a total mess!

To make things work for Yahoo! we needed to find a way to abstract these issues away from us.

And this is why we built the YUI.

YUI is a framework to build working web applications.

It includes CSS solutions to create layouts that work across browsers and allow for predictable typography.

And it takes the pain out of writing JavaScript.

Last but very much not least it allows you to create applications using tested and working widgets that extend what HTML gives

us.

Inte

rface

Wid

gets

Auto Complete Data Table

Button Layout

Calendar Menu

Charts Rich Text

Container Tab View

Everything is fully documented with around 300 examples!

1. Documentationhttp://developer.yahoo.com/yui/docs/

2. Exampleshttp://developer.yahoo.com/yui/examples/

All YUI components come as a debug version which log everything that is going on to the logger.

All in all YUI allows you to build web interfaces without having to know all the pain that goes on in the browser world.

Now, lets have a look at what YUI has to offer.

1. Data Sourcehttp://developer.yahoo.com/yui/3/datasource/

The DataSource Utility provides a consistent API for the retrieval of data from arbitrary sources over a variety of supported

protocols.

1. Remote sources2. Polling3. Caching4. Events

http://developer.yahoo.com/yui/3/examples/datasource/datasource_get.html

YUI allows you to fetch data from YQL directly!

http://developer.yahoo.com/yui/3/examples/yql/simple-yql.html

2. Auto complete

http://developer.yahoo.com/yui/3/examples/autocomplete/ac_datasource.html

3. Data Charts

Now.. I want to draw a graph..

Duck.. There will be codeDuck.. There will be code

My code..

YUI().use('charts', function (Y) { var myDataValues = [ {category:"5/1/2010", values:2000}, {category:"5/2/2010", values:50}, {category:"5/3/2010", values:400}, {category:"5/4/2010", values:200}, {category:"5/5/2010", values:5000} ]; var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});});

Ain’t that kick ass???

Let us look at the examples page…

http://developer.yahoo.com/yui/3/examples/

Questions???

Some people I need to thank…

1. Christian Heilmann2. Gopalrathnam Venkatesan

Harsha R. Vashishtmail@harsharv.com

http://www.harsharv.comhttp://twitter.com/harsharv

http://www.facebook.com/harsharv