React.js bindings

[madelynnblue]

I've begun work on bindings for react.js (http://godoc.org/github.com/mjibson/react) but, as things currently are, they are unusable due to the generated size. A simple main function with just a println (no react bindings) generates about 2k lines and renders in about 15ms. The example linked in package there generates about 8.2k lines and renders in about 500ms, which is unusably slow. I assume it's due to the way I'm generating objects using the option funcs or something.

Why am I using option funcs, you ask? Because I can't figure out a better way to have react.js be useful. React objects have heavy use of this, and call into functions defined on the this object. It is silly to use interface{} everywhere when trying to call back into my own functions, because a major point of gopherjs is type checking, which that would defeat. Here's some example react.js code from a project of mine that I'd like to convert to gopherjs:

var Track = React.createClass({displayName: 'Track',
    play: function() {
        var params = {
            "clear": true,
            "add": this.props.key
        };
        $.get('/api/playlist/change?' + $.param(params))
            .success(function() {
                $.get('/api/cmd/play');
            });
    },
    render: function() {
        return (
            React.DOM.tr(null, 
                React.DOM.td(null, React.DOM.button({onClick: this.play}, "▶")), 
                React.DOM.td(null, this.props.key)
            )
        );
    }
});

The render function is a react.js required func. play is my own (thus I need some way to define these optional funcs on my go object). props is a react.js properties object that all of its components have. The onClick handler also references this.play. I'm not sure how to create bindings for gopherjs that feel natural in go and don't generate huge piles of code. I assume some of this is not clearly explained, so I'm happy to give more details. Any thoughts on how to improve this?

[ariddell]

I think if your baseline is the multi-megabyte emscripten downloads, this looks rather like progress.

[madelynnblue]

It's not. My baseline is writing react.js in normal javascript. I refuse to add 500ms to my page loads.

[neelance]

I totally agree, 500ms is bad. Have you used the -m flag for minification? Is gzip activated for the request in case you are testing over the internet? Or is the delay caused by processing the JS code?

[neelance]

Closing because stale. Feel free to reopen. :-)

I would suggest you to try to remplement react as structs in go and as small as possible like maybe implement it like this library https://github.com/developit/preact then it might be fast.

[dmitshur]

FWIW, there is another attempt at making React bindings/library at https://github.com/bep/gr.

Thanks! I've been searching for something like that since I had been planning on doing something like that as an experiment but didn't know where to begin. I guess awesome-go doesn't list every interesting idea there is and doing a manual search on github does the trick.

[myitcv]

I've also been working on https://godoc.org/myitcv.io/react

Further details, examples etc in the wiki https://github.com/myitcv/react/wiki