YUI Programming: One of The First JavaScript Libraries

During the first years of the Internet, web pages were quite boring. Users who browsed them came across web pages they could not interact with much, since they contained only text, images, and links.

As the web’s popularity grew, there was more demand for pages users could interact with. Consequently, languages such as JavaScript grew in popularity. JavaScript allowed developers to create widgets and plugins for users resulting in dynamic websites. For example, with the language, developers could decide a web page’s behavior based on the location of a mouse click.

Eventually, JavaScript grew to be very complex. As a result, JavaScript libraries were created to make development easier. One such library was the YUI or the Yahoo User Interface Library.

The development for the library was started by a Yahoo! employee, Thomas Sha, back in 2005. The goal of YUI was to provide an interface to easily manipulate web pages through JavaScript that was compatible across all browsers. The library contained numerous features including processing of browser cookie data, handling browser events, and reading form data.

Yahoo! released major versions in 2006 and 2009, with the last release in 2014. YUI was halted as a result of declining interest among developers and an increased usage of server side scripting through libraries like Node.js.

YUI Tutorials

These tutorials will help beginners get started with the YUI library.

• YUI Introduction Slides provide an introduction to the library aimed toward beginners and was presented by Christian Heilmann at Web Directions North 2009.
• Create Rich Interface with the YUI Library is a step by step tutorial from Wired Magazine that describes how to add rich features to a web page such as carousel controls and calendars.
• YUI 3 Changes is an article that provides details on some of the differences between YUI 2 and YUI 3.
• YUI Skinning describes how to change the “look and feel” of widgets and controls from YUI.
• YUI Examples provides tons of examples developers can use to get started with YUI development and create rich interfaces.
• An Introduction to YUI provides information on YUI library features including DOM, event handlers, animation modules, and Ajax requests — complete with code examples.

Developers can also take a look at the following video tutorials to help learn YUI:

• YUI Basics is a video tutorial that provides and overview of the YUI library.
• YUI DataTables is a video tutorial provides an overview of the DataTable components. It includes code examples, and is presented by one of the engineers who worked on YUI.
• YUI Mojito shows how developers can create web applications using the Mojito, an MVC (Model View Controller) framework for YUI.
• When Not to Use YUI is an entertaining but informative video tutorial that demonstrates what situations warrant the use of YUI.
• Events Evolved presents a talk by Luke Smith on handling DOM, synthetic, and custom events using YUI. Web applications are largely event driven so this is a tutorial worth checking out.

Additional Learning Resources

Many sites offer tutorials covering a broad range of topics related to YUI. Here are some websites that beginning and advanced developers will find useful.

• YUI Library Website is a website that features many articles on the YUI library. By browsing this website, developers will be able to get quickly started with development of YUI based applications, view documentation, view tutorials, and chat with the rest of the developer community on YUI topics.
• GitHub not only stores various code repositories for YUI, the website also feature tutorials on changing the look and feel of various widgets and making code modifications.
• AlloyUI includes several tutorials with in-depth code examples using the AlloyUI library which was built on top of the YUI3 library. Developers visiting the website can download the libraries and learn how to implement many features including carousels, progress bars, and data tables.

Books on YUI

Unlike many other languages and libraries, there are just a few good books on YUI. They give a complete introduction to YUI and provide some in-depth examples.

• Learning the Yahoo! User Interface Library (2008), by Dan Wellman, provides developers with a good overview of YUI with detailed examples. Developers reading the book will get exposed to beginner and advanced concepts. No prior experience is assumed.
• YUI 3 Cookbook (2012), by Evan Goer, features multiple snippets of code or “recipes” that solve specific problems that developers can directly use on their projects. Some of the examples in the book include ways to create animations, debug code, create components, and handle events.
• Professional JavaScript Frameworks: Prototype, YUI, ExtJS, Dojo, and MooTools (2009), by Orchard, et al, features an overview of various frameworks including YUI as well as code samples. With this book, developers can learn how to create UI effects like drag and drop, use the CSS tools, and create widgets with YUI.

Alternative Resources

Since the last release of YUI was in 2014, developers may want to consider alternative frameworks. Some popular alternatives include jQuery, which is used in a majority of websites. Here are some jQuery resources to consider.

• W3Schools jQuery Tutorial teaches developers many of the library’s features including basic syntax, implementing event handlers, and selecting HTML elements. W3Schools also allows developers to modify and execute code on the website itself.
• jQuery Course is an online class from CodeCademy for developers to learn the basics of the library and implement projects.
• Udemy jQuery Course is an intense “bootcamp” course that will take developers through the fundamentals of JavaScript and jQuery. The course includes several source code files that can be used and is regularly updated.

Is it Worth Learning YUI?

Though the development of YUI was discontinued by Yahoo, learning it could still improve your skills. By learning YUI, you gain an exposure to another framework model. Learning this framework can help you understand similar libraries such as jQuery or AngularJS.

Learning additional frameworks also helps reinforce understanding of commonly used software design patterns. For example, YUI uses the Model View Controller system that is used in other libraries. Finally, since web frameworks such as YUI are open source, developers can understand web browsing and JavaScript fundamentals by examining the source code of frameworks.

Further Reading and Resources

We have more guides, tutorials, and infographics related to coding and website development:

• Composing Good HTML: this is a solid introduction to writing well-formed HTML and using HTML validator software.
• CSS3 — Intro, Guides & Resources: this is a great place to start learning webpage layout.
• Learn and Master jQuery: our introduction to jQuery.

What Code Should You Learn?

Confused about what programming language you should learn to code in? Check out our infographic, What Code Should You Learn? It not only discusses different aspects of the languages, it answers important questions such as, “How much money will I make programming Java for a living?”

What Code Should You Learn?