Page History

This page is under construction is not complete.

Comparison

This page describes FlexJS for developers that have familiarity with ReactJS. If you are unfamiliar with RectJS, <<you can find out about it here>>. In particular, we'll look at the relationship between JSX and FlexJS.

...

var Message = React.createClass({
    render: function() {
        return <span>{this.props.label}</span>;
    }
});

The ReactJS class render function is called whenever the class property, label, is changed. You would put this into play by doing something likethis:

ReactDOM.render(
    <Message label="Hello, World" />,
    document.getElementById('top')
);

...

<js:Container xmlns:js="library://ns.apache.org/flexjs/basic" xmlns:fx="http://ns.adobe.com/mxml/2009">
    <fx:Script>
    <![CDATA[
        [Bindable]
        public var label:String;
    ]]>
    </fx:Script>
    <js:beads>
		<js:ContainerDataBinding />
	</js:beads>
    <js:Label text="{label}" />
</js:Container>

You would put this into play doing something like this:

<local:Message label="Hello, World" />

...

return <span>{this.props.lable}</span>;

Instead of returning props.label, you accidentally misspelled is as 'props.lable'. When loaded into the browser, there would be no error detected. Only when the class was loaded using ReactDOM.render() would the error be detected and that would only be a problem determined by the lack of the label. There is no real error except one of omission. A small typo could lead to a long debugging session.

...

If you are only using a simple text editor the command line to compile your code, the compile will detect the mistake before you can run the code.

Going Further

When looking through the myriad articles on ReactJS, it becomes clear that its fresh approach to UI composition allows developers to many other frameworks to build their application. Just do a search for ReactJS dialog or pop-up views and many solutions present themselves. But most, if not all, are awkward or cumbersome to produce.

With FlexJS there are also several techniques, but offers a straightforward design and presentation method: states. The concept of a state in FlexJS is different than that of ReactJS, although at a conceptual level, they both imply the current state or setting of the application. 

In FlexJS, the UI is always in a state. That is, what you see on the screen is being shown through a filter that displays only those UI components which are allowed to be seen in the current state. An example makes this clearer:

<js:states>
	<js:State name="NormalState" />
	<js:State name="LoginState" />
</js:states>

The component being developed is given two states: Normal and Login. The idea is that when in LoginState, you will see a dialog to ask for login credentials. In the NormalState, the dialog does not appear. This is achieved by setting the state on the definition of the Login:

<js:Container id="loginBackground" includeIn="LoginState" className="LoginBackground">
    <!-- items in the login dialog -->
</js:Container>

By adding includeIn="LoginState" to the Container element, FlexJS will only show this component (and its children) when the application's state is set to "LoginState".  To display it, you just set the component's currentSate:

currentState = "LoginState"

Suddenly the login dialog appears. You can even control its appearance with transitions:

<js:transitions>
    <js:Transition fromState="NormalState" toState="LoginState">
		<js:Fade alphaFrom="0" alphaTo="1" />
	</js:Transition>
	<js:Transition fromState="LoginState" toState="NormalState">
		<js:Fade alphaFrom="1" alphaTo="0" />
	</js:Transition>
</js:transitions>

The two transitions - one for each direction (into and out of the LoginState), declare the use of the Fade effect to make the components in the LoginState fade in and out. Just the presence of the transitions and their connections to the states is enough to hook things together. The application just changes the currentState to LoginState or NormalState to make the login dialog appear and disappear.

Summary

Add more here