[{"data":1,"prerenderedAt":291},["ShallowReactive",2],{"currentPageContent":3,"content-query-Q8NnKyB6Xx":179},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"status":10,"image":11,"date":12,"head":13,"body":27,"_type":173,"_id":174,"_source":175,"_file":176,"_stem":177,"_extension":178},"/en/blog/sustainable-choices","blog",false,"","Sustainable Frontend Development","There is an app for that! IT as the solution to every problem. This is the mindset that drives developers who live for making an impact to get up every day with fresh energy. When looking at sustainability, this leads to IT for Good, Green IT, and the all-encompassing Sustainable IT","PUBLISHED","/images/talks/24-hidden-impact/the-hidden-impact-of-developers.jpg","2022-09-10",{"meta":14},[15,18,21,24],{"name":16,"content":17},"keywords","sustainability",{"name":19,"content":20},"robots","index, follow",{"name":22,"content":23},"author","Emiel Kwakkel",{"name":25,"content":26},"copyright","© 2026 Emiel Kwakkel",{"type":28,"children":29,"toc":167},"root",[30,39,45,50,59,64,69,74,79,84,94,108,113,119,124,129,137,142,148,153],{"type":31,"tag":32,"props":33,"children":35},"element","h2",{"id":34},"how-to-make-concious-choices",[36],{"type":37,"value":38},"text","How to Make concious choices?",{"type":31,"tag":40,"props":41,"children":42},"p",{},[43],{"type":37,"value":44},"At the same time, the energy consumption of digital technologies increases significantly every year. Decisions made during development are often unknowingly a major influence on energy consumption, CO2 emissions, and the use of scarce resources.",{"type":31,"tag":40,"props":46,"children":47},{},[48],{"type":37,"value":49},"Years ago, I developed my personal website, emielkwakkel.nl, using Angular and Bootstrap. Slightly over-engineered, but how much emissions could a small personal website cause? Recently, I was shocked by the results from websitecarbon.com, a tool that estimates the carbon footprint of your website based on various factors. My site turned out to be more polluting than 93% of tested websites, emitting five grams of CO2 per page view. Ten thousand page views equated to the energy consumption needed to drive an electric car 9,000 kilometers—that’s a round trip to Greece, twice!",{"type":31,"tag":40,"props":51,"children":52},{},[53],{"type":31,"tag":54,"props":55,"children":58},"img",{"alt":56,"src":57},"First version of emielkwakkel.nl","/images/blog/sustainable-choices/emielkwakkel-nl-old.png",[],{"type":31,"tag":40,"props":60,"children":61},{},[62],{"type":37,"value":63},"Now, I don’t have illusions of thousands of visitors to my personal website. But I do build front-end applications for banks, insurers, and governments, handling millions of page views and heavy usage. What impact do my choices make there? And does the architecture account for best practices?",{"type":31,"tag":40,"props":65,"children":66},{},[67],{"type":37,"value":68},"Sustainability has always been important to me. Yet, until recently, I unconsciously hadn’t included it as a strict non-functional requirement. When setting up my server, I focused on scalability, performance, and redundancy. But critically speaking, how many cores do a few small Node-based websites really need? And is a cloud backup of a standard server instance necessary when all the source code is on GitHub?",{"type":31,"tag":40,"props":70,"children":71},{},[72],{"type":37,"value":73},"Time for a change: a new lightweight VPS proved equally capable of serving my site quickly and resulted in monthly savings of 24 euros. I also revamped my website.",{"type":31,"tag":40,"props":75,"children":76},{},[77],{"type":37,"value":78},"Disclaimer: the main takeaway here is the importance of choosing the right architecture based on the use case and avoiding emissions from over-engineering. The combination of Angular, a Single Page Application, and Bootstrap can be a sustainable choice for a dynamic enterprise application, provided it’s optimized.",{"type":31,"tag":40,"props":80,"children":81},{},[82],{"type":37,"value":83},"For my personal website, I opted for Vue 3 and Nuxt 3 with Static Site Generation (SSG) and Tailwind for styling. The updated Vue Virtual DOM allows for faster rendering and reduced memory usage. Paired with Nuxt, the framework becomes largely tree-shakable, reducing bundle sizes. Tailwind’s utility classes enable custom styling without the overhead of unused components.",{"type":31,"tag":40,"props":85,"children":86},{},[87,89],{"type":37,"value":88},"Styling also impacts an application’s energy consumption. Did you know that dark mode significantly reduces energy usage? In the early 2000s, during the era of CRT monitors, Google turned its website black for Earth Day. With the shift to LCD screens (single backlight, always on), the advantage disappeared. But with the rise of OLED screens, dark mode is making a comeback. Research by Google found that Google Maps in dark mode on mobile devices used up to 63% less energy for the display. A win-win for every developer who loves dark mode!\n",{"type":31,"tag":54,"props":90,"children":93},{"alt":91,"src":92},"Current draw in mA","/images/blog/sustainable-choices/colour-energy-usage.png",[],{"type":31,"tag":40,"props":95,"children":96},{},[97,99],{"type":37,"value":98},"Source: ",{"type":31,"tag":100,"props":101,"children":105},"a",{"href":102,"rel":103},"https://www.wholegraindigital.com/blog/dark-colour-web-design/",[104],"nofollow",[106],{"type":37,"value":107},"Wholegrain Digital",{"type":31,"tag":40,"props":109,"children":110},{},[111],{"type":37,"value":112},"With the new website live, it was time for another scan with websitecarbon.com. The five grams of CO2 per page view has been reduced to 0.06 grams, and 10,000 page views now equate to a car trip of just 112 kilometers! Thanks to the reduced bundle size combined with Static Site Generation, load times have improved. The GitHub workflow deploys the site to production in one minute, and server costs have decreased by 500%.",{"type":31,"tag":32,"props":114,"children":116},{"id":115},"new-challenges",[117],{"type":37,"value":118},"New challenges",{"type":31,"tag":40,"props":120,"children":121},{},[122],{"type":37,"value":123},"As the scale of the project increases, so do the challenges. On the development side, the number of tests grows rapidly. Combined with additional quality gates, linting, and more extensive deployment scripting, pipeline lead times increase. Both a micro-frontend and monorepository architecture can help here. The goal is to automate the impact assessment of a change. Based on the dependency tree, only the tests, builds, and deployments affected by the change are executed.",{"type":31,"tag":40,"props":125,"children":126},{},[127],{"type":37,"value":128},"An example of such an approach is the KickstartGreen application, built for a fictional bank that helps clients plant trees alongside banking. The architecture is described as an Angular monorepository with NX, divided into projects following Manfred Steyer’s Domain-Driven Design principles. This setup allows for zooming in on the application, domain, and library levels. An affected analysis highlights the libraries within the application impacted by a change.",{"type":31,"tag":40,"props":130,"children":131},{},[132],{"type":31,"tag":54,"props":133,"children":136},{"alt":134,"src":135},"KickstartGreen Dependency Graph in kaart gebracht met NX","/images/blog/sustainable-choices/kickstartgreen-nx.png",[],{"type":31,"tag":40,"props":138,"children":139},{},[140],{"type":37,"value":141},"When splitting the application into domains and libraries, careful thought is required about hierarchy. Dependencies should only flow downward. For instance, if a utility library imports an application, any change to that utility would mark the entire application and all its packages as affected.",{"type":31,"tag":32,"props":143,"children":145},{"id":144},"final-thoughts",[146],{"type":37,"value":147},"Final thoughts",{"type":31,"tag":40,"props":149,"children":150},{},[151],{"type":37,"value":152},"The list of possible optimizations is too long for this article. Ultimately, raising awareness and making sustainability a hard requirement is the only way to make balanced and measurable choices. Does your organization lack strict sustainability goals? Then consider how a sustainable proposal can also save costs, improve maintainability, or shorten time-to-market. A win-win!",{"type":31,"tag":40,"props":154,"children":155},{},[156,158,165],{"type":37,"value":157},"All projects mentioned in this article are available on my ",{"type":31,"tag":100,"props":159,"children":162},{"href":160,"rel":161},"https://github.com/emielkwakkel",[104],[163],{"type":37,"value":164},"personal GitHub",{"type":37,"value":166},".",{"title":7,"searchDepth":168,"depth":168,"links":169},2,[170,171,172],{"id":34,"depth":168,"text":38},{"id":115,"depth":168,"text":118},{"id":144,"depth":168,"text":147},"markdown","content:en:blog:sustainable-choices.md","content","en/blog/sustainable-choices.md","en/blog/sustainable-choices","md",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"status":10,"image":11,"date":12,"head":180,"body":186,"_type":173,"_id":174,"_source":175,"_file":176,"_stem":177,"_extension":178},{"meta":181},[182,183,184,185],{"name":16,"content":17},{"name":19,"content":20},{"name":22,"content":23},{"name":25,"content":26},{"type":28,"children":187,"toc":286},[188,192,196,200,206,210,214,218,222,226,233,242,246,250,254,258,264,268,272,276],{"type":31,"tag":32,"props":189,"children":190},{"id":34},[191],{"type":37,"value":38},{"type":31,"tag":40,"props":193,"children":194},{},[195],{"type":37,"value":44},{"type":31,"tag":40,"props":197,"children":198},{},[199],{"type":37,"value":49},{"type":31,"tag":40,"props":201,"children":202},{},[203],{"type":31,"tag":54,"props":204,"children":205},{"alt":56,"src":57},[],{"type":31,"tag":40,"props":207,"children":208},{},[209],{"type":37,"value":63},{"type":31,"tag":40,"props":211,"children":212},{},[213],{"type":37,"value":68},{"type":31,"tag":40,"props":215,"children":216},{},[217],{"type":37,"value":73},{"type":31,"tag":40,"props":219,"children":220},{},[221],{"type":37,"value":78},{"type":31,"tag":40,"props":223,"children":224},{},[225],{"type":37,"value":83},{"type":31,"tag":40,"props":227,"children":228},{},[229,230],{"type":37,"value":88},{"type":31,"tag":54,"props":231,"children":232},{"alt":91,"src":92},[],{"type":31,"tag":40,"props":234,"children":235},{},[236,237],{"type":37,"value":98},{"type":31,"tag":100,"props":238,"children":240},{"href":102,"rel":239},[104],[241],{"type":37,"value":107},{"type":31,"tag":40,"props":243,"children":244},{},[245],{"type":37,"value":112},{"type":31,"tag":32,"props":247,"children":248},{"id":115},[249],{"type":37,"value":118},{"type":31,"tag":40,"props":251,"children":252},{},[253],{"type":37,"value":123},{"type":31,"tag":40,"props":255,"children":256},{},[257],{"type":37,"value":128},{"type":31,"tag":40,"props":259,"children":260},{},[261],{"type":31,"tag":54,"props":262,"children":263},{"alt":134,"src":135},[],{"type":31,"tag":40,"props":265,"children":266},{},[267],{"type":37,"value":141},{"type":31,"tag":32,"props":269,"children":270},{"id":144},[271],{"type":37,"value":147},{"type":31,"tag":40,"props":273,"children":274},{},[275],{"type":37,"value":152},{"type":31,"tag":40,"props":277,"children":278},{},[279,280,285],{"type":37,"value":157},{"type":31,"tag":100,"props":281,"children":283},{"href":160,"rel":282},[104],[284],{"type":37,"value":164},{"type":37,"value":166},{"title":7,"searchDepth":168,"depth":168,"links":287},[288,289,290],{"id":34,"depth":168,"text":38},{"id":115,"depth":168,"text":118},{"id":144,"depth":168,"text":147},1782672901124]