Hello Server

This tutorial will show how to write a ''Hello Server'' application using ''React'' and ''Vaandroid''

Why

Writing the application in React allows:

Client-Side Benefits

  • Use a well-known language
  • Fast clients-side performance
  • Easy client-side testing
  • Easy CSS styling

Server Side Benefits

  • Leverage the Vaandroid API (security, storage, preferences, etc)
  • Push data from the server
  • Realtime connectivity with other devices

    Specifications

  • The user will be presented with a caption, text box, and button.
  • Pressing the button will send the text box contents to the server.
  • The server will respond to the message by updating the caption.

Steps

Create the React template.

This template pulls down the required libraries from CDN, and renders a component in a target div. Our source code is written in JSX and is rendered on-the-fly in the client browser.

{CODE(wrap="0" colors="text/javascript")} <!DOCTYPE html> <html lang="en">

</html> {CODE}

Implement the form

{CODE(wrap="0" colors="js")} class Form extends React.Component { constructor() { super(); this.state = { name: '' }; }

    render() {
        return <div>Please enter your name and press <em>Submit</em>.<br />
            <input placeholder="Enter your name here" on<x>change={e=>this.handleName(e)}
                   value={this.state.name}/>
            <button on<x>click={e=>this.handleSubmit()}>Submit</button>
        </div>
    }

    handleName(e) {
        this.setState({name: e.target.value});
    }

    handleSubmit() {
        al<x>ert('Hello ' + this.state.name);
    }
}

{CODE}

Implement the client-server interface.

Send the code to the server by calling vaandroid.send(...)

{CODE(wrap="0")}handleSubmit() { vaandroid.send('Hello ' + this.state.name); }{CODE}

Subscribe to the server's response by overriding vaandroid.receive(...)

{CODE(wrap="0")}constructor() { super(); this.state = { name: '', caption: '' }; vaandroid.receive = function (message) { this.setState({caption: message}); }.bind(this); }{CODE}

Wrap the template in a Vaandroid plugin

Install the plugin