Advanced React integration about webpacker

[dhh]

Hey. I think having a webpacker-react gem would be great for this level of integration. I think it's fine for Rails to keep the simple "hello world" style generator, but then have something more advanced in webpacker-react. Can just trigger on its own ala rails webpacker:install:reactplus or whatever is different from the basic version.

So please do investigate!

[justin808]

first of all, thanks for pointing that and for the effort on react_on_rails.

You're most welcome. Please contribute! 😄

As far I remember, react_on_rails born as an alternative over react-rails without the jQuery dependency. Right?

Nope, not at all. It's about using webpack rather than the asset pipeline.

Does react-rails still use jQuery?

I'm not sure about their project.

Do we need similar 3 gems to tackle the same needs? I mean, react-rails, react_on_rails and webpacker-react do exactly the same thing in a very same way (API). Except webpacker-react that still doesn't have some features yet.

https://github.com/shakacode/react_on_rails and https://github.com/shakacode/webpacker_lite are all you'll need!

Please, don't get me wrong, I'm not against or in favor of any of those three gems over the others. I remember when we had rails and merb doing the same thing (with slight differences) and then were merged into a single project (rails). Maybe that's the time to think about merging these 3 gems...

There are fundamental differences in architecture. It would not make sense to merge them.

• react-rails => uses asset pipeline rather than webpack config
• webpacker => uses webpack, but don't make anybody configure webpack
• react_on_rails => provide an example of webpack and know that most production projects require customization of webpack

[evolve2k]

I'll add my 2 cents. I originally started my Rails react project using react-rails, but was very frustrated to find out that it poorly supported the broader npm/webpack ecosystem and handled js packages in a very rails way. The biggest drawback was that it was very hard to integrate redux into react-rails at the time.

I then shifted to react_on_rails to get redux & webpack (at the time) supported out of the box.

react_on_rails has a project objective:
To provide an opinionated and optimal framework for integrating Ruby on Rails with modern JavaScript tooling and libraries, including Webpack, Babel, React, Redux, React-Router.

Do we think that the inclusion of webpacker in Rails now opens the door to easily integrate the above JS libraries into rails projects?

I'm currently on react_on_rails but working out my upgrade path.
Option 1) Stick with react_on_rails and webpacker_lite and ignore Rails Webpacker integration.
Option 2) Embrace Rails new webpack integration and find another way to integrate react/redux.

To be honest my confusion lays with should I be upgrading to Rails 5.1 and embracing the newly integrated webpacker & yarn and use a non react_on_rails approach to integrating react or do I stick with react_on_rails and their proposed webpacker_lite.

I'm probably as confused as everyone else. Been very happy with react_on_rails so far (thanks for all your work @justin808) but not sure the best way forward is very clear to everyone.

Ps. @justin808 we might benefit from another blog post from you clearly explaining why you think Rails 5.1 Webpacker plus Facebooks own react_rails gem is not the way forward.

[justin808]

@evolve2k React on Rails 8.0.0 shipped! See it in action at https://www.reactrails.com/.

[justin808]

@evolve2k I just updated the Medium Article.

[willian]

@renchap I really enjoyed your efforts to make something compatible with webpacker and react, I'm about to start a new project using rails 5.1 and I already knew the webpacker-react gem. But, for some reason, I decided to take a look at the react-rails repository again and I found this: https://github.com/reactjs/react-rails#use-with-webpacker

Seems that react-rails now supports webpacker and also already have the features you're implementing for webpacker-react. So, do you think we still need the webpacker-react? What would be the difference between those 2 gems?

IMHO, having another gem to do the same thing done by react-rails will bring more confusion to the community.

[justin808]

@willian Please see shakacode/react_on_rails#811 which is the integration of shakacode/webpacker_lite with React on Rails. We'll be shipping this within a week or so.

[bluengreen]

@justin808 - I don't believe the breakdown is entirely true anymore. As @willian pointed out you can use react-rails with webpacker now. So the 2 are compatible with each other. Also the webpacker gem does allow configuration changes.

I have the same questions as @willian - what does webpacker-react and react_on_rails gems provide over using react-rails and webpacker?

Since react-rails is coming from the facebook react community and webpacker from the rails team, I'd be more inclined to use those 2 gems if they are providing essentially the same functionality. Maybe this is the wrong place to ask these questions, but looks like all the relevant parties are here and the question was already previously asked here, thought I'd chime in for direction on which features these provide over the the community provided solutions.

Also thanks for all the efforts on everyone's part in making this a reality. Looking forward to using these tools on projects.

[justin808]

@bluengreen Please see my recent updates https://github.com/shakacode/react_on_rails.

And please see: https://medium.com/@railsonmaui/webpacker-lite-why-did-we-fork-webpacker-ee3305688d66 (please give me comments ==> I want to get some more feedback before I publish).

I have the same questions as @willian - what does webpacker-react and react_on_rails gems provide over using react-rails and webpacker?

React on Rails has much tighter integration with the React/Redux/React-Router ecosystem than the alternatives. Plus the architecture of the others is totally different than React on Rails, which provides a simple, direct connection.

Since react-rails is coming from the facebook react community and webpacker from the rails team, I'd be more inclined to use those 2 gems if they are providing essentially the same functionality. Maybe this is the wrong place to ask these questions, but looks like all the relevant parties are here and the question was already previously asked here, thought I'd chime in for direction on which features these provide over the the community provided solutions.

1. Those alternatives don't provide the same functionality. Plus, within a couple of days, React on Rails is going non-beta with the Webpacker support.

2. Take a look at our Projects and our Kudos pages for some validation.

[renchap]

I started a repo and should push a first working version (helpers to mount a React component from a view) soon : https://github.com/renchap/webpacker-react

[perezperret]

@renchap I've been working on something similar, but trying to leverage what's already out there, I'm kinda blocked by #91, maybe we can figure something out together, please do take a look at what I've done here. I rather prefer the approach you've taken to client-side mounting over the one used by react-rails with unobtrusive js.

[renchap]

As you saw, you will run into issues if you try to use react-rails to render components defined in a pack. I dont think there is an easy way to do it, except maybe change your webpack config to write packs into app/assets/javascripts/packs and use a Sprockets require to include them into your bundle, but this does not seem elegant.
webpacker-react has been built to solve this problem. It is not yet feature-complete compared to react-rails, but the project is active and multiple contributors are working on things like server-rendering.

[justin808]

@renchap @perezperret I'm going to start work today in making react_on_rails start supporting webpacker! If any of you want to join my efforts, please do get in touch by emailing me at [email protected]. I can invite you to our very active Slack community of Rails + React + Webpack aficionados.

[willian]

Hi @justin808,
first of all, thanks for pointing that and for the effort on react_on_rails.

As far I remember, react_on_rails born as an alternative over react-rails without the jQuery dependency. Right?

1. Does react-rails still use jQuery?
2. Do we need similar 3 gems to tackle the same needs? I mean, react-rails, react_on_rails and webpacker-react do exactly the same thing in a very same way (API). Except webpacker-react that still doesn't have some features yet.

Please, don't get me wrong, I'm not against or in favor of any of those three gems over the others. I remember when we had rails and merb doing the same thing (with slight differences) and then were merged into a single project (rails). Maybe that's the time to think about merging these 3 gems...

/cc @renchap

[justin808]

From @evolve2k:

Do we think that the inclusion of webpacker in Rails now opens the door to easily integrate the above JS libraries into rails projects?

I'm currently on react_on_rails but working out my upgrade path.
Option 1) Stick with react_on_rails and webpacker_lite and ignore Rails Webpacker integration.
Option 2) Embrace Rails new webpack integration and find another way to integrate react/redux.
To be honest my confusion lays with should I be upgrading to Rails 5.1 and embracing the newly integrated webpacker & yarn and use a non react_on_rails approach to integrating react or do I stick with react_on_rails and their proposed webpacker_lite.

I'm just about done with the updates. Please see the latest [commits to master on react_on_rails], especially the changes for webpacker_lite in #844

I'm probably as confused as everyone else. Been very happy with react_on_rails so far (thanks for all your work @justin808) but not sure the best way forward is very clear to everyone.

Thanks!

Ps. @justin808 we might benefit from another blog post from you clearly explaining why you think Rails 5.1 Webpacker plus Facebooks own react_rails gem is not the way forward.

Here are the complete set of diffs that have gone into the Webpacker changes. Feedback is appreciated!

I might be able to ship 8.0.0 TODAY! Along with an update to my older WebpackerLite article.

If you want to learn about WebpackerLite, see the current README.md and the changes that were done after the fork was created.

[evolve2k]

@justin808 thanks for your great work and good job on getting the article updated so quickly also. 🎉

[justin808]

@evolve2k: I made huge changes to my draft article:

https://medium.com/@railsonmaui/webpacker-lite-why-fork-webpacker-f0a7707fac92

Please review! I hope to have the final release of this article later today.