Using React in large project - What's the arguments?


(Paulo Fabiano Langer) #1

Hi, everybody!

My company has a very large and complex admin for the clients. Our code is not 100% covered by tests, our bussines logic is spreaded out into controllers, tons of helpers and we still use a not very good web framework.

So, we have LOTS of work to do.

The thing is, we are doing some important redesigns of the admin pages.

While refactoring our webpack config, I decided also to implement a component based approach not using React, like in this series:



So, now, we have a frontend/components folder where we can implement lots of components, each one with its own script and styles files already liked in Webpack.

It is the same approach to react but, in this case, we are not using react, we are using a helper method that renders partials, with or without blocks.

Why I suggested it? Because we already have a very complex and messy MVC code and, with this approach we can implement the new redesigned frontend splitting its code into independent partial components and, most important, not having to handle at this moment with the messy business logic in controllers, helpers, etc.

Working with react could be more challenging because we needed to pass all the controllers variables used in the view to some javascript object format in order to allow react to load it, or maybe create a new API actions specific to this react interface.

The thing is, when I asked about the reasons, the arguments, etc to justify the use of react now I got something like:

  • lots of the companies are using it
  • we can do fancy things like editing content in the same page (you know, editable divs, spans, etc)

Ah, BTW, we are still keeping the application’s routes, so, every route of the admin will render a single react component for that page, i.e, a multiple routed single-pages application. We are farrrr away of having react routes.

Data-flow architecture planning? Forget it! I think they don’t have ideia about Redux. They are using simple and basic react states passing all controller’s data to a large javascript JSON and passing to react component as property.

Well, that’s it! I am not an expert but, for me, we should use this partial components approach, organize the code having CSS and JS files for each component, clean up the hundreds of files, assets, etc from the public folder and later, planning better this react project, the API, the redux architecture, etc, we could migrate these components to react just creating a new .jsx file and putting the content of the partial _xxx.erb into it.

What do you think about this?

Sorry the long message

Best,
Paulo