React alternatives / Preact support

[necolas]

Support for React alternatives would be interesting. Preact could make for significantly smaller bundles. It would perhaps involve changes to preact-compact to support capture phase events and the ResponderEventPlugin, or alternative implementations of the plugin. Let me know if anyone else is interested in this and figuring out how to get there.
/cc @developit

[indexzero]

Howdy. We've been using this a bunch for react (web) and react-native interop. Thanks for all your hard work!

Seems to me that a good place to start would be enumerating all of the explicit imports similar to:

import Whatever from 'react-dom/lib/Whatever.js'

Once all the explicit dependencies are known, it would be more straight-forward to outline the API surface area for such a compatibility layer.

Thoughts? I'm relatively new to the project ... would be happy to help build / provide this if it seems like the right approach.

[developit]

Oi, long time no see @indexzero 😎

Are either of you two able to point me to where ResponderEventPlugin is implemented? Regarding capturing/noncapturing events - that might actually get implemented in Preact core, so preact-compat would get it for free!

Right now Preact uses a whitelist of event types for which it will always register capturing handlers, but since whitelists are a size penalty I think we might end up just allowing the on*Capture prop syntax and removing the whitelist entirely.

[necolas]

Closing this as I'm going to focus on the changes coming with Fiber #364

[jwickens]

react-lite support would also help greatly in reducing bundle size (by more than 100kb in my current project after uglify). The biggest issue is the ResponderEventPlugin which does not exist in react-lite.

[necolas]

What is "react-lite"?

[jwickens]

@necolas This is react-lite https://github.com/Lucifier129/react-lite

The build size is enormously smaller considering it is a drop in replacement for both react and react-dom and minified is only 25 kb. Current versions of react and react-dom minified combined are about 140kb so you're looking at about saving 100kb of JS sent over the wire.

See for http://elijahmanor.com/react-file-size/#linechart_material current react sizes

With fiber coming along however I could see react-lite also having to implement this and to be honest the benefits of fiber seem like they would outweigh 100kb of sending a file once. I'd rather have a faster client than a faster load time in the mid-term.

However if there was an easy way to not rely on the ResponderEventPlugin or a small polyfill that would be stupendous.

[necolas]

I don't think there is an easy way to not rely on the ResponderEventPlugin. Furthermore, React alternatives don't always have good runtime performance across the spectrum of use cases, which is another reason I stopped investigating ways to support them being used as replacements for react in RNW.

you're looking at about saving 100kb of JS sent over the wire

You should be using compression formats over the wire though.

[jwickens]

you're looking at about saving 100kb of JS sent over the wire
You should be using compression formats over the wire though.

Yeah you're right. In the react case its 45 kb gzipped and in the react-lite case its 10kb gzipped.

[SuhairZain]

@necolas I've looked at the linked issues, but it did not become clear to me. Apologies if this has been concluded somewhere else. In the end, was the decision that looking into ways to support React-like libraries(preact etc) was not worth it? Or is there a way to make something like Preact work with react-native-web?

[necolas]

Yes, not worth it and we're working on more fundamental integrations with React's new features

[johnsonjo4531]

Just an update for anyone still looking at this thread: looks like React alternative and Preact support is now available in 0.13.0

[cj]

@necolas @johnsonjo4531 it mentions "However, it should be noted that benchmark rendering of 0.13 with React DOM is a lot faster than Preact." Do you know where I'd be able to see or run those benchmarks, I'd love to see the difference. If it is that much slower, I wonder if it's something the Preact team and @developit would be willing to look into.

https://github.com/necolas/react-native-web/releases/tag/0.13.0

[necolas]

Fork the repo and alias react to preact/compat in the benchmarks package yourself

[developit]

We are looking into it.

[necolas]

Note the "benchmarks" are used more like "canary in the mine" early warning tests for CSS libraries. Didn't really expect much runtime difference between React/Preact. But they were running slower in each case so perhaps they will help surface something interesting

[redbar0n]

@developit what did you find out? what is the relevant issue in the Preact repo?

[necolas]

Locking as this is over 2 years old