YUI<br />Hack U – IIT Kharagpur<br />Harsha Vashisht<br />mail@harsharv.comhttp://www.harsharv.com<br />
The client side is where strange things happen.<br />
Browsers render in fascinating and totally wrong ways.<br />
Random code from dubious sources interferes with your godlike, clean and high quality code....and you fix more than you de...
The web is a total mess!<br />
To make things work for Yahoo! we needed to find a way to abstract these issues away from us.<br />
And this is why we built the YUI.<br />
YUI is a framework to build working web applications. <br />
It includes CSS solutions to create layouts that work across browsers and allow for predictable typography. <br />
And it takes the pain out of writing JavaScript. <br />
Last but very much not least it allows you to create applications using tested and working widgets that extend what HTML g...
Auto Complete<br />Data Table<br />Interface Widgets<br />Button<br />Layout<br />Menu<br />Calendar<br />Rich Text<br />C...
Everything is fully documented with around 300 examples!<br />
1. Documentationhttp://developer.yahoo.com/yui/docs/2. Exampleshttp://developer.yahoo.com/yui/examples/ <br />
All YUI components come as a debug version which log everything that is going on to the logger.<br />
All in all YUI allows you to build web interfaces without having to know all the pain that goes on in the browser world.<b...
Now, lets have a look at what YUI has to offer.<br />
1. Data Sourcehttp://developer.yahoo.com/yui/3/datasource/<br />
The DataSource Utility provides a consistent API for the retrieval of data from arbitrary sources over a variety of suppor...
Remote sources<br />Polling<br />Caching<br />Events<br />
http://developer.yahoo.com/yui/3/examples/datasource/datasource_get.html<br />
YUI allows you to fetch data from YQL directly!<br />
http://developer.yahoo.com/yui/3/examples/yql/simple-yql.html<br />
2. Auto complete<br />
http://developer.yahoo.com/yui/3/examples/autocomplete/ac_datasource.html<br />
3. Data Charts<br />
Now.. I want to draw a graph..<br />
Duck.. There will be code<br />Duck.. There will be code<br />
My code..<br />YUI().use('charts', function (Y) <br />{ <br />varmyDataValues = [ <br />        {category:"5/1/2010", valu...
Ain’t that kick ass???<br />
Let us look at the examples page…<br />http://developer.yahoo.com/yui/3/examples/<br />
Questions???<br />
Some people I need to thank…<br />Christian Heilmann<br />GopalrathnamVenkatesan<br />
Harsha R. Vashishtmail@harsharv.com<br />http://www.harsharv.comhttp://twitter.com/harsharv<br />http://www.facebook.com/h...
Upcoming SlideShare
Loading in...5
×

Introduction to YUI - IIT Kharagpur

1,047
-1

Published on

Using YUI for hacks.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,047
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • How many have used YUI?How many have done FE dev?Design Patterns - Use
  • You can control on Server side..
  • 1. Used Banking and Share sites…
  • Crow Parrot
  • Introduction to YUI - IIT Kharagpur

    1. 1. YUI<br />Hack U – IIT Kharagpur<br />Harsha Vashisht<br />mail@harsharv.comhttp://www.harsharv.com<br />
    2. 2. The client side is where strange things happen.<br />
    3. 3. Browsers render in fascinating and totally wrong ways.<br />
    4. 4. Random code from dubious sources interferes with your godlike, clean and high quality code....and you fix more than you develop.<br />
    5. 5. The web is a total mess!<br />
    6. 6. To make things work for Yahoo! we needed to find a way to abstract these issues away from us.<br />
    7. 7.
    8. 8. And this is why we built the YUI.<br />
    9. 9. YUI is a framework to build working web applications. <br />
    10. 10. It includes CSS solutions to create layouts that work across browsers and allow for predictable typography. <br />
    11. 11. And it takes the pain out of writing JavaScript. <br />
    12. 12. Last but very much not least it allows you to create applications using tested and working widgets that extend what HTML gives us. <br />
    13. 13. Auto Complete<br />Data Table<br />Interface Widgets<br />Button<br />Layout<br />Menu<br />Calendar<br />Rich Text<br />Charts<br />Tab View<br />Container<br />
    14. 14. Everything is fully documented with around 300 examples!<br />
    15. 15. 1. Documentationhttp://developer.yahoo.com/yui/docs/2. Exampleshttp://developer.yahoo.com/yui/examples/ <br />
    16. 16. All YUI components come as a debug version which log everything that is going on to the logger.<br />
    17. 17. All in all YUI allows you to build web interfaces without having to know all the pain that goes on in the browser world.<br />
    18. 18. Now, lets have a look at what YUI has to offer.<br />
    19. 19. 1. Data Sourcehttp://developer.yahoo.com/yui/3/datasource/<br />
    20. 20. The DataSource Utility provides a consistent API for the retrieval of data from arbitrary sources over a variety of supported protocols.<br />
    21. 21. Remote sources<br />Polling<br />Caching<br />Events<br />
    22. 22. http://developer.yahoo.com/yui/3/examples/datasource/datasource_get.html<br />
    23. 23. YUI allows you to fetch data from YQL directly!<br />
    24. 24. http://developer.yahoo.com/yui/3/examples/yql/simple-yql.html<br />
    25. 25. 2. Auto complete<br />
    26. 26. http://developer.yahoo.com/yui/3/examples/autocomplete/ac_datasource.html<br />
    27. 27. 3. Data Charts<br />
    28. 28. Now.. I want to draw a graph..<br />
    29. 29. Duck.. There will be code<br />Duck.. There will be code<br />
    30. 30. My code..<br />YUI().use('charts', function (Y) <br />{ <br />varmyDataValues = [ <br /> {category:"5/1/2010", values:2000}, <br /> {category:"5/2/2010", values:50}, <br /> {category:"5/3/2010", values:400}, <br /> {category:"5/4/2010", values:200}, <br /> {category:"5/5/2010", values:5000}<br /> ];<br />varmychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});<br />});<br />
    31. 31. Ain’t that kick ass???<br />
    32. 32. Let us look at the examples page…<br />http://developer.yahoo.com/yui/3/examples/<br />
    33. 33. Questions???<br />
    34. 34. Some people I need to thank…<br />Christian Heilmann<br />GopalrathnamVenkatesan<br />
    35. 35. Harsha R. Vashishtmail@harsharv.com<br />http://www.harsharv.comhttp://twitter.com/harsharv<br />http://www.facebook.com/harsharv<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×