YUI open for all !

2,685 views

Published on

YUI or Yahoo! User Interface Libraries is a rich collection of Javascript and CSS libraries that
can help a web developer create rich experiences and highly interactive web sites. The libraries
are open source and there is a active community around it.
YUI 2 was hugely successful with its large collection of utilities and Widgets. Many Yahoo! sites and non Yahoo! sites use these libraries extensively. YUI 3 is the latest offering from Yahoo! that is a much more extensible and powerful Javascript and CSS library. YUI 3 incorporates all the learnings from the experiences creating YUI 2 libraries and many web standards.
Todays talk is an introduction into YUI 3 as an Open Source Project and how a developer can get on to contributing to YUI. The talk will give various pointers and references that will allow some one to start exploring the YUI libraries, more specifically YUI 3.0

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,685
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

YUI open for all !

  1. 1. YUI 3 Open for all ! <ul><li>Subramanyan Murali </li></ul><ul><li>Coder, hacker, dreamer </li></ul>
  2. 2. <ul><li>Who am I ? </li></ul><ul><li>Yahoo! Frontend Engineer for 5 years </li></ul><ul><li>@rmsguhan </li></ul><ul><li>http://rmsguhan.com </li></ul><ul><li>YUI User </li></ul><ul><li>Speaker </li></ul><ul><li>Photographer </li></ul><ul><li>Hacker </li></ul><ul><li>Traveler </li></ul>
  3. 3. Yahoo! User Interface Libraries version 3.0 or YUI 3
  4. 4. YUI 3 is Yahoo!'s next-generation JavaScript and CSS library
  5. 5. Powers many Yahoo! Properties , any so many other web sites around the world
  6. 6. YUI 2.x was hugely successful
  7. 7. YUI 3 is intended to be more powerful , more feature rich and more Open
  8. 8. 2006 YUI project was started 2007 YUI 2.2.0, 2.3.0, 2.4.0 2008 YUI 3.0 pr1 & pr2
  9. 9. 2009 YUI 3.0 b1 launched YUI on GitHub YUI 3.0 released YUI 3.0 Gallery
  10. 10. http:// developer .yahoo.com/ yui /
  11. 11. So what is the big fuss ?
  12. 12. YUI 2 JavaScript core, utilities, widgets; CSS foundation including YUI 3 JavaScript core, utilities; CSS foundation; Gallery. YUI Compressor JavaScript core, utilities, widgets; CSS foundation including YUI Doc Build-time tool for generating API documentation YUI PHP Loader Flexible PHP js/css mgt. solution, includes YUI metadata; combos. YUI Builder Build scripts for generating YUI JS/CSS from source. YUI Theater Video library on the discipline of frontend engineering. YUI Test Comprehensive unit testing solution for any JS code.
  13. 13. All YUI projects are BSD-licensed and are available for forking and contribution on GitHub
  14. 14. <ul><li>Getting YUI 3 </li></ul><ul><li><script src=&quot; http://yui. yahooapis .com/ 3.0.0 /build/yui/ yui-min .js &quot;> </script> </li></ul>Seed File The YUI module is the single core dependency for all YUI 3.x implementations The YUI module contains loader functionality and a dependency calculator
  15. 15. Using the YUI() one can load all 3.0 utilities, widgets and other custom modules
  16. 16. <ul><li>YUI ( ) Core </li></ul><ul><li>YUI( config ).use(“ node ”,“ anim ”, </li></ul><ul><li>function( Y ) { </li></ul><ul><li>Y. Node ; </li></ul><ul><li>Y. Anim ; </li></ul><ul><li>} </li></ul><ul><li>); </li></ul>Any number of instances Custom module load can be configured
  17. 17. YUI 3 provides cool utilities that make development on the Browser easy and efficient
  18. 18. YUI 3 Core YUI object Node Event YUI 3 Utilities Animation Cache Cookie DataSchema DataSource DataType DragDrop Get History ImageLoader IO (XHR, XDR) JSON StyleSheet YUI 3 Widget Base Attribute Base Plugin Widget Plugins & widgets Overlay Slider FocusManager MenuNav YUI 3 CSS Reset Base Fonts
  19. 19. Well documented , lots of code examples
  20. 20. YUI and the Open Source
  21. 21. http:// yuilibrary .com/ gallery /
  22. 22. http:// github .com/yui/ yui3 /
  23. 23. Open Source code Status : ~ 1315 Builds ~ 3040 Commits ~ 20 Committers ~ 4000 Forum posts 1717 Downloads 422 Watchers 22 Forks
  24. 24. #yui IRC channel Twitter @yuilibrary
  25. 25. But Why ??
  26. 26. Open Source is all about community …
  27. 27. … I use your code, you can use mine …
  28. 28. … together we solve a problem and create something awesome !
  29. 30. “ I used to think the browser was the most hostile programming environment ever devised, but then I discovered programming for mobile” - Doug Crockford JavaScript architect
  30. 31. YUI aims to make development on browsers less hostile …
  31. 32. … and With a big community working on the problems, they get solved faster and better
  32. 33. Lot of powerful UI controls and experiences can be built out using YUI
  33. 35. http://freshcutsd.com/yui-slideshow/ http://www.linkedin.com
  34. 36. YUI Gallery allows all YUI developers to extend the library rapidly , adding modules that are accessible from any YUI 3 use() statement
  35. 37. How can I start contributing ?
  36. 38. 1 Get your source from GitHub and set up your work space
  37. 39. 2 Fix bugs on existing components or other gallery modules.
  38. 40. 3 Create a new YUI module and send it to the YUI team for approval
  39. 41. 4 Contribute some working examples or code samples
  40. 42. 5 Test components and File bugs
  41. 43. 6 Join the forum , participate in discussions and answer queries
  42. 44. 7 Write Test cases or update existing tests
  43. 45. 8 Raise bugs / Tickets for issues and feature requests
  44. 46. For more information http:// yuilibrary .com/projects/ yui3 /
  45. 47. Do all the hard work for free 
  46. 48. Thank You !
  47. 49. <ul><li>References </li></ul><ul><li>http://developer.yahoo.com/yui/ </li></ul><ul><li>http://yuilibrary.com/ </li></ul><ul><li>http://developer.yahoo.com/yui/theater/ </li></ul><ul><li>http://www.slideshare.net/davglass/contributing-to-yui </li></ul><ul><li>http://www.slideshare.net/caridy/building-yui-3-custom-modules </li></ul>

×