Designing an eco-friendly web framework (Greenconf 2020 talk)

This is the written version of the talk I did for Greenconf 2020. I'll post the video here soon.

Hey there, everyone! Today I'll show you a glimpse of what an eco-friendly web development framework could look like.

My name is Henrique and I'm starting my journey on making a positive impact on the planet through web design and development. Like you, I'm learning and often getting overwhelmed by the scary and complex sustainability topic, so feedback is very much appreciated.

First, I want to be clear about what I mean by "web framework". This could go into many directions, but here we'll focus on a developer tool for building content-driven websites and web-apps, focusing on the front-end. It'll provide some back-end functionality but it won't go deep in databases, permissions and complex APIs. It also won't cover edge cases and super complex apps such as Twitter and Github.

This is still broad, but being broad is the idea. We're covering ~95% of the use cases out there, from marketing sites to admin dashboards and small social apps. (Yes, 95% is an invention 😋)

A summary of what we want here is to conceive a developer tool that can materially reduce our websites and apps' carbon footprint while still achieving economic goals and being inclusive and accessible. To guide our decisions, we'll focus on 3 qualitative questions:

• How can we power our work with renewable energy?
  • This is proposed by Tim Frick in his book Designing for Sustainability
  • The idea is simple: data centers consume a lot of energy, if we can source that energy from renewables, then we're already doing a great job
• How can we make it as efficient as possible?
  • Also from Tim Frick, this question focuses on what can we do to reduce the overall energy consumption and digital waste of our apps?
  • This also includes concerns about UX design, as a bad user experience could lead to wasted energy on useless browsing
• And, even better, how can we avoid building unnecessary products and features?
  • This one is especially important in our wasteful industry - think about all the features you built that users didn't want and design extravaganzas you included in the final work because of stakeholder requests.
  • I know I've done that a lot
  • It hurts to think that those, besides being pointless, also have a carbon footprint.
  • Remember the greenest app is the one you don't build

These are our three guiding principles that we'll use to frame our solutions. As I know you're wondering about the concrete numeric impact of this work, let's take a look at an example to give you some perspective.

Danny van Kooten has wrote a very nice piece on how he reduced his footprint by roughly 59 tons of CO2 per month by reducing the Javascript size of his WordPress plugin by 20kb.

He lives in The Netherlands, whose citizens had an average of 10.3 tons of CO2e emitted in 2017. So with his tiny code change, he managed to offset the carbon footprint that ~70 fellow dutch people would have in a year. Even if he overshot his calculations by 50 times, this optimization would be enough to cover his personal impact for 1 year and 4 months.

This is an imperfect framing, of course, but it shows that as web developers we have a significant opportunity to use our work to make a positive impact on the world. Now that we know which questions to ask and how making our websites more sustainable could help the planet, let's move on to how this framework could help.

This will be a rapid-fire of features and directives, I won't go too deep into each of them. For details, go to hdoro.dev/sustainability. The goal here is to spark some inspiration and show concretely how we can help developers make sustainable choices more easily. With only 15 minutes I won't really be able to convince you that X is materially greener than Y 😅

(I'm still writing the rest, in the meantime, refer to the repository on the features of an eco-friendly-web-framework)