• 3 Comments
• Bookmark
• Share

From its inception, YUI has been architected to be extremely modular and environment-agnostic, which makes it particularly well suited to serve as a foundation for Yahoo!'s Mojito, a part of the Cocktails project for the following reasons:

1. YUI’s core abstraction layer provides a consistent API across all supported environments allowing Cocktails, and hence Livestand to deliver components which can run on both the server and in client browsers across both the desktop and mobile devices.

2. YUI’s modular structure and dynamic loading support allow for well-encapsulated and highly granular components, promoting a high level of code reuse and maintainability for large-scale Cocktail applications, without burdening the end user with dependency management.

3. Conditional loading allows YUI, and applications built on top of it, to deliver implementations and code specific to the target environment – so Cocktails can deliver mobile or desktop or server based implementations behind a consistent API.

4. YUI’s application-level building-blocks provide the infrastructure to build robust, extensible apps efficiently, either on the client or on the server.

Some of these key features, which help drive Cocktails and Livestand are discussed in more detail below.

YUI Background

YUI is Yahoo!’s open-source and BSD-licensed JS/CSS framework for building richly interactive web applications. YUI boasts a wealth of documentation and a thriving online community that contributes code to the well-curated core library as well as to the rapidly evolving constellation of modules on the YUI Gallery. Built by frontend engineers at Yahoo! and contributors from around the world, it's an industrial-strength JavaScript library for professionals who love JavaScript.

As with most JS libraries, YUI started out providing a much-needed normalization layer for browser quirks and DOM APIs along with a set of widgets. However, YUI goes a step further by providing common application building blocks with a focus on code-reuse and extensibility, making it highly suitable for both client side and server side application development.

Environment Agnostic Abstraction Layer

YUI provides a consistent JS API that works seamlessly across all runtime environments, in a single library. We don’t need to offer a separate product for the mobile environment than the server environment, which allows us maximum code reuse across all environments.

Based on the granularity of the modules which make up YUI, and the ability to conditionally deliver modules based on the environment, we can deliver environment specific implementations where required, underneath a common API.

This is an approach YUI used even before server side JavaScript became a reality.

The IO API for example, could leverage native XDR in the browser if available, or delegate to a Flash based implementation if not, while maintaining the same consistent user API on top of both underlying implementations. Similarly, Graphics loads either the SVG implementation, or the Canvas implementation or the VML implementation to power it’s API, based on what the target browser can support.

Therefore, when NodeJS emerged as the de-facto SSJS environment, YUI was able to provide its familiar and consistent API without skipping a beat.

We’ll be able to leverage YUI’s modular and environment-agnostic architecture to now introduce a server-side file IO transport as a peer to these existing capabilities.

Loading Modules

YUI is comprised of modules, which represent granular bits of functionality that can be dynamically loaded at runtime to mix-and-match exactly what’s need to run a page, in a given environment, and nothing more (we don’t deliver IE6 abstraction code to Webkit based devices). By default, all files are delivered via Yahoo!’s CDN for maximum performance.

Our module architecture maximizes code reuse. For instance, date-math APIs can be a requirement of a Calendar widget, but can just as easily be used on the server as a standalone utility.

Application Infrastructure

Time and again we hear from our community how developers start with YUI by implementing a widget or two, but then quickly “graduate” to building full-scale, complex yet maintainable applications due to the power and ease-of-use of our infrastructural building blocks such as custom events, attributes, plugins, internationalization and data management utilities. These building blocks are tools that application developers in other environments naturally reach for, but have not been available in native JS.

YUI – A Solid Foundation

YUI’s modularity and adaptability makes it a suitable, solid foundation for application development. Its ability to provide consistency of development, modularity to meet your functional and performance requirements, adaptability to disparate environments – desktop to mobile to server – is an attractive and unique value proposition.

From the simplest to the most complex of requirements, YUI is more than capable of meeting the challenge. Yahoo!'s Mojito, using YUI, validates this premise by demonstrating it in a high-scale, high-capacity consumer application.

• 3 Comments
• Bookmark
• Share