Yahoo! Releases OSS Ajax and Design Tools

Cocteaustin writes "Today Yahoo! released the Yahoo! User Interface Library. This library is comprised of a number of dynamic HTML utilities and controls for building rich web UIs and Ajax applications. They are made available under an open-source license. In addition, Yahoo! released the Yahoo! Design Pattern Library. This collection of design patterns for Web interaction is intended to provide Web designers prescriptive guidance to help solve common design problems on the Web. Both are free in both senses of the word."

I for one find that...

awesomely generous. Hope there are no patent string attached.

Re:I for one find that...

I seriously doubt that there are any real patents or other strings attached. I think this is more of a publicity and goodwill stunt more than anything else. As far as I can tell, there are no sophisticated components here, just the basic stuff that most AJAX developers already have in their toolkits.

The list of components is:

* Calendar
* Slider
* TreeView

That's a pretty small list, and all are components that are fairly common in AJAX circles.

The core utilities portion of the library is just Yahoo's convenience methods that help abstract away browser differences. Nice if you don't have wrappers like these already, but not very useful if you do. Many AJAX programmers will probably choose to stick with their own libraries.

A few things that come to mind that are missing from this library are:

* A text editor components
* DataGrid/Spreadsheet component
* Scrolling viewports
* Feature-rich DHTML replacements for buttons, lists, radio buttons, and other common controls.
* Application layout engine

I'm pretty sure that Yahoo! has these types of components, but isn't going to share as long as there is more value in keeping them secret.

All in all, it's a nice gesture by Yahoo!. Just don't expect a complete library. :-)

this is not a widget library

The important peices are *NOT* about widgets. This is about the ygPos,ygAnim and ygDom libraries which are invaluable to most people (at least me).
The animation systems are actually pretty awesome [dotgnu.info]. The cacheTween() functionality in there takes it very close to what I've been doing with flash previously.

Morover, Y! has been using these for the past 6 months on different browsers before they open sourced. That part is really what most people look at.

Yahoo is the new Google?

So, while Google is expanding its new evil empire, Yahoo is courting indie developers? Strange days on planet earth...

Re:Yahoo is the new Google?

Yahoo has always been like this, it's just people didn't notice while google was the new hotness. Seriously, they seem to be doing the Right Thing, and it's about time they got some recognition.

Re:Yahoo is the new Google?

Very true. Their developer APIs are the best of any major offering.

Check them out here [yahoo.net]

Their stated goal is to have startups use their APIs as the foundation for new sites/tech.

Really good stuff

I tried out some of the JavaScript code they are offering. It is a nice library of functions for web application development.

show me the money

With google's toys they all have mass appeal and drive traffic to the site, ultimately helping google's brokerage. This, while nice for some of us, doesn't. Why would Yahoo bother?

Re:show me the money

Because they want to improve their image in the open source community, making people think better of Yahoo! when it comes time to choose between Yahoo!, Google, and Brand X for their next enterprise service purchase. I also imagine that they could release code in the future that makes it easy to incorporate Yahoo!'s ad technology so that Web 2.0 developers can contextually-advertise and make money from their efforts.

Google's acts of "driving people to its site" do nothing for Google's bottom line. Google, like Yahoo!, is an advertising company which makes the vast majority of its income from other web sites besides their search engines / portals.

Very nice - great little library

Both pages are clear and the library actually looks very good. Usually, Yahoo is playing catch up to Google, or so it has seemed. This time, Yahoo gets the upper hand. Google is becoming Yahoo, and Yahoo is becoming what Google used to be. Good stuff!

Not that any of this is ground-breaking, but it is a nice little package.

Makes Google's download package from last month look pretty lame.

Yahoo UIL and Google Code pages

The Yahoo UIL page [yahoo.net] and the Google Code [google.com] pages are both useful and coincidentally look quite similar.

BSD license

Yahoo are releasing this stuff under the BSD License [yahoo.net].

Re:BSD license

It's a trick to avoid complaints from Richard Stallman -- this way he won't know what to denounce first, and he'll simply emit smoke.

When is a design pattern not a Design Pattern?

When it's a UI idiom...

Nice Accessibility

If you look through their Design Patterns you'll see that each has an Accessibility section. Very nice addition and often over looked.

thanks yahoo!

This is good to see. Reuse for GUI widgets is one area where reuse has had an impact, in fact, GUI widgets are the most commonly reused components. There are a number of vendors for things like VB controls.

The components and patterns Yahoo has released will speed up the development of feature rich sites for other organizations.

Prototype still rocks

After using prototype.js [conio.net] for a while now, its hard to switch to a fatter library which is what the Yahoo library seems like. Each one has their good points, and pieces missing, but I think if you decide to use either, you can't go wrong.

There are some good snippets in there though, and Yahoo has done a good job of introducing code and web services to the developer community, much much more that Google has.

The design patterns are a very very good thing to expose. Although many of us might have been using similar standards, it sort of brings a number of them under one umbrella and into one place.

Hurrah! Clap-clap!

I say, good show! As early comments have already noted it is indeed a strange month - in which Google is falling, losing popularity due to their stock prices and the whole China debacle, while Yahoo is rising, supporting OSS with a suprisingly useful package. I wonder if this is merely another bump in Google's ultimate victory or a shift in the paradigm, a potentially fatal one for Google. However, let this not take away from the original point of the article -- Congratulations, Yahoo!, and thank you. Your generosity will be remembered.

"Library", are you kidding me?

This is a collection of, count em, THREE main scripts folks. There are free libraries of javascript code out there with orders of magnitude more DHTML functions and scripts. Sure, Yahoo offers some derivatives of each of their primary functions, but one of the categories is a collection of "vented menuing" scripts that could have been written five years ago. Only a multi-national company bent on branding (and yes Google, you're in the same boad) could put up a page like that and call it a Library.

To be honest, I'm consistently frustrated by the status of OSS code with regard to the DHTML components necessary to support open source RIA technology. If you want to do a vented menu, have a slider control, or YADDA you can find about 450 million scripts scattered across the javascript repositories of the web.

What it comes down to is this; if you want to do a collapsible menu or drag and drop then you're in luck, we have the widgets in OSS for you! OSS RIA won't be feasible until SVG stabilizes and is as ubiquitous as the Flash plug-in.

-rt

Re:"Library", are you kidding me?

"Library", are you kidding me?

Indeed. Most of the posters obviously didn't do much investigation, or are not that familiar with AJAX development. This is the same stuff you've been able to get elsewhere for a LONG time. The Blueshoes [blueshoes.org] and ActiveWidget [activewidgets.com] collections are a lot more useful, albeit not entirely free.

To be honest, I'm consistently frustrated by the status of OSS code with regard to the DHTML components necessary to support open source RIA technology.

It's because the market is still young. For right now there's money to be made in DHTML controls. As long as that's true, programmers aren't going to be giving stuff away. (Hell, I've got my stash of super-secret components, and I'm willing to bet that you do too.) Once components become more commonplace, OSS libraries will begin appearing.

Re:"Library", are you kidding me?

I take it you haven't actually downloaded the code then. There are libraries for animation, DOM manipulation, drag and drop, XMLHttpRequest management and event handling (in addition to the slider, treeview and calendar widgets). That's 30 JS files, not including the examples. That's nearly 10,000 lines of code!

It's fully documented as well.

Bloody Breadcrumbs

Oddly enough I was putting breadcrumbs into a client's site when this story came up and I was just thinking "Jesus, breadcrumbs are a total waste of screen space. Why the hell do clients ask for them?" On the other hand, I've yet to find a use for Yahoo! either. Oh, well.

TWW

Oblig. Grinch

I for one welcome the new script (overlords), but I can't help myself (oh, and I tried) but point out that because of the nature of the technology (client side jscript) then there isn't actually a good way *not* to release the source code for re-use, at least for the Beer part.

Now I do think Yahoo has done a smart thing in doing this under a BSD license, but it's worth remembering that this might be because they don't really have a way to protect their IP anyway. You can muss up script to be less readable, but basically it has to execute and therefore scarf-up-able to those that want it.

If this was a server-side technology then I don't know if Yahoo would have been so willing to go both kinds of free? At the very least this messes with Microsoft's Atlas people's heads, so should be good to sit in the peanut gallery for this one.

Am I being too cynical for a Tuesday?

N/A

Please don't use the drag and drop

It breaks things on webpages and is really pissing me of on their my.yahoo.com site. If you don't need to drag and drop things, why have them? If you don't need to open a page in a new window, why do it? I'm starting to really hate some of this AJAX stuff.

Comments interesting and appreciated...

I sincerely appreciate the comments of those who know (much more than me) about web UI, techniques, technologies, and patterns. As a server-side engineer and developer, I don't spend a lot of time on the front end. It's nice to see how /.ers digest this type of information and re-present it from lots of angles.

With that said, I'd also like to say that the pages are pretty well done. It is obvious that a great deal of time and effort was spent conceiving, writing, and, producing these beginnings of libraries and instructions. I found the effort to be commendable and interesting.

For someone like me, these types of efforts actually help me understand quicker and keep me interested.

UI Controls

The UI Controls all looked nice and worked very well in Firefox 1.5.
Unless there's a Grand Hatch (tm) that we've all overlooked, I'll start using this right away*!

So, thanks Yahoo.

*) In this particular comment, "right away" is defined as "tomorrow, or any other time I feel like checking it out".

I wish I had these 3 years ago

.. Then I would not have created my own client side calendar.

I think my calendar is easier to use. And mine creates the div and checks to see if it already exists.

Someone now needs a UI Design tool that allows people to easyly integrate these into a design WYSIWYG mode.

Calendar foo = new Calendar('your_id');

Opera Users...

...can't access a number of Yahoo! pages (nearly anything apart from their search page) due to a browswer restriction on Yahoo's end. I wonder if this extends to their other material.

Design Tools? Bah!

Design Tools? Bah. Real men code by hand!

Good compatibility too, this is great!

Looks like at least the slider examples all work in Firefox, Safari, and Opera for me. This is great news!

I think a standard JS widget library is a definite good thing, and with a company like Yahoo behind it it will probably get more developer awareness and traction with the business folks too than what's been available up to this point from smaller developers.

BSD licensed too, so it's free in any sense of the word for any use (good for us half-commercial folks ;)).

Yahoo found a nice way to do js namespaces

Yahoo has found a nice way to do namespaces in Javascript. I think this could be used more widely by other developers.

Code:

YAHOO.widget.TreeView = function(id) {
    if (id) { this.init(id); }
};
 
YAHOO.widget.TreeView.prototype = {
    id: null,
    init: function(id) {
        this.id = id;
    },
}

Example:

objTree = YAHOO.widget.TreeView(1);

Damn...

Damn... ust after I had reverse-engineered and commented Google Suggest [google.com]

You think I kid.

Horay for Yahoo!

Isn't this great ? Yahoo! are giving us Free! Code!

Pity about the reporters they've shopped to the Chinese... They're probably quite uncomfortable right now. But hey, Free! Code!

Very Promising, A Little Amateurish

Great libraries, beautiful examples. But perhaps they are still working on the Yahoo! Code Forge where these "libraries" get version numbering, changelogs, full API documentation, bug reports, etc.

Maybe nobody else cares about these things the Javascript, but they would never release server-side code in a generic, rootless ZIP archive. So much promise here, but I'd wait to see some better change management before integrating these libraries into a production site.

(Full speed ahead on development, though!)

Stocks, Geocodes, Local XML

Yahoo offers a lot more than google in certain aspects. Yahoo provides Geocoding ability to turn addresses into latitude and longitude coordinates in an xml file format. same with their local search.

they also produce a CSV sheet for stock quotes.

but google does have the advantage in interface. google maps does beat all competition for example.

Too Bad Yahoo is Evil

Sounds like a nice set of tools.

Too bad Yahoo is Evil.

http://australianit.news.com.au/articles/0,7204,18 109221%5E15841%5E%5Enbv%5E,00.html [news.com.au]

http://www.google.com/search?hl=en&hs=9r4&client=f irefox-a&rls=org.mozilla:en-US:official&q=yahoo+ch ina+dissident+email&spell=1 [google.com]

Very Impressed!

The Design Pattern library is a fantastic resource for developers who want to do the 'right' (well, by Yahoo standards, anyway -- I find it very sensible at least) thing with their sites' user interfaces.

I've forwarded it to the designers here at work, hopefully I'll start to see some good come of it in our interface design :)

It's seriously great to see this kind of thing happening.

Hate to tell y'all this.....

.... But Google's had their AJAX Libraries opensource and available to the public for a LONG time (http://sourceforge.net/projects/goog-ajaxslt/ [sourceforge.net]). So Yahoo just got religated back to second-class. Nothing more to see here, move along. I for one, welcome my new google overlords.

Re:Yahoo, giving guidance on Web design?

you can completely customize every aspect of your Yahoo portal, and put drop RSS blocks onto it.. if yours is cluttered and useless, it's because you're too dumb to change it..

Re:Design Fixes.

Total Arse.

Patterns are nothing to do with languages. Patterns are not meant to fix problems in languages, they are conceptual repeating patterns, like 'the need to store', 'the need to display', 'the need to pass data'.

If your language of choice happens to implement one of these languages (roughly like struct or Object for the DTO pattern), then so much the better.

Justin.

Re:Design Fixes.

What language are you thinking of? Prolog or some other non-imperative language? I don't know Prolog, but I'm sure there are "design patterns" - time-tested ways of satisfying certain needs - even if they aren't the same as the ones use with imperative languages.

Re:Design Fixes.

NP-complete problems are pretty easy (i.e. linear) when you encode them in unary. (Base 1). The size of the encodings become exponetially large so the computation time to solve the problem is now linearly related to input size. It's all a question of finding the right language.

Re:So.... this is newsworthy?

Backbase also ins't free. There is a "free" version but if I do recall you cannot use their free version for any commercial Website. But then, their API is feature rich enough if you need this ability it may be worth the money to invest in their API.

Re:So.... this is newsworthy?

Is that the same Backbase that has "Your web browser is not compatible with the primary Backbase site. Find out which browsers are supported at the Compatible browsers page." at the top of the page, and whose demos are entirely broken?

Backbase support for Safari and Opera has been "forthcoming" for quite a while. It's not there yet. Which means that Backbase is about as useful as ActiveX for public websites.

Nice architecture. Once it actually works I'll pay more attention to it. Right now? Not even close.