In this episode of the Smashing Podcast, we’re talking about micro-frontends. What is a micro-frontend and how is that different from the sort of approach we might be taking at the moment? Drew McLellan finds out from micro-frontend pioneer, Luca Mezzalira.

Show Notes

Weekly Update

• “Adding Dynamic And Async Functionality To JAMstack Sites,” Jason Lengstorf
• “Quantitative Data Tools For UX Designers,” Adonis Raduca
• “Creating Voice Skills For Google Assistant And Amazon Alexa,” Tris Tolliday
• “Beyond Sprint 0: An Alternative For Integrating Teams,” Shamsi Brinn
• “Helping Browsers Optimize With The CSS Contain Property,” Rachel Andrew

Micro-Frontends

• Luca Mezzalira‘s website
• Luca on Twitter
• “Micro-Frontends, The Future Of Frontend Architectures” on Medium
• More of Luca’s writing about micro-frontends can be found on his Medium account
• Luca’s book “Front-End Reactive Architectures”

Transcript

Drew McLellan: He’s a Google developer expert on web technologies and manager of the London JavaScript community. With more than 15 years experience, he currently works as VP of Architecture, designing sports video platform DAZN, which delivers on demand sports content to millions of users all watching live. He’s the author of the book Front-End Reactive Architectures for Apress and is also a technical reviewer for Apress, Packt Publishing, Pragmatic Bookshelf, and O’Reilly, as well as being an experienced public speaker at technical conferences all around the world. He’s Italian, sports a handsome beard, and clearly has deep knowledge of the web platform. But did you know he once crossed South America on an ostrich? My smashing friends, please welcome Luca Mezzalira. Hi, Luca. How are you?

Luca Mezzalira: I’m smashing.

Drew: I want to talk to you today about the subject of micro-frontends. Now this is a concept that’s completely new to me, certainly by the name, and I expect it’s new to a lot of our listeners, too. Before we get into micro-frontends themselves, I guess we should understand the problem that you’re looking to address with them. So perhaps you could tell us a little bit about how you see applications in a more traditional way and what sort of problems do those things hit that maybe micro-frontends might be the solution to?

Luca: Okay, that’s a good starting point, in my opinion. So usually when you implement or design a new green field project and you want to work with front end applications, you have a few architecture that you can leverage. You can use a single page application, you can use a server side rendering application, or you can use a multi-page application composed by just simple HTML pages. Obviously those are super valid options and I think very used by many, many developers. The real problem that we’re trying to solve here is how you can scale these concepts with distributed teams to hundreds of developers working on the same codebase, because the reality is when you’re working in these platforms in particular, when you think about SaaS platform for instance, you need to have multiple developers and multiple teams that are working on the same project. And obviously the way how, for instance, you do acquisition or retention is completely different on the way how you expose the catalog or how you show a specific part of a platform.

Luca: So now in my experience I work a lot with single-page application. I work with server-side rendering application, but at some point in DAZN I’d be asked to think about a way to scale our technical team. And I need to come up … if for backend we have some solution that are microservices in this case, so we can scale our APIs independently, and take in consideration that the scale and the volume for a specific throughput on a specific API. On the front end, really, it’s really more difficult because if you think about that, you don’t have technical problem to solve when you need to scale, if you’re using a single page application, for instance. Probably for a server-side rendering you have some, but on a single-page application, for instance, it’s distributed by nature because it’s on client-side, different client-side.

Luca: So the only thing that they are loading are just some static files like CSS and HTML and JavaScript that are served by CDN, and in that case you can scale accordingly, it’s not a big challenge. But the real challenge is how you scale the teams working on the same platform, because sometimes the challenges that are faced by one team could be completely different from the challenges that are faced by another team, and usually what you do is you try to find a lot of tradeoffs between the things. Because if you think, let’s try to think on a normal use case. So usually when you start a platform you’re starting small. So you try to create that quick single-page application, as well you have your monolith, so you just set up everything in your CICD just once for front end and back end, and then you start to iterate on your logic. But the reality is when you have success, you need to evolve this part, and it’s not always maintaining the same architecture that could, let’s say, create the benefit for your business, because maybe you can find some bottlenecks.

Luca: So now going back to the single-page application part. So if we want to scale a single-page application part, the challenge is not technical, it’s with humans if you want. So how we can scale teams working on the same application. So what I did a few years ago is, was the starting to look at a possible architecture that and principles that would allow me to scale the front end as well as the backend. So working on the backend principles so that you can find the microservices. I started to look at the different solution and they came out with the micro-frontends that at the beginning we didn’t even call it that way because obviously for years ago there wasn’t the, let’s say, that name for that specific architecture.

Luca: But the reality is taking a monolith, so a single page application and slicing it in a way that will allow us to focus ourselves in a tiny problem. So a smaller problem than the entire application and trying to solve that in the best way possible. Technically speaking. Obviously that lead to have independent pieces of your frontend application that could be deployed in production without affecting all the others. So the challenge basically for Micro-frontend is trying to figure out their way to take a single page application or server side rendered application and create a artifact of these, let’s say, as close as possible to a business domain, and can be deployed independently.

Drew: So I mean you mentioned micro services on the back end. So conceptually this is a similar sort of solution to the problem. The micro services serve on the back end, but ported over to the front end. Is that a rough equivalence or is it more involved in that?

Luca: Yes. No, it’s a way to solve the same problem it is trying to solve microservices on the back end but on the front end in this time. Usually when I started this journey at the beginning, you know, you start to think about that and you start to evaluate different approaches. And in the last few months I came up with what they call, the Micro-frontend decision framework that basically is four steps that they use in order to, let’s say you identify an approach for Micro-frontend, because if up to now, we usually pick one framework that designed architecture for us and we implement on top of their architecture. If you think about angular or think about React or Redux. You have all the pieces that are needed but you don’t take architectural decisions. You would take a design decisions or how you implement on top of that specific architecture.

Luca: So on Micro-frontend you need to start the step back. So we need to think about how we want to first slice our application. So there are two usually options for that. You can slice horizontally, so you can have multiple micro-frontends in the same view or you can slice vertically. Therefore you always load one Micro-frontend per time. And those decision are quite key because it will then cascade certain other options that you have based on the initial decision to make. So the first, as I said, you decide how you want to slice your application. The second one is how you want to compose your application. So you want to have like, for instance, an app shell that is loading one or multiple micro-frontends in the same view. You want to have, I don’t know, application server that is composing different fragments of your applications, so different Micro-frontend and then serve the final view to your user. Or you want to use edge-side included, it’s a standard that is inside of CDNs in order to compose a page and serve these there.

Luca: Those are three of the options that you have. And then apart from composing, then you need to think how you want to route. So how you route from, I don’t know, /login or /signin to the catalog part or a specific detail object. Also here you have like three option. You can do it at the application server, you can do it on CDN level with Lambda Edge or any other web workers in CloudFlare or anything else. Or you can do a client site. So you have a logic inside your app shell that you say, okay, now for this specific URL you need to load another view or another micro-frontend. And the last bit is how you communicate with Micro-frontend.

Luca: So usually if you have like multiple Micro-frontend on the same page, there is higher complexity on managing this communication, because you need to maintain the different Micro-frontend independent. So that means you cannot have any reference on how the page is structured. So usually you can use stuff like custom events or an event meter that is injected inside each single Micro-frontend. And then the Micro-frontend are communicating together. Obviously in the other case when you have like let’s say a vertical split off your Micro-frontend is way easier, because inside the vertical basically the representation of a vertical Micro-frontend is a single page application or a single page. And in that case it’s easier to let’s say create and share having a shared state across the entire Micro-frontend.

Luca: Then if you think about having multiple Micro-frontend all together, then you should avoid to have states that are shared across Micro-frontend, because otherwise you are coupling things. Instead of the whole concept here is decoupling and have independent deployment. And therefore let’s say the challenges of a horizontal split, which is the first decision you should take or vertical split, are completely different, and we need to be very well aware which one fits our use case.

Drew: So rather than a specific technical solution, micro frontends are very much like a design pattern that you would implement in whatever technology is appropriate for the particular problem you’re trying to solve?

Luca: Yeah, more than technology, I would see that we pick the right architecture for the right job. Just to give you an example, I was talking … there is a famous framework, a fairly new for Micro-frontend, it’s called Luigi framework, that was released by SAP open source. What they are doing is creating some iframes where they are wrapping their Micro-frontend inside it. So now if you think about that, let’s say, using iframes nowadays, you’re on a public website that maybe as the SEO or other features that are mandatory, it could be problematic.

Luca: But in the case of SAP, if you think about that, they have like enterprise application where they can control the browser that the user is using, they can control the environment, they don’t need to be available on a multitude or different version of the browser. So for them these thing allows them to have certain areas of the application that are constant and they have certain areas that are changing independently without any problem. But obviously an iframe solution wouldn’t work in other situation. Just to give another example, Spotify, we’re using iframes at the beginning. In fact the desk publication is still composed by multiple iframes and each single iframe is a tiny application that does, I don’t know, just a music player or just their recommendation, whatever it is. They try to have the same approach on web, but they dismissed that this year in order to move back to a single page application.

Luca: And that means, they explain why in the technical blog, they were saying that obviously if you apply that to millions of users that are using iframes that needs to load every time the same vendors file. And then you have like a lot of dependancies duplicated and the time for interacting with your page would be longer. So in reality, this approach could fit for certain use cases, but they shouldn’t fit for all of them. That’s why I’m saying, as I described before, if you have a decision framework that helps you to address those thing and you can start to say, okay, I sliced the application in this way, therefore I have those options that are available when I want to compose, when I want to route, when I want to communicate, it should guide you in order to have the right decision at the right time.

Luca: Then obviously apart from those four decisions, there are many others. Like how you create consistency in the design system that you have across all the Micro-frontend. Or I don’t know how you manage the dependencies and avoid the clashing of the dependency inside the Micro-frontend, but the reality is those four decisions that I mentioned before will allow you to then take all the others in a quick way without having the problem of overthinking, which is the best solution because you already set the cornerstone, the four pillars, that will allow you to take all the other decision … I don’t say in a easy way, but in a quicker way than a review or the spectrum of opportunities.

Drew: You mentioned before, the way that Micro-frontend can help with the sort of structure of teams within your organization and having lots of people working on the same application. What are some of the implications then and does it make any difference if your teams are distributed or co located or are there any challenges that are faced there?

Luca: Yes. So I can tell you what is the story of DAZN. That is the company where I’m working on. Currently in DAZN, we had like a nice challenge. So currently we have over 300 people that are working on the front and the back end of our platform. It’s an OTT platform that is streaming live at sport events globally. And the interesting bit is if all microservices we know how to manage more or less and we have distributed teams. So we have four dev centers. We’d want to put teams in each single dev centers on the front, and we tried this approach and it work pretty well. So with Micro-frontend we were able to provide different business domains in different locations and allow the cross communication between teams inside a specific business domain, very because the worst case scenario there that if you have to speak with another team on your same business domain, you just reach the walking distance from your desk. If instead you need to discuss specific thing on the distributive team, so with maybe somebody in London instead of Amsterdam, or instead of company in Poland, you just organize a call.

Luca: But those kinds of communication are more rare than the ones that are happening across teams inside the same location. And that’s why we started working on that. So the first thing that they did was looking at how our users were interacting with our website, how did the company was structured. And when we identify the four key areas that we are working on, that are currently acquisition and retention, let’s say porting of their core application on multiple TV’s and mobile and having the core domain that for us is the video player and the discovery phase of our content. And finally all the back office elements. I was able to identify those four areas and we those four areas we assigned for each single dev center.

Luca: Obviously there are some point of contacts between those areas, but then there are ways that you can let’s say mitigate and have some initial workshop with the different teams that are in different location and then work towards the same API contract for instance, or the same goal with having some checkpoints during the development. But the nice thing of approaching that allowed approaching with Micro-frontend is the fact that we finally understand deeply how our system was working. We sit down and we analyze how we were structured and we changed not only the way how we were affected things, but also how the company was working. And that was a kind of a different approach from what they have seen so far. But it’s proving that is working pretty well in the case that each single team can interact with the team of the same location in the same domain.

Luca: So they are talking exactly on the same language if you are talking about the domain driven design. And that is that if they need to interact with other teams, they can literally share the workshop or flying to another dev center and it’s less than a problem. But in this way we let’s say, augment the throughput and reduce the communication overhead, and the extent of dependencies that were happening in other situation that they were working on.

Drew: And do all these teams need to be using like a standardized JavaScript framework? Do they all need to be coding in the same things, they all need to be either React or Angular or to enable the interoperability between them or can people be using different things for different Micro-frontend?

Luca: Yeah. So in DAZN we decided to slice vertically our Micro-frontend and that was a decision that allowed us to have the freedom to pick the technology that we need for each single Micro-frontend. Considering that every time we load one Micro-frontend per time and this means that for instance, that how we have a landing page is different from the sign in / sign up journey. So we can update … we’re mainly using React at the moment. But if, for instance, I remember when React 16 was a release that we were able to release in production React 16, also if it wasn’t in the stable version for just a landing page and see if it was working without affecting all the other teams.

Luca: And then at their own speed, at thier own pace, they were updating their own stuff. So that allows us also to let’s say try new technologies or new assumptions that we have on the existing application with a certain amount of users. Because we implement the also candidate releases for front end. We implement the, let’s say several practices that allows us to just try certain times in production and see how the things are working.

Luca: The beauty of these approaches that we can independently decide to have the right tool for the right job more than having a common denominator across the entire stack. Because as you can imagine, when you started to work on a project, the decision that you made the first few years are probably different on the decision that you made in a trajectory where the company’s growing, the business is evolving and these became more mature and the challenge is completely different. So it wouldn’t be flexible enough or agile enough, if you think about that, the fact that we stick with the same decision we take two years ago. In particular an institution like DAZN, that we move from basically zero to 3000 employees in three years. So as you can imagine it was a massive growth and it was a massive growth for the company as well as on the user base.

Drew: Is there an established way for the different Micro-frontend to share data and to communicate with each other, for example, just to keep each other in step with the same view or is there a way to do that?

Luca: Yes, there is. It depends which of the decision framework, which path you’re going to take. Because if you’re going to take the vertical slice that became very easy. So what we have in order to communicate through Micro-frontend is an app shell that is loading in Micro-frontend inside itself. And what it does is storing everything that has to be, let’s say, shared across different Micro-frontend or on a web storage, either a session or local storage or in memory. And then based on those information, the Micro-frontend is loaded, can retrieve from the app shell to this information and then consume that, amend that or change them. It’s completely up to how you slice the application, but in this case, just to provide an example, if you think when you are authenticated users and you need to go to the sign in page, when you in and the APIs are our consumed and they are providing a JWT token, Micro-frontend is passing these to the app shell and the app shell these starting we saved their web storage.

Luca: Then after that the app shell is loading the new authenticated area for that specific application and those authenticated areas, they’re retrieving the JWT token from the app shell and is performing either a refresh access token or is validating some data starting inside the JWT token. So it’s using basically the information that were produced by another Micro-frontend at their own wheel.

Drew: It sounds like a very interesting concept and I can potentially see lots of big advantages to working this way, but it can’t be without its challenges, surely. Are there any particular things that are more difficult to deal with when architecting things in this way?

Luca: I think first and foremost the main challenges that I see is the shift of mindset. Because before we were used to have a, let’s say, the tech leads or the lead developers that were deciding everything around an entire application taking all decisions. Now finally we move from this centralized entity to a de-centralized entity that is local for each state. As you can imagine, this is bringing some challenges because if before we have someone that is tracing the path, now is that we have, let’s say, multiple people at the top defining the right path inside their domain, and this is a huge shift of mindset.

Luca: On the other side, I think the complexity is accepting sometimes that you doing the wrong abstraction could be, let’s say, more expensive than duplicating code. And that’s I know there’s something that I found very challenging in managing developers because they’re thinking, “Okay, now I can reuse this object or this specific library hundreds of times inside the project,” but the reality is very different. I saw components library that were abstract and they spend a lot of time making that as the best code ever or the best in a perfect shape. But the reality were used just twice. So the effort of doing that, it wasn’t exactly that. I saw on the other side libraries that they started with a couple of use cases for a specific component. And then those use cases became 10 and then the code became unmaintainable.

Luca: So trying to add a new function inside the same component could be more at risk than a benefit. So I think the other thing that we need to understand with Micro-frontend is how much we want to share it and how much we want to duplicate. And there is no harm, honestly, duplicating. In our case for instance we have a duplication of footer and header, and we did that mainly because we changed like three times the header in four years. So as you can imagine the fact that we are centralizing these, are assigned to a team and create an external dependency for all the teams, all the hundreds of developers that we have, is more let’s say an issue that a benefit for the company because we are not adding an enormous value.

Luca: At the same time currently we are refactoring, our shared libraries that would be payment library, because obviously payment has some logic behind that and if we want to change once, we don’t want to apply that twice in multiple parts of the code. We want to have just one library that is a source of truth, but for the header and footer, also if there is a discrepancy or for pixel or there is a function that this is deployed like a week later, it won’t hurt the application.

Drew: So are there some telltale signs that people should look for when evaluating an application and thinking, “Oh yes, this would be a good candidate to move to a Micro-frontend sort of architecture?”

Luca: Yeah, so my suggestion would be first and foremost I wouldn’t start a greenfield project with Micro-frontend unless we know exactly how it should be built. And usually it’s very unlikely that you have this information because, particularly if you have a new platform or a new project and it’s the first time that you are working on this, it could be a nontrivial finding this information. Usually what I suggest is starting with an existing architecture that would be so a single page application and then evolving that. In particular for instance I found, I think that using Micro-frontend for legacy applications or when we want to replace specific part of the application or when we have a project that we want to evolve and scale for multiple teams, those are three use cases that I feel very strong could suit the Micro-frontend architecture. Obviously that doesn’t mean that from now on everything should be made Micro-frontend, because Micro-frontend is not the silver bullet at all.

Luca: What they are is an additional architecture that we can leverage on the front end world. And up to now we had like a certain amount of architectures, now we have an additional one. But that’s a lot of challenges because obviously you need to, if before server side rendering or a single page application, there are clear patterns that were explored and then implemented by several framework and so on. With Micro-frontend currently, is one way to do things. But adding the decision framework probably should allow people to make the right decisions for their use cases. Because often there are a lot of misconceptions on what Micro-frontend are and how they should be used. And lots of people are thinking that maybe let’s say, are evil for, I don’t know, having too many libraries in one view or other things.

Luca: The reality is you need to understand deeply the concept, understand how to implement that and then you can start to work on that. I fully agree that there are technical challenges and there are a lot of decisions that you have to make and you cannot just start straight away with an editor in front of you writing code and thinking, okay, now I’m creating a micro-frontend architecture. Because you need to understand the concept, understand the context and create, also governance around that because the complexity is not just writing the code, it’s also understanding how all the pieces are fitting together in the CICD part the SEO part and so on.

Luca: So Micro-frontend does provide, let’s say a level of flexibility and require a lot of effort for defining the governance right. Because when you have the governance right, everything would be smooth. Often and unfortunately I would say too often, I saw companies that where they don’t spend enough time on the governance side, understanding the CICD for instance, because they don’t think that this is important. But instead for Micro-frontend, like for microservices, having automation right will allow you to speed up the development. If you don’t spend enough time on the automation bit, you risk to have more burden than benefits.

Drew: I guess it’s like so many things in the web development world where people are in danger of diving in with a technical solution before they’ve really understood the problem. And it sounds like with Micro-frontend is very much a case you need to see the problem and then implement the solution to know what problem that you’re solving. I guess the very nature of Micro-frontend make it very easy to start integrating into an existing application, to spot a small problem and swap it out with a Micro-frontend in order to solve that problem. Is that a reasonable suggestion?

Luca: Yeah, I would say so. In this case, the only thing that I would suggest if we start in this way is looking more at the vertical slicing over the horizontal slicing, because otherwise you need to solve so many problems about, let’s assume that for instance you’re using Angular and you want to move to a new version of Angular. If you need to have two Angular version living together without using I-frame, it could be complicated or even not possible. So if you start, you the aspect not from … if you check the challenge, not from the technical point of view, but from the business point of view. Maybe for instance, you can take, I don’t know, the sign-in part on that you want to write with a different version or the same version but more update version of a framework and that could be a good way. And then you route through the path. That could be a good way to replace slowly but steady a specific application.

Luca: What we have done in our case is basically applying the strangler pattern that is a well known pattern for microservices, but on the front end. So based on the URL and based on the browser and country of the user. So slowly but steady, basically we were killing the monolith, that in this case was single page application, releasing our new application more often and see the behaviors of the users, if it was improving the experience, it was causing any problem on our system or not. And that allowed us to provide immediate value to the business, but at the same time allowed us to test our assumptions and see if we were going to the right direction or not.

Drew: It sounds like a very attractive solution to some problems I’m sure a lot of people are facing. If I, as a developer, wanted to start investigating more about Micro-frontend, where would be a good place to start?

Luca: Yes, so currently I’m spending a lot of my spare time trying to advocating around these architecture, because I think there are a lot of misconceptions. On my Medium account. I’ve wrote several articles that are available there as well. A recorded a lot of videos in conferences that you can find on YouTube without any problem. And the other thing I would suggest if you’re looking for some code example on some frameworks, the one that I would recommend to start with is a single SPA, mainly because it has a vertical slicing approach, it’s easier to pick it up and you can start to understand the benefit of this architecture. Then there are many others that are available. Before I mentioned Luigi framework, as well as many others that are currently out there that are allowing you to compose multiple Micro-frontends in the same view.

Luca: Like another one in my head is TailorJS is another interesting. But definitely there is open components that is one developed by Open Table. But in general there are plenty of opportunity if you start to search about Micro-frontend, they’re out there.

Drew: That sounds great. Is there anything else that you wanted to talk about with regard to the Micro-frontends?

Luca: Yeah. Personally I would suggest to take an open mind approach on learning this architecture and this approach, technical approach, mainly because I believe that there is a lot of good, but we need to, let’s say, invest a bit of time and spend a bit of time to deeply understand how the things are working. Because obviously there isn’t, just one way to do things. We are used that we take a framework and immediately we start to work on it and it’s super productive, if you think about that.

Luca: But in this case you need to spend a bit of more time understanding, as you said a couple of times, the problem. Understand which is the pattern that would allow you to express better not only from a technical point of view but those two from our organizational point of view, the solution that you have in mind.

Drew: So I’ve been learning all about Micro-frontend today. What have you been learning about lately?

Luca: Recently there are two things that I’m learning. So last week I was in Las Vegas during the AWS event and is obviously a cloud conference. Pretty amazing, 70,000 people, a lot of sessions that were spreading several hotels in Vegas. And there for me, a serverless is a paradigm that I’m studying the most because I truly believe that in the future that will be the way how we are going to design and implement software and obviously AWS is very prominent on this approach.

Luca: And the second topic is around management and how to be a leader of a tech team. Because obviously I’m SVP of architecture. I have a team of architects that I’m leading and you can never rest because you need to not only to be on top of the technical side, but you need also to understand the people problems, understand how you can make them successful. Because obviously if they are successful, you are successful. You are first a technical facilitator to a certain extent. So that for me, those for me are the two things that currently I’m studying on top of exploring the Micro-frontend world.

Drew: If you, dear listener, would like to hear more from Luca, you can follow him on Twitter where he’s @LucaMezzalira or find his activities collected together at Lucamezzalira.com. Thanks for joining us today, Luca. Did you have any parting words?

Luca: No, but thank you very much for listening up to now.

(dm, ra, il)