[{"data":1,"prerenderedAt":582},["ShallowReactive",2],{"content-query-3RlzNYy0Gx":3},[4,201,353,409],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"status":11,"image":12,"date":13,"head":14,"body":28,"_type":195,"_id":196,"_source":197,"_file":198,"_stem":199,"_extension":200},"/en/blog/rethinking-green-web-design","blog",false,"","Rethinking Green Web Design","My journey to a sustainable website started with a radical goal: minimize its carbon footprint at all costs. I succeeded, reducing emissions from 5 grams to just 0.06 grams of CO2 per pageview. But I realized that minimising to zero was not representative for real life projects. And even more: visitors needed more than plain text to connect with my content and mission.","PUBLISHED","/images/blog/rethinking-green-web-design/100-procent-green-web-design.jpg","2025-02-04",{"meta":15},[16,19,22,25],{"name":17,"content":18},"keywords","sustainable it, green it, green web design",{"name":20,"content":21},"robots","index, follow",{"name":23,"content":24},"author","Emiel Kwakkel",{"name":26,"content":27},"copyright","© 2026 Emiel Kwakkel",{"type":29,"children":30,"toc":187},"root",[31,39,46,64,69,74,80,91,96,102,107,112,118,171,177,182],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","The result? A redesigned website that balances sustainability with usability. While the footprint has increased slightly to 0.21 grams per pageview, the enhanced design now includes professional layouts, photos of my talks, and embedded event videos, all optimized for efficiency. Here’s how I approached this trade-off.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"the-most-sustainable-website",[44],{"type":37,"value":45},"The Most Sustainable Website",{"type":32,"tag":33,"props":47,"children":48},{},[49,62],{"type":32,"tag":50,"props":51,"children":55},"a",{"href":52,"rel":53},"https://info.cern.ch/hypertext/WWW/TheProject.html",[54],"nofollow",[56],{"type":32,"tag":57,"props":58,"children":61},"img",{"alt":59,"src":60},"World Wide Web first website","/images/blog/rethinking-green-web-design/first-website-w3.jpg",[],{"type":37,"value":63},"\nIf sustainability were the sole goal, the most eco-friendly website would be a HTML page with no images, no styling, just plain text with hyperlinks.",{"type":32,"tag":33,"props":65,"children":66},{},[67],{"type":37,"value":68},"But here’s the catch: a website exists to communicate. Stripping away visual appeal and usability undermines the site’s purpose. My initial minimalist design aligned with sustainability goals but fell short in delivering value to visitors.",{"type":32,"tag":33,"props":70,"children":71},{},[72],{"type":37,"value":73},"This dilemma reflects a broader reality in sustainable IT: efficiency must always balance with usability. Absolute minimalism in digital design might save a few grams of CO2 per pageview, but in the grand scheme of things, the impact is marginal compared to larger issues in the tech industry, such data center energy usage, use of scarse resources for device manufacturing and generative AI.",{"type":32,"tag":40,"props":75,"children":77},{"id":76},"designing-for-purpose-and-usability",[78],{"type":37,"value":79},"Designing for Purpose and Usability",{"type":32,"tag":33,"props":81,"children":82},{},[83,89],{"type":32,"tag":57,"props":84,"children":88},{"alt":85,"src":86,"float":87},"Updated website","/images/blog/rethinking-green-web-design/updated-website.jpg","right",[],{"type":37,"value":90},"\nWhile updating my website, I focused on finding a middle ground. The new design embraces modern web standards while keeping performance at the forefront. Here’s what changed:",{"type":32,"tag":33,"props":92,"children":93},{},[94],{"type":37,"value":95},"The updated site includes sections for photos of my talks, presentations, and embedded YouTube videos of event recordings. These elements are optimized, ensuring they load efficiently. I use formats like WebP for images and embed YouTube videos in a way that defers loading until a user interacts with them. The redesign also included accessibility improvements, ensuring that users with different needs can navigate and interact with the site.",{"type":32,"tag":40,"props":97,"children":99},{"id":98},"the-trade-off-from-006-to-021-grams",[100],{"type":37,"value":101},"The Trade-Off: From 0.06 to 0.21 Grams",{"type":32,"tag":33,"props":103,"children":104},{},[105],{"type":37,"value":106},"Yes, the new design has increased the carbon footprint of my website—from 0.06 grams to 0.21 grams per pageview. At first glance, this might seem like a step backward, but in the broader context, this increase is negligible.",{"type":32,"tag":33,"props":108,"children":109},{},[110],{"type":37,"value":111},"What matters is the potential for greater impact. The updated design makes my content more engaging and shareable, which I hope will help amplify the message of sustainable IT practices. The additional CO2 emissions are outweighed by the potential to inspire others to adopt eco-friendly principles in their own digital projects.",{"type":32,"tag":40,"props":113,"children":115},{"id":114},"lessons-learned",[116],{"type":37,"value":117},"Lessons Learned",{"type":32,"tag":119,"props":120,"children":121},"columns",{},[122],{"type":32,"tag":123,"props":124,"children":125},"ul",{},[126,143,157],{"type":32,"tag":127,"props":128,"children":129},"li",{},[130,137,141],{"type":32,"tag":131,"props":132,"children":134},"h3",{"id":133},"balance-is-key",[135],{"type":37,"value":136},"Balance is key:",{"type":32,"tag":57,"props":138,"children":140},{"alt":139,"src":86},"Alt",[],{"type":37,"value":142},"\nSustainability isn’t about perfection, it’s about making thoughtful trade-offs. A balance between efficiency and usability often achieves the best results.",{"type":32,"tag":127,"props":144,"children":145},{},[146,152,155],{"type":32,"tag":131,"props":147,"children":149},{"id":148},"impact-over-perfection",[150],{"type":37,"value":151},"Impact over perfection:",{"type":32,"tag":57,"props":153,"children":154},{"alt":139,"src":86},[],{"type":37,"value":156},"\nThe goal of reducing emissions shouldn’t compromise a site’s ability to fulfill its purpose. A slightly higher carbon footprint is acceptable if it helps spread a valuable message.",{"type":32,"tag":127,"props":158,"children":159},{},[160,166,169],{"type":32,"tag":131,"props":161,"children":163},{"id":162},"optimization-matters",[164],{"type":37,"value":165},"Optimization matters:",{"type":32,"tag":57,"props":167,"children":168},{"alt":139,"src":86},[],{"type":37,"value":170},"\nEven with added media, there are ways to keep a website efficient. Compressing images, deferring non-essential scripts, and using green hosting providers are all steps in the right direction.",{"type":32,"tag":40,"props":172,"children":174},{"id":173},"final-thoughts",[175],{"type":37,"value":176},"Final Thoughts",{"type":32,"tag":33,"props":178,"children":179},{},[180],{"type":37,"value":181},"Sustainability in web design is about more than just cutting emissions; it’s about creating digital experiences that are both responsible and impactful. My updated website may not be as lightweight as its earlier version, but it’s far more effective in sharing the message of sustainable IT practices.",{"type":32,"tag":33,"props":183,"children":184},{},[185],{"type":37,"value":186},"As you think about your own projects, remember that the most sustainable choice isn’t always the simplest or most minimalistic one. Instead, aim for solutions that balance efficiency with purpose, because, ultimately, the greenest website is one that inspires action.",{"title":8,"searchDepth":188,"depth":188,"links":189},2,[190,191,192,193,194],{"id":42,"depth":188,"text":45},{"id":76,"depth":188,"text":79},{"id":98,"depth":188,"text":101},{"id":114,"depth":188,"text":117},{"id":173,"depth":188,"text":176},"markdown","content:en:blog:rethinking-green-web-design.md","content","en/blog/rethinking-green-web-design.md","en/blog/rethinking-green-web-design","md",{"_path":202,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":203,"description":204,"status":11,"image":205,"date":206,"head":207,"body":214,"_type":195,"_id":350,"_source":197,"_file":351,"_stem":352,"_extension":200},"/en/blog/sustainable-choices","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","/images/talks/24-hidden-impact/the-hidden-impact-of-developers.jpg","2022-09-10",{"meta":208},[209,211,212,213],{"name":17,"content":210},"sustainability",{"name":20,"content":21},{"name":23,"content":24},{"name":26,"content":27},{"type":29,"children":215,"toc":345},[216,222,227,232,240,245,250,255,260,265,275,287,292,298,303,308,316,321,326,331],{"type":32,"tag":40,"props":217,"children":219},{"id":218},"how-to-make-concious-choices",[220],{"type":37,"value":221},"How to Make concious choices?",{"type":32,"tag":33,"props":223,"children":224},{},[225],{"type":37,"value":226},"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":32,"tag":33,"props":228,"children":229},{},[230],{"type":37,"value":231},"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":32,"tag":33,"props":233,"children":234},{},[235],{"type":32,"tag":57,"props":236,"children":239},{"alt":237,"src":238},"First version of emielkwakkel.nl","/images/blog/sustainable-choices/emielkwakkel-nl-old.png",[],{"type":32,"tag":33,"props":241,"children":242},{},[243],{"type":37,"value":244},"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":32,"tag":33,"props":246,"children":247},{},[248],{"type":37,"value":249},"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":32,"tag":33,"props":251,"children":252},{},[253],{"type":37,"value":254},"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":32,"tag":33,"props":256,"children":257},{},[258],{"type":37,"value":259},"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":32,"tag":33,"props":261,"children":262},{},[263],{"type":37,"value":264},"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":32,"tag":33,"props":266,"children":267},{},[268,270],{"type":37,"value":269},"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":32,"tag":57,"props":271,"children":274},{"alt":272,"src":273},"Current draw in mA","/images/blog/sustainable-choices/colour-energy-usage.png",[],{"type":32,"tag":33,"props":276,"children":277},{},[278,280],{"type":37,"value":279},"Source: ",{"type":32,"tag":50,"props":281,"children":284},{"href":282,"rel":283},"https://www.wholegraindigital.com/blog/dark-colour-web-design/",[54],[285],{"type":37,"value":286},"Wholegrain Digital",{"type":32,"tag":33,"props":288,"children":289},{},[290],{"type":37,"value":291},"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":32,"tag":40,"props":293,"children":295},{"id":294},"new-challenges",[296],{"type":37,"value":297},"New challenges",{"type":32,"tag":33,"props":299,"children":300},{},[301],{"type":37,"value":302},"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":32,"tag":33,"props":304,"children":305},{},[306],{"type":37,"value":307},"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":32,"tag":33,"props":309,"children":310},{},[311],{"type":32,"tag":57,"props":312,"children":315},{"alt":313,"src":314},"KickstartGreen Dependency Graph in kaart gebracht met NX","/images/blog/sustainable-choices/kickstartgreen-nx.png",[],{"type":32,"tag":33,"props":317,"children":318},{},[319],{"type":37,"value":320},"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":32,"tag":40,"props":322,"children":323},{"id":173},[324],{"type":37,"value":325},"Final thoughts",{"type":32,"tag":33,"props":327,"children":328},{},[329],{"type":37,"value":330},"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":32,"tag":33,"props":332,"children":333},{},[334,336,343],{"type":37,"value":335},"All projects mentioned in this article are available on my ",{"type":32,"tag":50,"props":337,"children":340},{"href":338,"rel":339},"https://github.com/emielkwakkel",[54],[341],{"type":37,"value":342},"personal GitHub",{"type":37,"value":344},".",{"title":8,"searchDepth":188,"depth":188,"links":346},[347,348,349],{"id":218,"depth":188,"text":221},{"id":294,"depth":188,"text":297},{"id":173,"depth":188,"text":325},"content:en:blog:sustainable-choices.md","en/blog/sustainable-choices.md","en/blog/sustainable-choices",{"_path":354,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":355,"description":356,"status":11,"image":357,"date":358,"head":359,"body":366,"_type":195,"_id":406,"_source":197,"_file":407,"_stem":408,"_extension":200},"/en/blog/angular-react-vue","Angular, React of Vue?","Angular, React of Vue? The most frequently asked question in the front-end world, and one that will inspire countless blogs and vlogs. Questions like “Which framework should I learn?” and “Are you an Angular/Vue/React developer?” suggest that as a developer, you need to pick one—or that the choice is made for you based on the project you’re working on. It’s time to change that mindset.","/images/blog/angular-react-vue/angular-react-vue.jpg","2021-02-19",{"meta":360},[361,363,364,365],{"name":17,"content":362},"angular, react, vue",{"name":20,"content":21},{"name":23,"content":24},{"name":26,"content":27},{"type":29,"children":367,"toc":403},[368,374,379,384,389,394],{"type":32,"tag":40,"props":369,"children":371},{"id":370},"its-time-to-change-the-mindset",[372],{"type":37,"value":373},"It's time to change the mindset.",{"type":32,"tag":33,"props":375,"children":376},{},[377],{"type":37,"value":378},"I’m mostly in the Angular camp—on most projects, I’ve primarily worked with Angular. As a trainer for AngularJS and Angular Fundamentals, I’m happy to share that knowledge. But I don’t see myself as an “Angular Developer.” It’s just a framework. It’s 95% plain TypeScript, a toolkit that helps you focus on building functionality.",{"type":32,"tag":33,"props":380,"children":381},{},[382],{"type":37,"value":383},"Are you an Angular developer? Then you might miss that amazing React opportunity where you could have made a real impact. Are you 100% focused on React? Then that Vue project at ABN might pass you by. And you’ll quickly discover that the framework you’ve chosen is used differently at every client.",{"type":32,"tag":33,"props":385,"children":386},{},[387],{"type":37,"value":388},"To test this, I spent three hours one evening building a Vue 3 version of my Encrypt app. Transitioning from @angular/http to Axios, from Angular Services to Vue Mixins, from @angular/router to vue-router, and from Reactive Forms to v-model input binding. The result can be viewed here. Does it follow all Vue 3 best practices? Not fully yet, but that will come naturally when you work with it full-time on a client project.",{"type":32,"tag":33,"props":390,"children":391},{},[392],{"type":37,"value":393},"With your new mindset, you’ll have confidence in your foundation of HTML, CSS, JavaScript, TypeScript, Node.js, and your ability to read documentation. Whether you’re building a chatbot with the Alexa SDK NPM package, a backend with GraphQL, an Ionic hybrid app, or simply an Angular/React/Vue PWA—the client’s needs come first, not the framework.",{"type":32,"tag":33,"props":395,"children":396},{},[397],{"type":32,"tag":398,"props":399,"children":400},"em",{},[401],{"type":37,"value":402},"We make technology work!",{"title":8,"searchDepth":188,"depth":188,"links":404},[405],{"id":370,"depth":188,"text":373},"content:en:blog:angular-react-vue.md","en/blog/angular-react-vue.md","en/blog/angular-react-vue",{"_path":410,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":411,"description":412,"status":11,"image":413,"date":414,"head":415,"body":422,"_type":195,"_id":579,"_source":197,"_file":580,"_stem":581,"_extension":200},"/en/blog/deliver-value-using-lerna","Deliver more value using Lerna","Big organisations are increasing their efforts to adjust to demanding markets and focus on high quality customer journeys. In a time where startups, freed of collected technological complexity caused by years of iterative development, are disrupting the markets, organisations have to step up their game. By taking a modern approach time spent on maintaining the whole development environment and supporting tooling can be cut.","/images/blog/deliver-value-using-lerna/lerna-introduction.jpg","2018-10-15",{"meta":416},[417,419,420,421],{"name":17,"content":418},"frontend architecture, lerna",{"name":20,"content":21},{"name":23,"content":24},{"name":26,"content":27},{"type":29,"children":423,"toc":571},[424,430,435,443,448,453,458,465,470,475,481,486,492,497,510,515,521,526,532,537,542,550,555,560,566],{"type":32,"tag":40,"props":425,"children":427},{"id":426},"how-a-monorepository-driven-architecture-powered-by-lerna-can-deliver-more-value",[428],{"type":37,"value":429},"How a monorepository driven architecture powered by Lerna can deliver more value",{"type":32,"tag":33,"props":431,"children":432},{},[433],{"type":37,"value":434},"In this article I'll give you an in-depth frontend perspective on how a Lerna based monorepo will enable you to regain focus on delivering added value to your customers.",{"type":32,"tag":33,"props":436,"children":437},{},[438],{"type":32,"tag":57,"props":439,"children":442},{"alt":440,"src":441},"Frontend Challenges","/images/blog/deliver-value-using-lerna/lerna-challenges.jpg",[],{"type":32,"tag":33,"props":444,"children":445},{},[446],{"type":37,"value":447},"Just like many other reasonable organisations yours might be well ahead in organising DevOps, building complex CI/CD architectures and converting big monoliths into manageable packages. But how do you manage all that? Having over a dozen repositories with code developed by several teams, containing semi-generic frontends for cross-platform applications introduces challenges.",{"type":32,"tag":33,"props":449,"children":450},{},[451],{"type":37,"value":452},"What project should a new developer checkout to get started? How to progress in continuous delivery if the whole proces of building, unit testing, e2e testing, releasing and deploying of the application takes hours? How can all pipelines be maintained in the most generic way? And how to ensure all packages are tested together before a release if packages all have ambiguous versioning? Can you even tell which packages are currently in production?",{"type":32,"tag":33,"props":454,"children":455},{},[456],{"type":37,"value":457},"On top of that, business is demanding focus on improving the customer journey and quicker adaption of the changing environment. With increasingly more complex development environments the reality is that we attempt to keep up with the latest framework, having all pipelines in the green, and let's not forget meeting new regulations. But how can we improve? Isn't that single repository architecture just a hype? And haven't we stepped away from building monolith applications?",{"type":32,"tag":33,"props":459,"children":460},{},[461],{"type":32,"tag":57,"props":462,"children":464},{"alt":463,"src":413},"Introduction into Lerna",[],{"type":32,"tag":33,"props":466,"children":467},{},[468],{"type":37,"value":469},"To be clear, Lerna doesn't speed up your applications performance, neither will it enable you to use other programming techniques. The promise is simple. Lerna will simplify managing your mono repository code, as it provides tools for efficiently installing dependencies (bootstrapping), linking local projects, versioning including automated release notes and running commands on all packages in parallel or scoped to a smaller set of packages.",{"type":32,"tag":33,"props":471,"children":472},{},[473],{"type":37,"value":474},"Furthermore, Lerna takes the modular approach. Yes, all code is stored in a single repository, but there is in no way a monolith since all code is split up in npm packages. All separately releasable in your private registry.",{"type":32,"tag":40,"props":476,"children":478},{"id":477},"versioning",[479],{"type":37,"value":480},"Versioning",{"type":32,"tag":33,"props":482,"children":483},{},[484],{"type":37,"value":485},"Having unambiguous versioning will make it clear which version is to be tested and which is in production. No more discussions on which versions of different packages are tested as a whole. You'll have the possibility to release all packages, straightening out all version numbers, or just releasing a single package for a quick hotfix. Versions will meet semver standards and automated release notes are made possible using conventional commits.",{"type":32,"tag":40,"props":487,"children":489},{"id":488},"scoping",[490],{"type":37,"value":491},"Scoping",{"type":32,"tag":33,"props":493,"children":494},{},[495],{"type":37,"value":496},"With your packages all tucked away in neatly organised folders the first challenge arises. It's hard to run commands for a single package, or a subset of packages, manually or automated. You'll have to point the terminal at each single package before executing the command. Lerna solves this issue by allowing you to run commands from the root of the project, which will be executed on all packages matching the provided scope.",{"type":32,"tag":498,"props":499,"children":504},"pre",{"className":500,"code":502,"language":503,"meta":8},[501],"language-bash","lerna run --scope feature-* test\n","bash",[505],{"type":32,"tag":506,"props":507,"children":508},"code",{"__ignoreMap":8},[509],{"type":37,"value":502},{"type":32,"tag":33,"props":511,"children":512},{},[513],{"type":37,"value":514},"This single command runs unit tests over all packages of which the package name starts with 'feature-'.",{"type":32,"tag":40,"props":516,"children":518},{"id":517},"yarn-workspaces",[519],{"type":37,"value":520},"Yarn workspaces",{"type":32,"tag":33,"props":522,"children":523},{},[524],{"type":37,"value":525},"Optionally use Yarn to manage your package architecture. It will enable you to run 'yarn install' once in order to install all package dependencies, intelligently symlinking local packages. The linked packages will enable you to immediately see the effect of changed code in another dependent codebase.",{"type":32,"tag":40,"props":527,"children":529},{"id":528},"to-lerna-or-not-to-lerna",[530],{"type":37,"value":531},"To Lerna or not to Lerna",{"type":32,"tag":33,"props":533,"children":534},{},[535],{"type":37,"value":536},"So should any frontend project be setup as a Lerna monorepo? In short: no, for regular projects a monorepo architecture is overkill. If you have several packages running independently the benefits of a monorepo setup might also be less convincing.",{"type":32,"tag":33,"props":538,"children":539},{},[540],{"type":37,"value":541},"Look for example at Angular, which is setup as a Lerna monorepo. All packages add to the functionality of the framework, however all packages are setup in a modular way. In no way Angular is a monolith. Packages can be separately be build, tested and released, but at the same time form a framework of connected packages.",{"type":32,"tag":33,"props":543,"children":544},{},[545],{"type":32,"tag":57,"props":546,"children":549},{"alt":547,"src":548},"Architectural overview","/images/blog/deliver-value-using-lerna/lerna-architecture.jpg",[],{"type":32,"tag":33,"props":551,"children":552},{},[553],{"type":37,"value":554},"In the above high-level diagram a generic multi-platform application setup is shown. Packages are part of a bigger scope. This way it's easy to run commands on specific parts of the application. There can be as many features as needed, which optionally dependent on modules (not displayed above) containing specific functionalities. Take for example a sales flow; based upon the platform, the type of feature loading it or other custom parameters the flow is able to adapt by loading in different modules.",{"type":32,"tag":33,"props":556,"children":557},{},[558],{"type":37,"value":559},"All packages use the core packages to function in a generic way and shared packages in which styles and UI components are made available. As a whole all packages combined make up the application running on all different platforms.",{"type":32,"tag":40,"props":561,"children":563},{"id":562},"more-focus-on-things-that-matter",[564],{"type":37,"value":565},"More focus on things that matter",{"type":32,"tag":33,"props":567,"children":568},{},[569],{"type":37,"value":570},"A single project, single checkout, single installation and a single pipeline all boil down to efficiency. If you are testing in feature branches, how complex is automated feature branche testing over multiple repositories? In the new architecture you only need one feature branch, which can be merged to develop once all tests have passed. Checking out dozens of repositories, all with their own structure, hard to maintain pipelines, separately installing all dependencies and manually linking local projects are all in the past. What's left is focus. Focus on building what really matters to your customers.",{"title":8,"searchDepth":188,"depth":188,"links":572},[573,574,575,576,577,578],{"id":426,"depth":188,"text":429},{"id":477,"depth":188,"text":480},{"id":488,"depth":188,"text":491},{"id":517,"depth":188,"text":520},{"id":528,"depth":188,"text":531},{"id":562,"depth":188,"text":565},"content:en:blog:deliver-value-using-lerna.md","en/blog/deliver-value-using-lerna.md","en/blog/deliver-value-using-lerna",1782672901047]