Demystifying Web Development: Unravelling the World of Micro Front Ends, Component Libraries, and Experimentation

Hello, I'm Chris, a Senior Product Manager working in Digital Optimisation at Dunelm.

Through this blog, my ultimate objective is to provide you with an unambiguous insight into parts of Dunelm’s new technical landscape, empowering you with the knowledge to comprehend how our system works. Whether you are a fellow product manager, a curious developer, or simply an enthusiast eager to learn, I’m going to try my best to bridge the gap between complex web development concepts and tangible, real-world applications.

As our business continues to focus on growing its digital offerings, the significance of embracing new technical capabilities cannot be overstated. These capabilities act as the driving force behind innovation, efficiency, and sustained growth. They can produce enhanced user experiences, streamlined processes, and an improved developer experience for our business to meet ever-changing customer demands.

As we adapt to an ever-evolving digital landscape, it is not only crucial to develop and implement innovative technologies but equally essential to bring all colleagues on this transformative journey. The question is, how do you attempt to make complicated topics, digestible?

Now I love a good analogy, even more so when it relates to food, so I would like to talk to you about?WDaaS?— Web Development as a Sandwich.

Why a sandwich?

Well, our new tech and a sandwich typically consist of three key elements assembled together.

The Bread — Native Micro Front End (MFE)

Like bread in a sandwich, each native MFE serves as a reliable application foundation.

It represents a self-contained capability that can be developed, deployed, and scaled independently. Just as different sandwiches can have diverse types of bread, each MFE can be written in a different programming language or framework, depending on the specific requirements e.g. React, Angular, Vue, etc.

The Filings — Component Library

The fillings in a sandwich should add flavor and substance.

Similarly, the component library consists of reusable web page (UI) components that add functionality and consistency to the MFE architecture. These components, like the fillings, can be mixed and matched to create different visual experiences across the application.

The sauces & seasoning— Styling

So, you think you have a good sandwich, wrong! Adding some sauces like mayo, mustard or even spices will enhance the taste and overall look of your sandwich.

Likewise, for our web pages, we can have some great components, but without the right styling, the experience can be a little flat. The component library allows styles to be applied at the component level to customise the look and feel, whilst keeping application consistency.

Just the right number of Chefs!

Making a great?sandwich takes skill, lots of experimenting, and practice. It is also not done alone!

Cultivating a collaborative and innovative culture across proficiencies is essential for adopting new tech. Founding appropriate governance and enabling shared ownership, allows colleagues to gain a real sense of purpose from their contributions.

Native Micro Front End (MFE) — Team Ownership

A mismatched bread and fillings combination creates a sandwich that lacks harmony and coherence. For an MFE, a bad combination is a specific technology or framework that is incompatible with the component library or does not align with the overall requirement of the application.

This is why the?engineering?teams are the experts when it comes to knowing what bread is needed, ensuring a solid foundation for the sandwich, and complementing any fillings & styling?we wish to add.

Component Library — Shared Ownership

People will always want to find new fillings to add to their sandwiches, but you can’t just slap on a tomato and assume it's going to make the sandwich better!

You must consider whether that filling will enhance the sandwich through the flavours, textures, and overall substance. This is where the design system & the UX team comes in, they look to enhance the functionality, usability, and overall user experience of the component library. The tech team's contributions add functionality, stability, and reusability to the component library.

Styling — Shared Ownership

UX contributions add usability, and visual appeal, enhancing the overall user experience of the component library. Just like a well-balanced seasoning, the UX team aims to create a seamless user experience through cohesive and appealing UI.

No one likes compromising on the quality and consistency of the sauce! Seeing your sauce go off, lose its flavour, or change consistency could ruin the whole sandwich! Engineering teams focus on high-quality, compatible, and manageable code, resulting in a well-seasoned and delightful component library.

Variety?is?the spice of life — Experimentation

How do we know the best way to offer the sandwich? How might we find out if customers like it or whether it can be improved?

Choosing how the sandwich could be presented is achieved through?feature flagging.

This technique allows us to decide how we want to introduce new variations or features for experimentation and validation purposes. In the realm of experimentation, hypotheses form the foundation of any experiment, shaping the “why” of what we are trying to understand. In sandwich terms, our hypothesis could be something like?we believe that slicing our sandwich into four equal parts achieves an improved taste and visual appeal.

Experimenting?with new & different fillings or sauces allows us to understand if customers prefer this over that.

By employing an array of experimentation techniques such as A/B testing, MVT (Multivariate Testing), and leveraging the power of our component library, we gain invaluable insights into customer preferences, enabling us to discern which features they prefer over others.

Knowing?what?to test is equally as important as the test itself.

The importance of experimentation lies in its ability to provide valuable data and insights which enable informed decision-making when considering new features.

In Summary

No pain, no grain

Throughout our scrumptious exploration, we layered the intricacies of Micro Front Ends, creating a sandwich of sophisticated architecture that adds just the right crunch to our web applications. Next, we savored the delightful layers of Component Libraries, building a sandwich that offered a harmonious blend of seamless user experiences and rapid development.

Sandwich puns aside, not everyone may possess an innate understanding of these new technologies or the intricacies of an engineering team’s work. There will be topics that may be complex and difficult to understand. It is vital that we recognise that the value of new technical capabilities lies not just in the technology itself, but also in the profound impact it has on our people and our organisation.

This blog will be the first of many artifacts designed to bridge the knowledge gap, and to build a shared understanding across our business, enabling a successful future in the digital era.

For more about MFE’s see —?https://engineering.dunelm.com/rebuilding-dunelm-com-one-mirco-frontend-at-a-time-18f588fd4edb