Energy Patterns for Web: An Exploratory Study

Related Paper: https://arxiv.org/abs/2401.06482

As the energy footprint generated by software is increasing at an alarming rate, understanding how to develop energy-efficient applications has become a necessity. Previous work has introduced catalogs of coding practices, also known as energy patterns. These patterns are yet limited to Mobile or third-party libraries. In this study, we focus on the Web domain--a main source of energy consumption. First, we investigated whether and how Mobile energy patterns could be ported to this domain and found that 20 patterns could be ported. Then, we interviewed six expert web developers from different companies to challenge the ported patterns. Most developers expressed concerns for antipatterns, specifically with functional antipatterns, and were able to formulate guidelines to locate these patterns in the source code. Finally, to quantify the effect of Web energy patterns on energy consumption, we set up an automated pipeline to evaluate two ported patterns: 'Dynamic Retry Delay' (DRD) and 'Open Only When Necessary' (OOWN). With this, we found no evidence that the DRD pattern consumes less energy than its antipattern, while the opposite is true for OOWN

1. Energy Patterns for Web:
An Exploratory Study
Pooja Rani, Jonas Zellweger, Veronika Kousadianos,
Luis Cruz, Timo Kehrer, Alberto Bacchelli,
University of Zurich, Switzerland

2. 2
Data Source: Climate Action Tracker

3. 3
Data Source: Climate Action Tracker

4. /**

* TODO
*/
public void log(String s) {
System.out.println(s);
}
Is it our problem?

5. 5
ICT: Information and Communication Technology
Around 4.6 billion people use the internet every day.
Is it our problem?

6. 6
ICT: Information and Communication Technology
Around 4.6 billion people use the internet every day.
Is it our problem?

7. 7
ICT: Information and Communication Technology
Around 4.6 billion people use the internet every day.
Is it our problem?

8. 8
ICT: Information and Communication Technology
Around 4.6 billion people use the internet every day.
Is it our problem?

9. 9
Bree et al.,, 2022, The energy cost of the visitor pattern
What can we do?
Being aware of energy-related coding practices
in web world can help us make better choices

10. 10
Bree et al.,, 2022, The energy cost of the visitor pattern
What can we do?
Energy patterns
Being aware of energy-related coding practices
in web world can help us make better choices

11. 11
Gillies et al. 2011
It requires a multi-perspective view

12. 12
RQ1
Are there energy patterns for
Web apps?
It requires a multi-perspective view

13. 13
RQ1
Are there energy patterns for
Web apps?
What is developers’
perception on patterns?
RQ2
It requires a multi-perspective view

14. 14
RQ1
Are there energy patterns for
Web apps?
Do energy patterns
really impact?
RQ3
What is developers’
perception on patterns?
RQ2
It requires a multi-perspective view

15. 15
RQ1
Are there energy patterns for
Web apps?
It requires a multi-perspective viewDo energy patterns
really impact? RQ3 What is developers’
perception on patterns? RQ2

16. 16
https://tqrg.github.io/energy-patterns/#/
Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network
22 Mobile
energy patterns
RQ1: Energy Patterns for the Web

17. 17
https://tqrg.github.io/energy-patterns/#/
2
Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network
20 Web
energy patterns
RQ1: Energy Patterns for the Web
20

18. 18
https://tqrg.github.io/energy-patterns/#/
RQ2: Developers’ Perception on Patterns
Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network
20 Web
energy patterns

19. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network19
https://tqrg.github.io/energy-patterns/#/
RQ2: Developers’ Perception on Patterns

20. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network20
https://tqrg.github.io/energy-patterns/#/
1 sec
2 sec
4 sec
RQ2: Developers’ Perception on Patterns

21. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network21
https://tqrg.github.io/energy-patterns/#/
1 sec
2 sec
4 sec
RQ2: Developers’ Perception on Patterns
Pattern

22. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network22
https://tqrg.github.io/energy-patterns/#/
1 sec
2 sec
4 sec
RQ2: Developers’ Perception on Patterns
Pattern
3 sec
3 sec
3 sec
(Anti)pattern

23. 23
RQ2: Developers’ Perception on Patterns
familiarity
on patterns

24. 24
RQ2: Developers’ Perception on Patterns
familiarity
on patterns
Concerns on
antipatterns

25. 25
RQ2: Developers’ Perception on Patterns
familiarity
on patterns
Patterns in
source code
Concerns on
antipatterns

26. 26
RQ2: Developers’ Perception on Patterns
familiarity
on patterns
Patterns in
source code
Other
questionsConcerns on
antipatterns
Case study with 6
web developers

27. 27
Familiar with Energy Patterns
17% 17%66%
Never heard Strong understanding

28. 28
Concerns about Anti-patterns
17% 33% 50%
Open Only When Necessary
17% 17% 66%
Dynamic Retry Delay
Least concerned Extremely concerned

29. 29
Energy Patterns in Source code

30. 30
9 patterns found in code
11 anti patterns in code
4 not applicable to code
Energy Patterns in Source code

31. 31
RQ3: Impact of Energy Patterns
Do they
really impact?
Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network

32. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network32
RQ3: Impact of Energy Patterns
1 sec
2 sec
4 sec
Pattern

33. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network33
RQ3: Impact of Energy Patterns
3 sec
3 sec
3 sec
(Anti)pattern
1 sec
2 sec
4 sec
Pattern

34. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network34
RQ3: Impact of Energy Patterns

35. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network35
RQ3: Impact of Energy Patterns
load images as scroll
Pattern

36. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network36
RQ3: Impact of Energy Patterns
load images as scroll
Pattern
load all images
(Anti)pattern

37. Dark UI Colors
Provide a dark UI colour theme to save battery.
Dynamic Retry Delay
Whenever an attempt to access a resource has failed, increase the interval of time waited before asking it
Open Only When Necessary
Open/start resources/services only when they are strictly necessary.
Push Over Poll
Use push notifications to receive updates from resources instead of actively querying resources (polling)
Power Awareness
Have a different behavior when device is connected/disconnected to a power station
Wifi Over Cellular
Delay or disable heavy data connections until the device is connected to a WiFi network37
RQ3: Impact of Energy Patterns

38. 38
https://tqrg.github.io/energy-patterns/#/
Takeaways
83% developers are not familiar with energy patterns.
Developers are concerned about many anti patterns.
They could find 16 (anti) patterns in source code.
Energy impact of energy patterns vary.

39. 39
PaperReplication PackageMy profile

40. More Curious?

41. 41
(4) Inquire about
patterns in source code
(6) questions on
demographic info
welcome &
instructions
(1) Insights on energy
pattern awareness
(2) Introduction of
energy (anti) patterns
(5) Resource investment
for energy patterns
(3) Concerns for energy
(anti) patterns
Case study with 3 web developers
from a energy-grid based company
3 developers from
other companies
RQ2: Developers’ Perception on Patterns

42. 42
PowerLog
Measure energy
consumption
User scenarios for
energy(anti) patterns
Start Browser and
Demo websites
Execute scenario
on websites
Compute resultsStart Pipeline Quit Browser
50 Iterations
RQ3: Impact of Energy Patterns

43. 43

44. 44
Technologies disappear, software
updates, increasing development costs
due to technical debt, high-performance
systems that need high power.
Saputri and Lee, 2021, Integrated framework for incorporating sustainability design in software engineering life-cycle: An empirical study