Declarative component sugar for event-driven RequireJS apps

Download Aura v0.9.2 Download Boilerplate

Everything is a Component

An Aura component represents a unit of a page. An independent block of reusable code, wrapped up so that it works well on its own or together with other components.

Specify a component source, and you can just start including them in your page on demand with data attributes.

See More

Messaging & Sandboxing

Aura Events give components a rich way to communicate between each other at a global or local level. Subscribe, unsubscribe and emit sandboxed event notifications.

An Aura sandbox is the layer between you and your library. It gives you the flexibility to switch out libraries with greater ease.

See More

Easily extend capabilities

Aura Extensions help you extend the core capabilities of your app before any of your components load. Want to ensure all of them have access to a particular library, like Backbone, or an API wrapper, like GitHub?

It'll make them available via the component's sandbox so you don't have to worry about importing and setting this up yourself.

See More

Examples

Let's define the simplest possible component. We'll call it cats. This loads in a template cats.hbs used to represent some UI:

1
2
3
4
5
6
7

define(['text!./cats.hbs'], function(template) {
  return {
    initialize: function() {
      this.html(template);
    }
  };
});

Our component cats can now be included on a page using an HTML tag and the data-aura-component attribute:

1

<div data-aura-component="cats"></div>

You can also pass options to your tag to configure the component via data-attributes, too:

1
2
3
4

<div data-aura-component="cats" 
     data-aura-foo="bar" 
     data-aura-other-option="hihi">
</div>

These will then be available in your component instance as:

1
2

this.options.foo          // -> bar
this.options.otherOption  // -> hello again

The Aura Mediator supports global and sandboxed event messaging. These allow components to communicate with each other by subscribing, unsubscribing and emitting event notifications. Namespaces, wildcards and more are supported.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

define(['text!./cats.hbs'], function(template) {
  return {
    initialize: function() {
      this.sandbox.on('cats.update', this.render, this);
    },
    render: function(stats) {
      this.html(template(stats || {}));
      this.$el.find('button').on('click', _.bind(this.clearKitty, this));
    },
    clearKitty: function() {
      this.sandbox.emit('cats.clear');
    }
  }
});

Aura also comes with the awesome ability to load components on demand from different sources. Doing this:

1
2
3

aura({ 
  sources: { default: 'https://another.doma.in/path/to/my/components' } 
}).start();

...lets us load all sorts of other components from this end-point:

1
2
3

<div data-aura-component="dogs"></div>
<div data-aura-component="fish" data-aura-home="bowl"></div>
<div data-aura-component="rabbits" data-aura-eats="carrots"></div>

It's framework-agnostic

Aura is built to be framework-agnostic — you can use it with or without your favorite JS framework.

Aura works well with popular frameworks including Angular, Backbone, Ember and more…

Aura Architecture Diagram
Download Aura v0.9.2 Download Boilerplate