Javascript for browser client-side applications has come a long way.  Some code development patterns have started to emerge for typical browser based applications.  React is a javascript framework that attempts to reduce the amount of new custom javascript needed for typical web site applications.

The following source code is used by the dynamic comments tutorial.html.  Click to reset comments list.

var converter = new Showdown.converter();

var Comment = React.createClass({
  render: function() {
    return (
      //  var rawMarkup = converter.makeHtml(this.props.children.toString());
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {converter.makeHtml(this.props.children.toString())}
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        //  console.error(this.props.url, status, err.toString());
        alert(this.props.url +  status + err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    //  update local state 
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});  //  also triggers display refresh
    //  push state update to server, update local state from server
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
	<h1>Comment Box</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />

      </div>
    );
  }
});

React.render(
  <CommentBox url="server.php?comments" pollInterval={10000} />,
  document.getElementById('content')
);