New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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.

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.

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.

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.

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.

pyros2097 commented 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.

@dmitshur

This comment has been minimized.

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.

pyros2097 commented 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.

@myitcv

This comment has been minimized.

Member

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