Page History

...

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 it 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 and 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 use many other frameworks to build their application. Just do a search for "ReactJS dialog" or "ReactJS 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 FlexJS 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 component. Here, for example, is a small ReactJS class that uses the value of its state to display one of two labels:

var Notice = React.createClass({
    getInitialState: function() {
		return {status: false, message: ""};
	},
	render: function() {
		if (this.state.status) {
			return <span class="Alert">{this.state.message}</span>;
		} else {
			return <span class="Normal">All is well</span>;
		}
	}
});

Whenever the Notice's state.status changes, ReactJS runs the Notice.render function which returns a <span> with an alert message or "All is well". 

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="AlertState" />
</js:states>

The component being developed is given two states: NormalState and AlertState. The idea is that when in AlertState, you will see a special message. In the NormalState, the message reads, "All is well". This is achieved by setting the state on a label:

<js:Label text.NormalState="All is well" text.AlertState="{alertMessage}" />

By adding the state to the property, FlexJS will set the component's property to the appropriate value (for NormalState, a static string, for AlertState, data-binding is used to produce a variable message).  To display it, you just set the component's currentSate:

currentState = "AlertState"

Suddenly the message changes from "All is well" to some alert message.

States can easily enhance your application's experience and are convenient to use. For a complex example, including transitions that use effects, look at the FlexJS Store demo that is packaged under "examples" with the FlexJS SDK.

Summary

While ReactJS is a new, powerful, and clever way to make browser-based applications, you are still left with developing and debugging JavaScript. While JSX adds more checking to your ReactJS source code, having a true compiler, with syntax and type checking, can save you a lot of time during development as well as improving the quality of the delivered code.more here