Your SlideShare is downloading. ×
0
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Introduction to YUI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to YUI

6,706

Published on

My small presentation at Web Directions North 2009 introducing YUI as part of the "JavaScript Libraries Super Session"

My small presentation at Web Directions North 2009 introducing YUI as part of the "JavaScript Libraries Super Session"

Published in: Technology
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,706
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
217
Comments
1
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The Yahoo User Interface Library (YUI) Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org Web Directions North, Denver, Colorado, February 2009
  • 2. Let’s take a walk... ...on the client side
  • 3. The client side is where strange things happen.
  • 4. Browsers render in fascinating and totally wrong ways.
  • 5. Random code from dubious sources interferes with your godlike, clean and high quality code.
  • 6. ...and you fix more than you develop.
  • 7. The web is a total mess!
  • 8. The reason is that things seemingly work.
  • 9. However, you are not the web and neither is your computer.
  • 10. To make things work for Yahoo we needed to find a way to abstract these issues away from us.
  • 11. And this is why we built the YUI.
  • 12. It brings order to the chaos.
  • 13. What chaos?
  • 14. JavaScript is a part of a larger world. This is not the copyrighted photo you are looking for
  • 15. Browser Interaction with other technologies (CSS, Markup) Interaction with other scripts Interaction with the backend
  • 16. Interaction with the operating system. Interaction with the user (with unknown ability) Interaction with bad code (a.k.a. ads)
  • 17. YUI deals with all of this.
  • 18. Because it has to – we built it for industrial (Yahoo) strength.
  • 19. The first thing we needed to get are some sensible constraints.
  • 20. We did this with the Graded Browser Support: http://developer.yahoo.com/ yui/articles/gbs/
  • 21. This gave us a defined playground, and we were able to start tackling the other issues.
  • 22. The first thing to tackle before you can even hope to build interfaces are browser differences in CSS.
  • 23. There is no such thing as an “unstyled page”.
  • 24. There is no such thing as an “unstyled page”.
  • 25. Good luck working around that one.
  • 26. Unless you use reset.css http://developer.yahoo.com/ yui/reset/
  • 27. Starting with a blank canvas = good.
  • 28. What about typography?
  • 29. Make it work across browsers with fonts.css http://developer.yahoo.com/ yui/fonts/
  • 30. Even create layouts with grids.css http://developer.yahoo.com/ yui/grids/
  • 31. Grids gives you an amazingly large amount of options and layout permutations.
  • 32. YUI comes with a lot of tools to gain knowledge about what is happening under the hood of your application.
  • 33. YUI logger gives you a cross- browser console to show values.
  • 34. Death to alert()!
  • 35. You can even include the logger on the fly with a bookmarklet.
  • 36. http://blog.rajatpandit.com/sandbox/yuilogger/index.html
  • 37. If you need even more control, there is the YUI profiler. http://developer.yahoo.com/ yui/profiler/
  • 38. And the YUI test framework for test driven development. http://developer.yahoo.com/ yui/yuitest/
  • 39. On a code level, YUI comes out-of-the-box with namespacing.
  • 40. Which – if used correctly – keeps large amounts of code readable and maintainable.
  • 41. YAHOO.lang also comes with a lot of validation methods to ensure things are what they are.
  • 42. All in all YUI is a good choice for large, distributed teams.
  • 43. Built on agreed standards Separated into modules each dealing with one task (Core, DOM, Event,Animation, IO...) Constant reporting of what is going on Own debugging environment
  • 44. YUI is a framework to build working web applications.
  • 45. It allows you to create applications using tested and working widgets that extend what HTML gives us.
  • 46. Interface Widgets AutoComplete DataTable Button Layout Calendar Menu Rich Text Charts TabView Container
  • 47. Everything is fully documented.
  • 48. http://developer.yahoo.com/yui/docs/
  • 49. And there are almost 300 examples to look at.
  • 50. http://developer.yahoo.com/yui/examples/
  • 51. The controls are driven by custom events to allow for extending and monitoring them.
  • 52. All YUI components come as a debug version which log everything that is going on to the logger.
  • 53. All in all YUI allows you to build web interfaces without having to know all the pain that goes on in the browser world.
  • 54. What does the future hold?
  • 55. YUI3 http://developer.yahoo.com/ yui/3/
  • 56. Include on demand Multiple sandboxed instances in a page Modularity on CSS level (per element reset) Every event is a custom event
  • 57. Screen reader compatible widgets. Widgets extendable with plugins Framework (SDK) for own compatible widgets.
  • 58. The elevator lift pitch YUI is the system that Yahoo uses to build its web sites. It is constantly tested to work for the largest amount of users, free, open source and covers everything from design patterns to out-of-the-box widgets. It is modular and you can use only what you need. You can either host it yourself or get it from a network of distributed servers.
  • 59. http://isithackday.com/hacks/delhi/
  • 60. THANKS! Christian Heilmann http://wait-till-i.com http://scriptingenabled.org http://twitter.com/codepo8

×