App Framework

Jump to Table of Contents

The YUI App Framework is a rollup of the Controller, Model, Model List, and View components, combined to form a simple MVC-style framework for writing single-page JavaScript applications.

You can use these components separately or together to create anything from simple non-interactive views to rich applications with URL-based routing, data binding, and full client-server synchronization.

If you've used DocumentCloud's excellent Backbone.js framework, many of the classes and APIs provided by App Framework components will look familiar to you. There are important differences, though, and the App Framework takes full advantage of YUI's powerful component and event infrastructure under the hood.

Getting Started

To include the source files for App Framework and its dependencies, first load the YUI seed file if you haven't already loaded it. 

<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script>

Next, create a new YUI instance for your application and populate it with the modules you need by specifying them as arguments to the YUI().use() method. YUI will automatically load any dependencies required by the modules you specify. 

// Create a new YUI instance and populate it with the required modules.
YUI().use('app', function (Y) {
    // App Framework is available and ready for use. Add implementation
    // code here.
});

For more information on creating YUI instances and on the use() method, see the documentation for the YUI Global object.

Components of the App Framework

The app module is a rollup module consisting of the following individual components. These components may also be used individually if you don't need all of them at the same time.

Component Module Description
Controller controller

Provides URL-based same-page routing using HTML5 history (pushState) or the location hash, depending on what the user's browser supports.

Model model A lightweight Y.Attribute-based data model with APIs for getting, setting, validating, and syncing attribute values to a persistence layer or server, as well as events for notifying subscribers of model changes.
Model List model-list

An array-like ordered list of Y.Model instances with APIs for adding, removing, sorting, filtering, and performing other actions on models in the list. Acts as a bubble target for events fired by the models in the list.

View view

Represents a piece of an application's user interface and is responsible for rendering content and handling DOM events. Views are commonly associated with Models or Model Lists and are re-rendered when they change, although this isn't required.