React.js bindings #118

Closed
mjibson opened this Issue Nov 2, 2014 · 8 comments

Comments

Projects
None yet
6 participants
@mjibson

mjibson commented Nov 2, 2014

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

This comment has been minimized.

Show comment
Hide comment
@ariddell

ariddell Nov 2, 2014

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

ariddell commented Nov 2, 2014

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

@mjibson

This comment has been minimized.

Show comment
Hide comment
@mjibson

mjibson Nov 2, 2014

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

mjibson commented Nov 2, 2014

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

@neelance

This comment has been minimized.

Show comment
Hide comment
@neelance

neelance Nov 2, 2014

Member

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?

Member

neelance commented Nov 2, 2014

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

This comment has been minimized.

Show comment
Hide comment
@neelance

neelance Dec 23, 2014

Member

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

Member

neelance commented Dec 23, 2014

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

@neelance neelance closed this Dec 23, 2014

@pyros2097

This comment has been minimized.

Show comment
Hide comment
@pyros2097

pyros2097 May 9, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@dmitshur

dmitshur May 9, 2016

Member

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

Member

dmitshur commented May 9, 2016

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

@pyros2097

This comment has been minimized.

Show comment
Hide comment
@pyros2097

pyros2097 May 10, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@myitcv

myitcv Mar 21, 2017

Contributor

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

Contributor

myitcv commented Mar 21, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment