More women in the teams! That's better. For men too.

Peter Ehrenberg — Fri, 05 Mar 2021 16:21:37 +0000

I'm not talking about football, I don't know anything about that. I'm talking about teams that want to build products that customers love.

More than once I've seen top-class teams made up of alpha males fail miserably. Individually, they might have succeeded. But as a team? Tunnel vision coupled with strong opinions can quickly become a problem.

With us knowledge workers, mixed teams are simply better. Young, old, man, woman, diverse, different cultures, colourful: this enriches perspectives, experiences and talents. The team can draw on all this. And it is precisely this that strengthens creativity, imagination and ability as a source of ideas, approaches and solutions.

Working in self-organised teams is always an imposition and demands a lot from the team members: openness, courage, respect, commitment and focus. We all know how exhausting the storming phase in the team is. But even in this phase, a diverse team can draw on its many strengths, complement each other and thus be superior.

Honestly, I (as a man) have no desire to work in an all-male team anymore. For me, that has the mustiness of a losers' locker room. Quite selfishly, I would like to see: more women in the teams!

So men: #SheCodedAlly

Micro frontends with Feature Hub

Peter Ehrenberg — Thu, 21 Jan 2021 15:54:45 +0000

The idea of micro frontends is to split a web app into several smaller applications and still provide seamless integration for the user.

The Feature Hub is an opinionated JavaScript implementation of the micro frontends approach to creating scalable web applications with multiple teams and different technologies.

Motivation for introducing micro frontends can be:

divide large, monolithic applications into several smaller self-contained applications
facilitate more frequent deployment through small, independent artifacts
create the ability to update, modernise or even rewrite parts of the front-end more incrementally than before smaller, more modular and better maintainable code bases
scalable organisations through decoupled, autonomous teams with end-to-end responsibility
allow a vertical cut along user features (instead of along technical levels)
bring together different technologies, e.g. a classic (non-headless) CMS and SPAs by avoiding using the CMS as application platform

The Feature Hub approach

Feature Hub comes with three basic concepts:

Integrator: The integrator assembles the web page from several applications (Feature Apps) and places them into the content on the page.

Feature App: In the context of Feature Hub, a micro frontend is called a Feature App. A Feature App encapsulates a UI feature that can be assembled and reused. Feature Apps can share state (via Feature Services) to enable a consistent user experience.

Feature Service: A Feature Service provides a shared state to the Feature Apps to ensure a consistent user experience. They also allow encapsulation of browser APIs and resources that are not intended to be shared (e.g. history, local storage).

Feature Hub supports the use of any front-end technologies such as Vue.js, Angular or React. Feature Hub also allows different technology choices for the integrator as well as for the Feature Apps. While it is possible to create a custom solution for the integrator tailored to the UI frameworks or libraries of choice, for both React.js and Web Components, Feature Hub provides out-of-the-box solutions.

For their daily work Feature App teams typically build a simplified integrator, which only contains what their FeatureApp needs to run and be tested. This way they do not constantly need to rely on an integration environment, but using their own independent “development integrator”.

Feature Apps should be self-contained, end-to-end and with sufficiently user value or business value, so that a team can develop and operate the application autonomously and independently. Connections to backend systems are in the responsibility of the respective Feature App (and usually done via a Backend for Frontend/BFF). FeatureApps can and should be deployed independently from each other.

The Feature Services are rather lean and only share specific state information between Feature Apps. Feature Services provide a versioned API to enable backward compatibility and thus flexible and decoupled implementations of different Feature Apps.

Our experience after 2 years Feature Hub

The Feature Hub has been created by SinnerSchrader as part of our client work in 2018. In order to facilitate collaboration and reusability, we decided to publish the core functionality of our micro frontend solution as open source (MIT license).

In our client project the integrator in the production environment based on an Enterprise Content Management System/CMS (Adobe Experience Manager/AEM in our case) using Feature Hub.

A nice special feature of our CMS solution is that it allows the author/editor to compose a page equally from modular content elements and also from various Feature Apps. For the end-user of the page, the transitions between a content element and a Feature App should not be visible.

We are currently using the React integrator only. It is capable of rendering Feature Apps which are also built using React on the server as well as on the client (server side rendering/SSR). This enables us to meet the search engine optimization (SEO) requirements of our client.

In the meantime, several teams from the client's company are contributing to our client project worldwide with their market- and use-case-specific Feature Apps using micro frontends based on Feature Hub. Our client's project git has in between several hundred users and over a hundred repositories.

Introducing micro frontends definitely come with additional technical complexity. Before you introduce this into your software, you should definitely ask yourself two questions:

Is it also OK from your user's point of view to split different functions into separate pages so that you don't need deep UI integration?
Do you have still unused options to structure your software in such a way that smaller units can be developed and deployed independently from each other?

In these cases, if I were you, I would try these options first instead the micro frontend approach.

But for all the technical complexity of our project at this scale, our insight is that by far the biggest challenge, and at the same time the biggest opportunity for an optimal user experience, is in the interaction, collaboration and alignment between the different business parties involved.

How to start?

If you want to quickly try out micro frontends based on Feature Hub, as part of the documentation there is a simple demo (todoMVC) available as source and live.

References