Migrate to React 16

[EugeneHlushko]

Migrating to latest react increases overall website performance and eases the further maintainability of the project. Also We possibly have an issue with Preact event system mock which sometimes doesn't fire onError for the image see #1924

Considering overall bundle size reductions and GZIP it doesnt make much sense to keep preact, also @bebraw dropper preact in antwar's latest versions as it wasnt working with webpack4 setup.

Dependency: #1964

As soon as #1964 is finalized and merged i can do the migration

UPDATE: It seems there is a branch already which does the migration, this is on hold until things getting clearer, see rebuild branch for more info.

[bebraw]

@EugeneHlushko Preact works just fine. You have to tune it like this: https://github.com/antwarjs/antwar/blob/master/smoketest/antwar.config.js#L9 . See the smoketest example configuration.

[EugeneHlushko]

But do we still need it when react's async rendering lands? 16.3 RC is already on npm so that might be too soon.

P.S. i saw in one of your commits where you commented out aliasing and stated something like this in the comment "preact doesnt work with webpack 4 ?"
P.P.S. sorry for jumping into conclusion :)

[bebraw]

@EugeneHlushko I had some troubles with Preact until I realized I have to implement that render hook. I would go with Preact for now given it's so much smaller than React. I wouldn't worry about the new async rendering semantics yet. I would optimize for bundle size.

[EugeneHlushko]

@bebraw I am not totally convinced that 32.6 kb GZ react 16.2 vs 3kb GZ preact makes difference when we include avatar based widgets on pages where each picture can be 4-32kb and the content is responsive on initial render as antwar already generated the markup during build.

As github pages does GZ by default i would still try to move out for React 16, which might also solve our current issue with onError failures.

But i can still do alias after the migration if everyone is up for Preact in this particular website scenario

[bebraw]

Ok. Even better, we should find a neat way to separate React and react-dom to a shared vendor bundle. I have a feeling it's quite easy to pull this off through webpack configuration (externals) though I may have to extend Antwar somehow to do this in a neat way.

If we do this, the size difference doesn't matter as the outcome is more or less the same.

[EugeneHlushko]

Or that might be a cachingGroup in optimization.splitChunks ? I will look to it in this Issue when webpack 4 migration is merged

[bebraw]

@EugeneHlushko That's what I mean. It's good to remember Antwar bundles twice which makes this a little tricky. The first phase generates a bundle it calls in different ways to render individual pages. During this second phase it bundles the interactive bits. Maybe cachingGroup for React and react-dom during the first phase would be enough as long as there's a way to inject a reference to the resulting bundle in the second phase.

[EugeneHlushko]

ok thats why you mentioned externals, didnt realize at the start 👍 i will ping you when PR is up if you dont mind @bebraw

[bebraw]

@EugeneHlushko Ok. Open an issue at Antwar repo and I'll try to setup a small example to follow.

[EugeneHlushko]

done in rebuild branch

[montogeek]

@EugeneHlushko rebuild branch uses React 15.6.1

[EugeneHlushko]

@montogeek it says ^16.2.0 for both react and react-dom on latest rebuild branch in package.json