[feature in development] Frontend Refactor 🗺️ 🔨

[madsnedergaard]

Description

tl;dr: We're refactoring the frontend app!

The frontend app (aka. the map) has grown over the years thanks to all the amazing contributions(!) from so many amazing people(!). While we've added new features, made it faster and nicer to work with, there's still a lot of things we want to improve. And we haven't spent a lot of time addressing the tech debt that has been piling up over time.

Right now, the current state of the frontend code is holding us back and slowing us down - so instead of continuing developing on top of the existing foundation, we have decided to take a long step back and rethink the code powering the app.

While this work will be a huge effort internally, it will not be very visible for users of the map. But it will enable us to develop new features faster, increase performance dramatically and also make it easier for everyone to contribute going forward 🌱

Impact on contrib right now

This is how we expect this project to impact the community and repository here:

• We will carry over the work of the many contributors, either the code directly or the thoughts behind it! So the great work that has been put in by everyone is definitely not "lost" 🙇💚
• We will do a mild code-freeze on the frontend code (/web) and only fix critical bugs and issues for the rest of the quarter. We suggest not opening new PRs on frontend functionality unless it's bugfixing or translations.
• We will continue accepting your great ideas, feedback and questions in issues - and we'll label issues that will be fixed or become irrelevant due to this project.
• We will do development of this work on a separate repository (here if you're curious), which will later be merged back into this repository.

Timeline

We are not committing to a specific deadline, but the work is currently ongoing and we hope to be done by the end of this quarter or shortly thereafter!

We'll post status updates on this issue throughout the project and we hope you’ll help test the new version and provide feedback when we have something ready to be shared :)

[hboisgibault]

Hey Mads, what do you have in mind for refactoring ? Can you give more details ?

[madsnedergaard]

Hey Mads, what do you have in mind for refactoring ? Can you give more details ?

We're still in the initial phases, but we're rebuilding the app in TypeScript with new core libraries and tools :) We'll rewrite some components, while others will be kept as they are. We'll update this issue with more information about the status later on as we make progress :)

[madsnedergaard]

We have been awfully quiet here, but the new app is now live: https://app.electricitymaps.com
Soon we will merge the new codebase in, but we're currently still working out minor kinks and adjusting to feedback - so we would love to hear what you think! :)

[MayeulC]

Hey, I visit the website quite often, so I immediately noticed the change (it defaulting to the dark theme was an immediate giveaway).

While I like it overall, one thing stood out specifically, which I really disliked: can we get rid of the number animation? That makes it hard to compare countries when clicking/hovering rapidly to/on the next one, which I used to do. Moreover, it looks like high numbers take longer to appear (about 2s for poland at 934g currently).

Anyway, this makes the map quite annoying to use currently, and is quite distracting as well.

I also had to refresh the map to see the colors (even though I opened it in private browsing).

[madsnedergaard]

Thanks for the feedback, this is very useful! You're not the first to raise this, so we will remove the number animation again (early next week) :)

[madsnedergaard]

Hi again, we've now disabled the animation on numbers - thanks for the feedback! 🙏

[Bohne13]

I also had to refresh the map to see the colors (even though I opened it in private browsing).

I have the same "problem". Have the Map as a pinned tab in my browser but after first load of the map I have to refresh the tab to get the colors.

Also still missing the button to switch to dark on the desktop!

[VIKTORVAV99]

I also had to refresh the map to see the colors (even though I opened it in private browsing).

I have the same "problem". Have the Map as a pinned tab in my browser but after first load of the map I have to refresh the tab to get the colors.

Also still missing the button to switch to dark on the desktop!

@madsnedergaard did we accidentally remove the "dark mode" button? I know we had it in there in a previous build at some point?

[madsnedergaard]

I also had to refresh the map to see the colors (even though I opened it in private browsing).

I have the same "problem". Have the Map as a pinned tab in my browser but after first load of the map I have to refresh the tab to get the colors.

Thanks for reporting, we'll look into this! :)

Also still missing the button to switch to dark on the desktop!

@madsnedergaard did we accidentally remove the "dark mode" button? I know we had it in there in a previous build at some point?

We made a decision to switch from the "manual" button to instead listen for the system preferences - we still want a manual theme button back, but it requires thinking it a bit further as there now are 3 different states (bright mode, dark mode, follow sys. pref.). But it's high on the todo list and getting this feedback here is very valuable to help prioritise 🙏

[VIKTORVAV99]

...

...

We made a decision to switch from the "manual" button to instead listen for the system preferences - we still want a manual theme button back, but it requires thinking it a bit further as there now are 3 different states (bright mode, dark mode, follow sys. pref.). But it's high on the todo list and getting this feedback here is very valuable to help prioritise 🙏

Ah okay that makes sense. 👍🏼

[Bohne13]

We made a decision to switch from the "manual" button to instead listen for the system preferences - we still want a manual theme button back, but it requires thinking it a bit further as there now are 3 different states (bright mode, dark mode, follow sys. pref.). But it's high on the todo list and getting this feedback here is very valuable to help prioritise 🙏

It looks like going with the system settings does work fine in the browser on Android.
But doesn't work on Linux in the browser. Could be that on Linux GNOME there is a different implementation of the dark an light mode witch is not handed over to the browser.

Would be nice to know if there is a workaround for now like URL.com/theme="dark"?

[madsnedergaard]

There is no workaround yet, but this is high on the backlog and we'll add it back soon :)

[MayeulC]

Thanks for suppressing the animation, I like the new theme quite a bit now!

I just encountered a bug, which I couldn't reproduce (I got it after switching back-and-forth between electricity production/consumption, and electricity consumption/carbon emissions, then dezooming, and finally scrolling the left pane):

[VIKTORVAV99]

Oh I know how to reproduce that one! 😅
I'll create a issue for it in particular and link it here.

Edit:
I created #5141 for it, feel free to add any additional information there.

[madsnedergaard]

Think it's time to close this one! :D