Electricitymap-contrib: Rewrite map in React

[corradio]

The map is starting to be quite slow. It is also related to #1590, but I've noticed multiple renders happening for each components. A one-way data-flow would alleviate that.

[PETILLON-Sebastien]

I have questions on that issue.
What would be the strategy ? Creating react components for each part (example areagraph component in react) and then using them in the end ? Or creating a parallel UI ?
I'm not sure I would be useful as I don't know react yet, but who knows, I could give it a try some day, I already know Js.

I think the map would be improved by using push notification rather than cyclic fetchs for update, wouldn't it ?

[corradio]

Hi,

I'm not sure how exactly to proceed (yet). I'm not sure we can have React
and the existing implementation co-exist side-by-side.

Olivier

On Sun, Oct 13, 2019 at 11:51 AM PETILLON-Sebastien <
[email protected]> wrote:

I have questions on that issue.
What would be the strategy ? Creating react components for each part
(example areagraph component in react) and then using them in the end ? Or
creating a parallel UI ?
I'm not sure I would be useful as I don't know react yet, but who knows, I
could give it a try some day, I already know Js.

I think the map would be improved by using push notification rather than
cyclic fetchs for update, wouldn't it ?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tmrowco/electricitymap-contrib/issues/1681?email_source=notifications&email_token=AAMUIKH5BNOWYH3N6SWWJFLQOLVSTA5CNFSM4GFUAWY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBCSVNQ#issuecomment-541403830,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAMUIKBORG5Q7PEH4RYZG7DQOLVSTANCNFSM4GFUAWYQ
.

--

Olivier Corradi

Founder, CEO

https://www.linkedin.com/in/oliviercorradi https://twitter.com/corradio

tmrow.com

[corradio]

We could use this for the mobile app:
https://ionicframework.com/blog/announcing-ionic-react/

[PETILLON-Sebastien]

I'll try to give it a look when I have enough spare time.
I'll search for some tutos and articles. We're not the only JS app to try a React migration.

[corradio]

I actually think we can do a fairly easy migration if we use React refs
that can be used to manipulate the DOM. Those refs could be passed to
legacy components.
We'd have to test that though.

On Wed, Oct 16, 2019 at 6:04 PM PETILLON-Sebastien [e-mail]
wrote:

I'll try to give it a look when I have enough spare time.
I'll search for some tutos and articles. We're not the only JS app to try
a React migration.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tmrowco/electricitymap-contrib/issues/1681?email_source=notifications&email_token=AAMUIKHOXLFYRRFP66QWM4LQO43QBA5CNFSM4GFUAWY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBNBJFI#issuecomment-542774421,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAMUIKEMRGHP65DAFKBW7FTQO43QBANCNFSM4GFUAWYQ
.

--

Olivier Corradi

Founder, CEO

https://www.linkedin.com/in/oliviercorradi https://twitter.com/corradio

tmrow.com

[corradio]

I've started here:
https://github.com/tmrowco/electricitymap-contrib/pull/2098

[fbarl]

Here's an overview of which parts are still not using React after #2098.

Not all the items listed here are necessarily part of the map code, so maybe we don't need to check all the boxes below in the scope of this issue, but probably it would be good to do the full transition at some point to have a consistent codebase.

Components

Bigger (> 200 lines)

• [x] AreaGraph - #2148
• [x] CountryTable - #2263
• [x] HorizontalColorbar - #2299
• [ ] Map - #2309
• [x] ~LineGraph~ - #2254
• [x] ZoneList - #2145

Smaller (< 200 lines)

• [x] ContributorList - #2151
• [x] FAQ - #2160
• [x] LanguageSelect - #2152
• [x] NoDataOverlay - #2263
• [x] OnboardingModal - #2298
• [x] SearchBar - #2164
• [x] TimeSlider - #2231
• [x] Tooltip - #2276

Layers

• [ ] ExchangeLayer - #2310
• [ ] SolarLayer - #2310
• [ ] WindLayer - #2310

App mount

• [ ] main.js - #2311

[fbarl]

I'm closing this umbrella issue in favor of three specific React migration tasks (#2309, #2310, #2311) I just created which hopefully encapsulate all the remaining work.

It's been an interesting journey rewriting big parts of the components code! :slightly_smiling_face: :rocket: