Delve into the impact of mobile development on the environment with SNCF Connect at Flutter Heroes 2024. Learn directly from experts how eco-friendly apps can contribute to a greener future.

This year Ulixe participated in the "Flutter Heroes" event, organized by Synsthesia.

Many interesting talks were presented, all pertaining to the world of mobile development and more specifically, to Flutter.

In this article I want to explore with you one talk in particular, which is very useful for any mobile development, whether in Flutter, with React Native or native: environmental impact. 

 Index

1. Reducing Digital Pollution: One App at a Time
   1. Digital and the Environment: the Role of Mobile Devices.
   2. Energy Consumption and App: Main Motivations
2. How to decrease the environmental impact of our apps?
   1. Dark Mode for a Greener Future
   2. Eco Mode: Energy Savings That Pay Off
   3. Eco-Compatibility: Old Devices, New Life
   4. BFF: Moving FE logic to the BE. 
3. Flutter Heroes 2024: Toward a Sustainable Future in Mobile Development

Reducing Digital Pollution: One App at a Time

Did you know that there are lighter variants of very popular apps? Like, for example, Facebook Lite or TikTok Lite?

This app is very similar to the more popular variant but has a greater focus on your phone's resources: 

• make fewer demands on the BackEnd 
• Avoid downloading high-definition images 
• support older versions 
• have fewer animations  

These differences allow the app to be used even on somewhat older phones, use less cellular data, and significantly reduce the environmental footprint.

And that's exactly what the SNCF Connect team wants us to think about in their talk "Mind your app footprint!"  

Talk: Mind your app footprint

Source: SNCF Intervention

Digital and the Environment: the Role of Mobile Devices.

Currently, digital technologies contribute 2.5 percent of carbon release and 4 percent of Greenhouse Gases (GHG) release.

Most of this Greenhouse Gas is not due to the big data centers of AWS or Google but from the devices we use every day, such as our phone, computer, TV etc. 

The main causes of digital pollution

Source: SNCF Intervention

Phones, in particular, are the devices that are most often changed every two and a half years, according to the data presented.

Device life cycle

Source: SNCF Intervention

For this reason, it has become very important to consider environmental impact when designing an app. Here, is where we developers come in! Here, instead, you can read some tips on how to develop sustainable Web sites.

But now, let's focus on the world of app development. Read on! 

Energy Consumption and App: Main Motivations

The longer we are on the phone, the more energy we consume, but not all applications consume energy in the same way.

The main reasons why one application may consume more energy than another are: 

• Hardware access When the app uses, for example, the camera, microphone, GPS. Even simple screen use comes into this case study. 
• CPU usage When the app needs significant computing power, for example, video games need a lot of computing power that will make the battery last less. 
• Internet use Streaming apps, such as Netflix, consume less power when the video has already been downloaded than when you are streaming it because there is no continuous massive internet use. 

How to decrease the environmental impact of our apps? 

Now that we have identified the main causes of energy consumption by users, we can take action on the development side to reduce the environmental impact of our applications.

There are several strategies to make apps more sustainable dark mode and eco modes reduce battery consumption and carbon emissions.

Optimizing the app for less performing devices and moving the business logic to the Backend are other effective solutions.

Let's examine these strategies together and how to implement them to create more energy-efficient apps. Read on!

Dark Mode for a Greener Future

On many of the new phones, the classic LCD screen is no longer used but an OLED screen, which allows the black pixels to be turned off altogether.

This small difference allows, in addition to having more defined colors and an "absolute black," to preserve some energy.

Dark Modes

Source: SNCF Intervention

The French team, during Flutter Heroes, showed how, according to tests, using a "Dark blue" theme (so not even totally black like the classic dark mode) could reduce carbon release by 23%.

Eco Mode: Energy Savings That Pay Off

When the phone has low battery, we are usually directly asked by the phone itself whether we want to use the "power saving" mode.

Such a mode could be very useful to integrate it into the app we are working on as well. For example, Friends of Telegram has already introduced it (pioneering many innovations in the messaging sphere!) . 

Telegram energy saving settings

In Flutter we can know whether the user has enabled the power saving mode through the library created just by the French team   

In this mode to preserve the battery we could: 

• Increase cache life time to avoid making unnecessary calls. 
• Disable secondary sdk/Api that do not affect operation, such as GPS. 
• Download images and videos of a lower quality.
• Modify the UI, disabling complex animations, special shadows or heavy gradients. 

To take Telegram as an example, these would be the things that would be handled differently: 

Enabling energy saving on Telegram

Eco-Compatibility: Old Devices, New Life

Always using the same line of thinking, it is important that our apps can support older or less performing devices. 

For example, we could enable "eco-mode" by default on devices that have less than 2 cores, or, have an older Android or iOS version. 

BFF: Moving FE logic to the BE. 

As was pointed out to us at the beginning, the main pollution comes not from cloud services but from our devices.

Therefore, one of the proposals, is to move all the logic of our application to the Back End. What does that mean?

One of the most famous patterns to be able to do this is BFF, which does not stand for best friends forever but for Backend For Frontend. What it is. A BE created specifically for that specific FE.

Example of moving to the Back End

Source: SNCF Intervention

A similar concept, but not the same, is what happens with server side rendering (SSR) on the Web: technologies such as Next.js or Astro allow all the computational load to be shifted directly to the server and no longer to the mobile device.

Also with Angular 17 we can handle Server Side Rendering, if you want to know how, read the article on our blog, we have already talked about it here.

Flutter Heroes 2024: Toward a Sustainable Future in Mobile Development

The importance of the environment in our daily decisions is constantly growing. It was enlightening to explore, during Flutter Heroes, how we can extend this awareness to our work as mobile developers.

Reducing the environmental impact of our applications is not only a responsible choice, but also a tangible contribution to the sustainable transition.

Let's remember that: by keeping the discussion about environmental impact alive in our industry and adopting innovative solutions, we can help shape a more sustainable future for all!