Refactor with React

[corradio]

We should start adding React and slowly convert our code to components in order to make the style and frontend updates easier!

[BrianCraig]

I'll be helping starting tomorrow 😊

[BrianCraig]

Hi! I'been looking for a roadmap for using react, my thoughts are:

1. Remove global usages for variables, and move them to the store, migrating the changes & events like wind/solar toggle, to redux style.
2. Divide & Conquer main.js.
3. Organize files & folders for a react based app.

Then it comes the react part, where i can't find any order on applying changes:

• Switch current navigation to a navigation module (like react-navigation)
• Convert the ejs view to React modules
• Apply the language translations dinamically, selecting the language on the go, also we could simplify the cordova app files generation.

Then maybe we could switch from cordova to React native :)

What do you think about this?

Greetings, Brian

[corradio]

Agreed with the redux part.
I think we should wait a little bit with react. When redux will be operational we will have a better overview.
Note that react won't give us react-native for free. React-native requires "Views" where React uses "divs". Navigation will also be completely different.
As a first step I would therefore focus on decoupling and modularizing the application. We can then make a status and figure out exactly what to do.

[BrianCraig]

@corradio, I'm doing a refractor of the main, the first step you said, decoupling and modularizating the application.

The Branch is here

I'm making two files that contains the state for the application, see global and maps variable files, i didn't apply redux because it would mean we change d3 events to redux action -> dispatcher -> observer method, when the first goal is to order the files.

Im now ordering the UI, trying to decouple ui logic from non ui modules. When it's finished i will PR,
then a reasonable thing to do would be review all the code & components, refactoring and trying to shrink and simplify all the code at the minium. This refactor exposes a lot of code duplication and unnescesary calls between components. I think each refactor on the code would make an easier switch to React.

Greetings, Brian

[corradio]

That is terrific! Keep up the good work and as soon as you have a PR ready I'll have one iteration on top.

[corradio]

@BrianCraig how is it going? Refactoring is tricky so we should probably try to do chunks by chunks in order to avoid those nasty merges because the master keeps going forward.

[grady-lad]

@corradio @BrianCraig if you guys need any help on this, I'd be happy to help out.

[corradio]

It's been on pause atm. I'm trying to avoid too big a refactor but if you can make something simple work without too much refactor so we can introduce react slowly, that'd be a huge step!

…

On Feb 8, 2018 00:43, "grady-lad" ***@***.***> wrote: @corradio <https://github.com/corradio> @BrianCraig <https://github.com/briancraig> if you guys need any help on this, I'd be happy to help out. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/tmrowco/electricitymap/issues/853#issuecomment-363950690>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABlEKP4Z52NQJrQa6vnj3kNN5gpen4Lzks5tSjUYgaJpZM4Qel89> .

[corradio]

@grady-lad if you're keen to help, can you ping me on Slack? I think refactoring the main.js is already a good task forward - then we can add React later on.