search

intermine / bluegenes

A friendly next-generation interface for Genomic data discovery powered by InterMine
http://bluegenes.apps.intermine.org
Other
76 stars 56 forks source link

Provide ReactJS as part of tool API #398

Closed heralden closed 5 years ago

heralden commented 5 years ago

Many of the bluegenes tools include React as part of their bundle. This adds about 300KB to the bundle size of each tool.

It should be possible to allow the tools to leverage React as it is included in bluegenes through re-frame/reagent. A simple way to do this would be to use reagent/adapt-react-class. With this, one would need to have tools export a React component instead of a main function. We would probably have to add a key to config.json, like react: true, to specify that the tool provides a React component.

yochannah commented 5 years ago

Sounds sensible.

What planning will we need to do for version upgrades? Right now, if we want to update react / reagent / re-frame, there is no problem doing so. Is it possible we might break tools completely if we upgrade our react version in the future?

Maybe we can mitigate this in some way, or maybe provide it separately to Reagent - this would still result in some duplication (reagent+re-frame+react+bluegenes) + separate react + tools, but still fewer copies of react than if it's built in to all tools.

Definitely open to other suggestions as well.

heralden commented 5 years ago

React has good backwards compatibility. I think we're talking around 5 years before changes is required to support a new version. When that time comes, we can either update the tool's code or have it bundle in its own legacy version of React.

heralden commented 5 years ago

The solution was to add

    externals: {
        react: 'window.React',
        'react-dom': 'window.ReactDOM'
    }

to the webpack config of all tools currently bundling React. I have also commited this to the React webpack config that https://github.com/intermine/generator-bluegenes-tool/ provides.

As a note to anyone exploring this in the future, my initial attempt at making a tool that exports a React component and using reagent/adapt-react-class didn't work. I kept getting the Functions are not valid as a React child error when the component got rendered, after the script tag had run and placed it on window.

The solution I ended up with seems to work just as well, except it doesn't require changes to config.json, the tool's code and bluegene's tool API code.