Book Image

YUI 2.8: Learning the Library

By : Dan Wellman, Daniel Barreiro, Daniel Osvaldo Barreiro
Book Image

YUI 2.8: Learning the Library

By: Dan Wellman, Daniel Barreiro, Daniel Osvaldo Barreiro

Overview of this book

The YUI Library is a set of utilities and controls written in JavaScript for building Rich Internet Applications, across all major browsers and independently of any server technology. There's a lot of functionality baked into YUI, but getting to and understanding that functionality is not for the faint of heart. This book gives you a clear picture of YUI through a step-by-step approach, packed with lots of examples.YUI 2.8: Learning the Library covers all released (non-beta) components of the YUI 2.8 Library in detail with plenty of working examples, looking at the classes that make up each component and the properties and methods that can be used. It includes a series of practical examples to reinforce how each component should/can be used, showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces. It has been updated from its first edition with the addition of several chapters covering several new controls and enriched with lots of experience of using them.You will learn to create a number of powerful JavaScript controls that can be used straightaway in your own applications. Besides giving you a deep understanding of the YUI library, this book will expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS. The final chapter describes many of the tools available to assist you the developer in debugging, maintaining, and ensuring the best quality in your code. In this new edition, all the examples have been updated to use the most recent coding practices and style and new ones added to cover newer components. Since the basic documentation for the library is available online, the focus is on providing insight and experience.The authors take the reader from beginner to advanced-level YUI usage and understanding.
Table of Contents (18 chapters)
YUI 2.8 Learning the Library
Credits
About the Authors
About the Reviewers
Preface

What is the YUI?


The Yahoo! User Interface (YUI) Library is a free collection of utilities and controls, written primarily in JavaScript, which has been produced by the expert developers at Yahoo! to make your life easier as a web developer or frontend user interface designer.

It consists of a series of JavaScript and CSS components that can be used to quickly and easily build the rich and highly interactive applications that today's web consumer expects and demands.

The premise of the library is simple; often when writing JavaScript, you'll come up with a function that works perfectly in one browser, yet badly (or worse, not at all) in alternative browsers. This means that you'll often need a set of different functions to do exactly the same thing in different browsers.

This can be done for some of the major browsers without too much difficulty using standard object detection methods within if statements. However, this can lead to massively increased script files and unwieldy code that takes longer to debug and troubleshoot, and longer to write in the first place.

The YUI wraps both sets of code up into one object that can be used programmatically with one class, so instead of dealing with different sets of code for different browsers, you deal with the library and it makes the different calls depending on the browser in use.

Another important aspect of the library that I should mention at this point is its respect for the Global Namespace. All objects created by the library and its entire code run within, and can only be accessed through, the YAHOO Global Namespace object. This means that the entire library, including every utility and every control, and its numerous classes, create just one namespace object within the Global Namespace.

The Global Namespace is the global collection of JavaScript object names, and it is very easy to litter it with potentially conflicting objects, which can become a problem when code is shared between applications. The YUI library minimizes its impact on the Global Namespace while at the same time remains globally accessible by occupying a single name, YAHOO. However, for application code sandboxing is preferred and we shall show both techniques and mostly use the latter.

Essentially, the YUI is a toolkit packed full of powerful objects that enables rapid frontend GUI design for richly interactive web-based applications. The utilities provide an advanced layer of functionality and logic to your applications, while the controls are attractive pre-packed objects that we can drop onto a page and begin using with little customization.

Who is it for and who will it benefit the most?

The YUI is aimed at and can be used by just about anyone and everyone, from single site hobbyists to creators of the biggest and best web applications around. Developers of any caliber can use as much or as little of it as they like to improve their site and to help with debugging.

It's simple enough to use for those of you that have just a rudimentary working knowledge of JavaScript and the associated web design technologies, but powerful and robust enough to satisfy the needs of the most aspiring and demanding developers amongst you.

The library will be of interest primarily to frontend developers, as the main aim of the YUI is to provide a framework within which robust and attractive interfaces can be quickly and easily designed and built. It can help you to side-step what can otherwise be insurmountable compatibility issues.

There is no set standard that says you must know this much or that much before you can begin to use the YUI. However, the more you know and understand about JavaScript, the more the library will make sense to you and the more you will be able to gain from using it.

Trying to learn how to make use of the YUI without first knowing about the JavaScript language itself, at least to a basic working standard, is an endeavor likely to end in frustration and disappointment. It would be a great shame if a lack of understanding prevented you from enjoying the benefits that using the library can bring to both your creativity and creations.

So to get the most out of the YUI, you do need to have at least a basic understanding of JavaScript and the principles of object oriented programming. However, a basic working understanding is all that is required and those developers who have less knowledge of scripting will undoubtedly find that they come out of the experience of developing with the YUI knowing a whole lot more than they did to begin with.

The YUI can teach you advanced JavaScript scripting methods, coding, and security best practices, and more efficient ways of doing what you want to do. It will even help more advanced programmers streamline their code and dramatically reduce their development time, so everyone can get something from it.

For some, the YUI is also a challenge; it's an excellent opportunity for developers to get involved in a growing community that is creating something inspiring. The Firefox browser is a great example of an open source, community-driven, collaborative effort of separate but like-minded individuals. Some people may not want to develop web pages or web applications using the library: they may just want to be involved in evolving it to an even greater accomplishment.

I should also point out at this stage that like the library itself, this book expects you to have a prior knowledge and understanding of JavaScript, HTML, and CSS. While the use of the utilities, controls, and CSS tools will be explained in detail throughout the book, any HTML, CSS, or PHP code that is featured in any of the examples may not be explained in detail. Other skills, such as the ability to install and configure a web server, are also required.

Why the Yahoo! User Interface Library?

Using any JavaScript library can save you great amounts of time and frustration when coding by hand, and can allow you to implement features that you may not have the knowledge or skill to make use of. But why should you use the YUI rather than the many other libraries available?

To start with, as I'm sure you already know, Yahoo! is extremely well established, and at the forefront of cutting-edge web technology and frontend design principles. The utilities and controls provided by the library have already been tried and tested in their world-class service provision environment. Hence you know that the components are going to work, and work in the way that you expect them to work and that Yahoo! says that they will. The YUI Library is not a second-rate product, it is what Yahoo! uses.

The YUI library is not the only developer-centric offering to come from these world-class leaders and to achieve high levels of accomplishment and a following amongst developers. Apart from this, other very successful projects include the extensive Design Pattern library, Yahoo! Widgets, and the Yahoo! Query Language. They also have a wide range of APIs for you to experiment and work with, so they have already shown a commitment to providing open source tools designed to succeed.

Additionally, the library has already been publicly available for over three years and in this time has undergone rapid and extensive improvement in the form of bug fixes and additional functionality. Like the Mozilla and Firefox browsers, it has a huge, world-wide following of developers, all seeking to further enhance and improve it.

Other libraries seek to alter the JavaScript language itself, by building capabilities into the language that the developers felt should already have been present and extending the language in new and interesting ways. While these libraries can provide additional functionality at a deeper and more integrated level, their use can often be hampered by technical implementation difficulties. These will be too difficult to overcome for all but the most advanced and seasoned developers.

The YUI is not like this; it is extremely well documented, stuffed full of examples, and is extremely easy to use. It doesn't get bogged down in trying to alter the JavaScript language at a fundamental level, and instead sits on top of it as a complementary extension.

There's also no reason why you can't use the YUI library in conjunction with other JavaScript libraries if a particular feature, such as the rounding of box corners as provided by MochiKit for example, is required in your application but not provided by the YUI.

Graded browser support

Whichever browser you prefer, there's one thing that I think we can all agree on; all browsers are not created equal. Differing support and a lack of common standards implementation are things that have confounded web developers for as long as there have been web developers.

Although the situation is improving with agreed standards from the W3C, and we have better and more consistent support for these standards, yet we are far from being in a position where we can write a bit of code and know that it is going to function on any of the many browsers in use.

There may never come a time when this can be said by developers, but with the YUI, you can already count on the fact that the most popular browsers in use, on all types of operating systems, are going to be able to take full advantage of the features and functionality you wish to implement.

It doesn't, and can't be expected to support every single web browser that exists, but it does group together common browsers with common capabilities into a graded support framework that provides as much as it can to visitors no matter which browser they happen to be using.

Every single browser in existence falls into one of the defined grades; the most common class of browser are the A-grade variety of browsers, which the creators of the library actively support. These are modern, generally standards compliant and are capable of rendering in full the enhanced visual fidelity, and advanced interface functionality provided by the library as well as the inner core of content.

Though the number of browsers in this category is small, more than 95% of users regularly accessing Yahoo's sites use one of these. The YUI development team continually checks Yahoo's own statistics so that new browsers may be incorporated into or dropped from this category accordingly.

C-grade browsers are able to access the base or core content and functionality of the library components, but cannot handle the enhanced content. They are basically old, less capable versions of current browsers, or discontinued ones. These are browsers that are simply not supported by the library.

X-grade browsers are the ones that do not fall in the previous two categories. They are most likely to provide the full, enhanced experience. The most frequent cause for a browser to be in the X-grade list is that it does not have enough market share to justify devoting much time to test the YUI on it. A current example is Safari, which works fine in Windows, but it is not tested because it is an uncommon combination. Any browser that has not been extensively tested by the YUI development team is automatically an X-grade browser regardless of its capabilities.

Currently (in 2010 Q1), the complete spectrum of A-grade browsers supported by the library includes the following combinations of browser and platform configurations:

Browsers

Platforms

IE6, IE7, and IE8

Windows XP

IE8

Windows Vista

Firefox 3.0

Windows XP

Firefox 3.6

Windows XP, Vista and Mac OS 10.6

Safari 4.0

Mac OS 10.5 and 10.6

Google Chrome 4.0

Windows XP

These common configurations are able to make use of not just the core content of any applications we create with the YUI, but also all of the enhanced functionality brought on by the library. Any browser not on this list will still receive either an A or C-grade experience, but may be classed as an X-grade browser if it has not been extensively tested.

The graded browser support strategy is based on the notion of progressive enhancement as opposed to graceful degradation. Graceful degradation is a term that I'm sure you've heard at some point and involves designing content such that when it breaks in older browsers, it retains some semblance of order.

This method involves designing a page with presentation in your supported browsers as your main priority while still allowing unsupported browsers to view at least some kind of representation of your content.

Progressive enhancement approaches the problem of supporting browsers with different capabilities from the other direction by providing a core of accessible content and then building successive layers of presentation and enhanced functionality on top of this inner core of generalized support.

The following screenshot shows how the Rich Text Editor control appears in a C-grade browser. Older readers may recognize the browser used in this experiment as Netscape Navigator version 4—a browser popular approximately a decade ago.

As you can see from this example, the inner core of the page content is a standard HTML <textarea> element, which is displayed completely normally. The page doesn't break, but the high-fidelity content is not displayed. Using graceful degradation techniques, the browser would probably attempt to display the editor, but it would probably look very poor and would certainly not function.

The following screenshot shows how the editor appears in an A-grade browser:

In a capable, supported browser the library can transform the <textarea> element into the full Rich Text Editor control. Now the following screenshot shows exactly the same page in exactly the same browser but with JavaScript switched off:

Notice the similarity between a C-grade browser and an A-grade browser with JavaScript switched off.

The knowledge that has enabled Yahoo! to use the concept of graded browser support has been gained from the wide variety of user agents that hit their site every single day. They've been accessed by over 10,000 different software and platform configurations since they began focusing on by whom and how their portal is accessed. Approximately 96% of this total has received an A-grade experience when using the Yahoo! site.