Change Main component into an object

In this situation the Main acts as a controller but it isn't a Component in sense that it isn't organized in a main.reel folder with its own template.

Usually a component template is considered an internal detail of the component itself, this is why they are organized into .reel directories. It is the role of the component to define what its template is supposed to be.

In this case the main object has no "influence" over the template file (index.html) it controls, it is the index.html that includes the main object instead of the other way around.

A future suggestion is to transform the main object into a proper component by placing it into ui/main.reel along with index.html renamed to main.html.

Since main is no longer a component it doesn't draw and prepareForDraw isn't called. We can still use the templateDidLoad delegate method (that is invoked on all "owner" objects of a template) to prepare the UI.
Use InputText and event details to add users

One of the things I try to avoid is accessing the DOM inside the JavaScript object, this is because when we do it we're creating a DOM dependency from the object to the template.

Here I define an InputText component in the template so if in the JavaScript I need to access its value I use the component and not the DOM element. In the future it will be easier to give the HTML file to a designer, things will still work even if she/he changes the entire DOM structure.

But there is no need to access the InputText because we're able to define the information the Button sends with its "action" event.
We create a binding from the InputText.value to the Button.detail.username.
When the button dispatches an action event its detail object will be available in the event object as well.
Use condition components to show and hide elements

There's a component in Montage that allows the developer to show and hide elements. This way we can separate further the business logic from the UI logic.

We create a state in the main object that indicates if it is loading and then we bind that state to the Condition.condition property. When condition is true its contents are visible and when it is false its contents are invisible.

The two conditions created are "loadingCondition" that controls the "Loading..." text and "contentCondition" that controls the entire content.

"loadingCondition" just needs to bind directly to the owner.loading property but for "contentCondition" we want the reverse logic, so we use an InvertConverter that does exactly this. With FRB (the future bindings of Montage) this should be as simple as defining a binding with "!@owner.loading".

Now the main object is only responsible to maintain the state of its loading property and doesn't need to worry with how that will influence the UI, that logic resides in the template.

If in the future we need to add more UI artifacts related to the loading state we can just bind to that property and the main object does not need to be changed for something that is UI related.

The "montage-invisible" is a class that the Condition sets on the element when it is hidden, in order to avoid a flash I set it manually on the content because it is its initial state. This is only a problem with elements that are in the index.html, the browser will render the HTML before the JavaScript is able to kick in.
Use the Loader component and a Main component

Montage provides a Loader component that loads a specific component (by default main.reel) and waits until all dependencies are loaded before adding it to the document.

This way there's no need to manually manage the "Loading..." text and the content of the application.
Merge pull request #1 from aadsm/suggestions

Suggestions