Yahoo! User Interface Blog (YUIBlog)

Crockford on JavaScript: A Public Lecture Series at Yahoo!

Since 2007, Douglas Crockford has been developing (and delivering) a lecture series on the JavaScript programming language. Many of those lectures have been recorded and made available as part of the YUI Theater video series. Douglas has delivered many of the talks at conferences around the world.

In the first few months of 2010, Douglas will be delivering the full series of JavaScript talks with updated content as part of an event entitled “Crockford on JavaScript”. The event will take place over five evenings in January, February, and March at Yahoo! headquarters in Sunnyvale, CA. Attendance is free, but seating is limited — a full schedule including links to RSVP is available on the event website.

Thanks to YUI engineer Allen Rabinovich for the poster design.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

iPhone Design Stencils in the Pattern Library

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Job Opening on the Yahoo! Sports team

Yahoo! Sports has reached 36 million unique visitors per month and dominates the Online Sports and Fantasy Sports industry worldwide. The site’s recipe for success: high quality content presented via rich and standard-compliant interfaces.

The Y! Sports experience is so engaging, users view over 2 billion pages per month — more than Fox, SI, and CBS Sports combined! To meet such high demands, Y! Sports stays at the forefront of Internet technologies by leveraging platforms such as YUI.

If you consider yourself an avid YUI user, the kind that can look under a component’s hood and start adding quality features, you’re well on your way to joining their team.

Email your resume, including portfolio URLs, to mediatech-hiring /at/ yahoo /dash/ inc /dot/ com (Principals only; no recruiters, please.) or find out more about the position.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

YUI Theater — John Resig: “Testing, Performance Analysis, and jQuery 1.4″

John Resig (@jeresig) of Mozilla, creator of the popular jQuery JavaScript library, stopped by Yahoo! on Friday for a BayJax meetup and delivered a three-part tech talk, “Testing, Performance Analysis, and jQuery 1.4″.

In the first part of the talk, John reviewed the range of tools available to frontend engineers for unit testing and for analyzing the performance of code. In the latter case, he argues for going beyond pure speed-based benchmarks to structural analyses of performance. By looking at structure, the jQuery team was able to identify and correct bottlenecks, resulting in major performance improvements in the upcoming 1.4 release.

In the second part of the talk (beginning at 49:20 in the video), John reviews some of those jQuery 1.4 changes. In the short third section (beginning at 1:03:15), he looks at some interesting trends he’s noticed in the practical application of new HTML 5 elements — especially in older browsers.

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater.

• Download video (m4v)
• Download slides
• A high-resolution, transcripted version of this talk is available on the YUI Theater site

Other Recent YUI Theater Videos:

• Luke Smith: Events Evolved — YUI engineer Luke Smith provides a deep introduction to the YUI 3 event system including its support for DOM events, event delegation, synthetic events, and custom events.
• Todd Kloots: YUI 3 Sugar — YUI engineer Todd Kloots presents an indispensable introduction to YUI 3’s powerful suite of tools.
• Douglas Crockford: The State and Future of JavaScript — Yahoo! JavaScript Architect Douglas Crockford discusses the recent ECMA5 development process and efforts to improve the language in the future.
• Brendan Eich: ECMA Harmony and the Future of JavaScript — Brendan Eich, the creator of the world’s most popular programming language, talks about the struggle over the ES4 proposal and how it resulted in a specific set of proposals for ES5.

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

YUI 2.7.0 on InsideLine.com

Here at Edmunds (Edmunds.com) we just launched a redesign of Inside Line (InsideLine.com), our automotive enthusiast web site, and we are using the YUI JavaScript library extensively.

Some of the YUI utilities & widgets used on Inside Line:

• Yahoo/Dom/Event
• Animation Utility
• Connection Manager
• ImageLoader
• JSON
• Selector
• Carousel
• TabView

We (the Frontend team) started out with YUI 2.7.0 JavaScript core and built our own JavaScript user interface library on top of it to encapsulate site-specific components and functionality. Our library takes advantage of YUI’s core utilities, including Dom, Event, Connection Manager, and Animation.

We are using Dom and Event extensively to handle DOM interaction, event listeners and custom event handling. The YUI Connection Manager is handling all of our Ajax implementations, including our custom search widgets. We are also using many of the YUI widgets on Inside Line, including TabView and Carousel, with custom skins. The YUI ImageLoader helped us improve page performance and meet our strict performance requirements.

We chose YUI because of its great documentation, thorough testing, and the scope and depth of its offerings. The library is easy to learn, understand, and implement. The modularity of the system fits in well with our design principles, and the API and custom events make it extremely extensible and easy to integrate.

Some Highlights

Multimedia Spotlight (tabview, carousel) from InsideLine.com:

Image and Video Galleries (core, JSON and Carousel):

Ajax Search Widgets (Dom, Event, Connection Manager):

Do you have a YUI Imlementation you’d like to share on YUIBlog? Check out our contribution guidelines — we’d love to hear from you.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

What’s New in YUI Test 3.0.0

A new version of YUI Test accompanied the release of YUI 3.0.0. YUI Test for 3.0.0 is more than just a port of the 2.x-compatible version of YUI Test, however, introducing several new features. These have come about as a result of developer requests and conversations I’ve had with those already using the tool.

Promotion of event simulation

Event simulation was originally introduced in the 2.x version of YUI Test via the YAHOO.util.UserAction object. As it turned out, developers really liked this functionality and found uses for it outside of the testing environment. As a result, the event simulation tool have been promoted to be a first-class member of the YUI 3.0.0 Event utility, accessible in a single method, Y.Event.simulate(). You can include the event simulation component by passing "event-simulate" into the YUI().use() method:

YUI().use("event-simulate", function(Y){
    Y.Event.simulate("#node", "click", 
                     { clientX: 25, clientY: 30});
});

Mock objects

YUI Test for YUI 3.0.0 introduces a new capability: creation of mock objects. Mock objects are useful to isolate your unit tests from dependencies. In complex software systems, there are often any number of pieces that rely on one another. The problem then becomes isolating which part of the system failed when something goes wrong.

For example, suppose you have a method called logToServer() that is to create an XMLHttpRequest object and send a message to the server. If your test includes the actual XHR object in an attempt to test the functionality, you have two major dependencies: the XHR object itself and the server. If either of these two dependencies fail, then your test fails even though it’s not your code that’s at fault. By using a mock XHR object, you can test the code in isolation and guarantee that it’s working. For example:

//create a new mock object
var mockXhr = Y.Mock(); 

//I expect the open() method to be called with the given arguments 
Y.Mock.expect(mockXhr, { 
    method: "open", 
    args: ["get", "/log.php?msg=hi", true]                             
}); 
 
//I expect the send() method to be called with the given arguments 
Y.Mock.expect(mockXhr, { 
    method: "send", 
    args: [null]                             
}); 
 
//now call the function 
logToServer("hi", mockXhr); 
 
//verify the expectations were met 
Y.Mock.verify(mockXhr);

This example creates a mock XHR object that is used in place of a regular XHR object. Once all of the operations have been completed, the code verifies that the expected methods that were called. The YUI Test mock object API is purposely minimal to be as clear and useful as possible. To learn more about mock objects in YUI Test, please see the documentation.

Friendly test names

YUI Test initially used the xUnit-style of test methods whereby each test method’s name must begin with test. YUI Test for 3.0.0 goes one step further, allowing you to specify friendly test names in additional the xUnit-style names. Friendly names are more sentences than anything else, and the only restriction is that name contains at least one space and the word “should”. For example:

var testCase = new Y.Test.Case({ 
     
    name: "TestCase Name", 
    
    //xUnit-style test name
    testSomeFunction: function(){
    
    },
    
    //friendly test name
    "Something should happen here" : function () { 
        ... 
    } 
});

Friendly test names allow you to describe the functionality being tested in a more readable way. Writing a phrase such as “Method should return 4 when passed 2 and 2″, and having that show up in the test results, makes it easier to interpret the test results and what else must be addressed.

What’s next?

YUI Test continues to evolve and grow as feedback is received from developers. There are several features currently in the works:

• More test result formats, such as JUnit XML and TAP.
• Code coverage gathering and reporting.
• Test automation using Selenium.

If you have ideas or feedback, we’d love to hear from you at YUILibrary.com, where you can file feature requests or start a discussion in the forum. With your help, YUI Test can continue to evolve to meet the needs of the ever-changing web development community.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Implementation Focus: Pattern Insight

About Pattern Insight

Pattern Insight provides powerful solutions to index, search, and analyze semi-structured data. By “semi-structured” we mean any type of system data — code, logs, scripts, and more.

Currently we have two major software suites: “Code Insight” and “Log Insight.”

Code Insight provides several unique capabilities for analyzing source code. At its core is a lightning-fast fuzzy snippet search which scales to billions of lines of code. With snippet search, you can paste in a snippet of code and find all similar snippets across your entire code base, even tolerating variable name changes or line insertions/deletions. Built on top of this fuzzy search capability is Patch Miner, an application for locating buggy code that needs to be fixed. You can input a bug fix and Patch Miner will find all other locations where that bug fix should be applied. Finally, we have Pattern Miner, a copy-paste and duplication detector. Pattern Miner can help you refactor your code base by automatically finding duplicated code, even when variable names have changed. It can also detect IP leaks across different codebases; e.g., if you use both open source and proprietary code and want to prevent code from flowing between them.

Log Insight is our next-generation log search and analysis product. Log Insight can index TBs of system data and provide sub-second performance for complicated search queries. Furthermore, it enables the creation of persistent signatures that can be used to scan new or archived data for instant matches. Log Insight can also automatically extract common patterns (e.g. for failures) that can then be codified as signatures back to the Pattern Insight engine.

The Importance of UI

We recognize that possessing great underlying technology is not enough to create a successful product. A good UI is absolutely essential if we want users to be able to see the value of our technology and take full advantage of it. Thus the requirements for our user interfaces drive much of the development of our backend technology.

As one example, a product like Patch Miner is heavily dependent on the UI to shape it. At its highest level, Patch Miner is a fairly abstract concept: “find all the places where a bug fix needs to be applied in my code base.” Turning this into a concrete UI provides quite a few unique design challenges. For instance, what exactly is a “bug fix” and what is the best way for a user to input it? And once Patch Miner has found a bug somewhere else, what’s the best way to present the result to the user? Solving these user experience problems has provided the road map for the development of the core Patch Miner application.

Using YUI at Pattern Insight

The UIs for Code Insight and Log Insight are fully web-based, and we are using YUI heavily to improve user experience. When we were initially trying to decide which JS framework to use, there were two things that sold us on YUI: the extensive documentation and the wide variety of ready-made components and widgets. We ended up making use of almost all of them: animation, autocomplete, button, calendar, connection manager, container, cookie, datasource, history, JSON, slider, tabview, treeview, loader, logger, test, and CSS base/reset/fonts/grids.

Maintaining High Performance in a Rich Application

Our main strategy in keeping our rich applications performant has been to develop our own web services API which we use to load data on-demand as much as possible. The built-in support for on-demand loading in YUI widgets like treeview has made this much easier for us. We also made the decision to stop supporting IE 6. This has enabled us to use much more sophisticated Javascript that modern browsers can handle but IE 6 can’t.

Most Interesting YUI Implementation Features

We’ve developed quite a few of our own custom widgets, including a multi-select list with filtering capability and an auto-resizing textbox that grows and shrinks based on user input. Things like auto-resizing might seem minor, but I think most users would agree that small things like this are often the difference between pain and joy when using an interface.

Additionally, purely from a development perspective, our use of the YUI loader makes it very easy to quickly write new pages. We can effortlessly drop in anything we want on a given page, either standard YUI widgets or our own. Essentially, at the top of each page we just need to call our own “loadModules” function and give it the list of components we want to use, plus a callback function:

YAHOO.PI.loadModules(['treeview', 'PI.SelectableList'], function() { …

We are still using YUI 2, but this works similarly to the new YUI().use function in YUI 3.

What’s Next?

We are currently hard at work on Code Insight 1.6, our next major release, which will come with some impressive improvements to Patch Miner. We are also actively developing the next version of Log Insight, which will include a brand new, highly sophisticated UI. Among the new features are a web-based signature editor with live syntax highlighting, autocompletion, and error checking.

If you’re interested in learning more about us, you can read about our products and check out some videos at our website: http://www.patterninsight.com. Also, feel free to email us at info@patterninsight.com.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!