This week, guest host Ben Lloyd Pearson chats with Thayse Onofrio, Software Engineer at Clutch and ex Thoughtworks. Thayse discusses how micro frontends allow individual application components to be operated and deployed independently, helping teams avoid the complexities of a monolithic architecture. They cover the technicalities, challenges, and advantages of implementing micro frontends, including the importance of module federation and proper coordination among developer teams.
Learn about the future of frontend development, the cultural impacts, and the best practices from Thayse’s experience.
If the developers are not comfortable with the technical side of it, they don't know much about it, they might have some concerns initially. So, I would say that's more like a challenge, just making everyone feel comfortable with that as they go along.But outside of that, I think folks are generally happy about just having this independence and ownership.
So you heard it here, do micro frontends, your developers will be happy.
Episode highlights:
01:02 What is a micro frontend?
04:08 Building from scratch vs. out-of-the-box solutions
10:30 What’s the process for moving to a more micro frontend based approach?
15:46 What changes do you need to use a micro frontend framework?
17:28 What does a team using micro frontends benefit from once it's all set up?
Transcript:
[00:00:00] Thayse Onofrio: If the developers are not comfortable with the technical side of it, they don't know much about it, they might have some concerns initially. So, I would say that's more like a challenge, just making everyone feel comfortable with that as they go along.
But outside of that, I think folks are generally happy about just having this independence and ownership.
[00:00:20] Ben Lloyd Pearson: So you heard it here, do micro frontends, your developers will be happy.
How can you drive developer productivity, lower costs and deliver better products? On June 20th and 27th LinearB is hosting a workshop that explores the software engineering intelligence category. We'll showcase how data-driven insights and innovative workflow automations can optimize your software delivery practices. At the end of the workshop, you'll leave with a complimentary Gartner market guide to software engineering, intelligence, and other resources to help you get started. Head to the show notes or LinearB dot IO slash events to sign up today.
[00:00:56] Ben Lloyd Pearson: Hey everyone. Welcome back to Dev Interrupted. I'm Ben Lloyd [00:01:00] Pearson. I'm the Director of developer re relations at Linear B. I'm pleased to be joined by Thae Ferro, uh, the lead software engineer at ThoughtWorks. Thae, thanks for being here.
[00:01:10] Thayse Onofrio: Thank you. Thank you for having me. Very happy to be here.
[00:01:13] Ben Lloyd Pearson: Yeah, wonderful.
I, we, we were talking, we had a long trip from Brazil, so glad you made it here .
So.
So, we're going to talk a little bit about the session that you have here at this event. But, you know, I'm sure we'll touch on other subjects too. But, you know, the main thing is that, you know, as apps expand, that are needed to manage the various functionalities.
And without the right infrastructure, you know, this growth can lead to a host of issues from communication challenges and code conflicts to busy pipelines, tangled release interdependencies. It can be a pretty complex picture, and your talk is all about the solution you've come up with, which is micro front ends.
What is a micro frontend?
---
[00:01:53] Ben Lloyd Pearson: And this architectural approach has allowed individual application components to be operated and deployed [00:02:00] independently to sort of get out of that like monolithic maze that a lot of companies are facing. So I want to talk about, you know, what the future of frontend development looks like within this context.
But before we get into that, let's just get into the basics. So what is a micro frontend?
[00:02:20] Thayse Onofrio: Very much related to microservices, what is more popular. Uh, but the same way micro frontends, we have like smaller frontend applications, but we can develop and deploy them independently from each other. Each having their own responsibilities, but then they all look the same for the user. So, as a user looking at this application like if it's a web application, it doesn't really matter to me how they are, how it's done, how everything was created.
Uh, but When we look into how it's being done, developed, deployed, everything is separate. And we just compose them together. So for a user it shouldn't really matter, but for the teams working on it, it makes a lot of [00:03:00] difference. If it's not like a whole monolith and we can work on our own thing without having so many conflicts and blocking each other all the time.
[00:03:08] Ben Lloyd Pearson: Awesome, awesome. So, so let's, let's talk about some of the unique challenges that you've encountered while doing this, uh, cause, you know, uh, you know, I like the comparison to microservices, that, that, like, that concept has been around for a little while, so people are, are pretty familiar with it. What are the unique challenges that you've faced while you've been implementing this micro frontend?
Practice, specifically related to like the monolithic architecture.
[00:03:31] Thayse Onofrio: Yeah, I think with monolith architecture, especially when the teams start growing too much, we can get a lot of, uh, conflicts. And if you have different teams working on the same code base, it But maybe even different products. It can be very confusing for everyone working on it.
Uh, that needs to be a lot of communication within everyone. And that doesn't happen if you have separate teams. Even in the same team, sometimes there is not enough communication happening. Uh, so we [00:04:00] start to facing a lot of issues if we are using the same pipelines, like the pipelines are always busy, there is no enough resource to handle it.
So, it starts to get really challenging and I think one of the most pain points is deployment because you have to, one team depends on the other team to do a deployment, so you don't have that, um, flexibility about just being able to deploy whatever you want, uh, it can really slow the team down, having to depend one team on the other.
So I think that's where, and a lot of times, going towards this micro front end approach really helps. Thanks. And then we can, and there are a lot of different techniques we can use to get to this approach. Uh, but yeah, I think definitely looking into that and seeing what makes more sense for your team.
And depending on the tech stack that the team is comfortable with as well, uh, you can find an approach that you can start like slowly going towards this and separating things out as much as possible. That brings a lot of benefits, I believe, to the teams.
Are there out of the box solutions or do you have to build from scratch when working with micro frontend options?
---
[00:04:59] Ben Lloyd Pearson: Let's dig a little [00:05:00] bit into the technical side of this.
Have you been relying mostly on like out of the box solutions or existing, libraries that are out there? Or did you have to build a lot of this yourself, like from scratch?
[00:05:10] Thayse Onofrio: Yeah, I think now there is a lot of options. Uh, I think previously mostly doing that on the server side.
Uh, but now we have, and I will talk on my talk as well a lot about using module federation, uh, which uses Webpack to do it. Uh, so it's way simpler because now a lot of front end teams are already using Webpack, everything, like you already have everything configured, you just need to add a new plugin to, to use module federation.
So that really helps. But yeah, I think there are many more solutions now, it's becoming more popular. It's easier to get started, I would say, for most teams that are already using a lot of those technologies.
[00:05:49] Ben Lloyd Pearson: So, you know, you know, in, in front line, front end libraries in particular, you know, I feel like that's a, that's an area of technology that has just, I mean, it's, it's become a meme just how many different [00:06:00] libraries and services are out there.
I see all these posts on, on social media about how there's too many of them and how, uh, you know, when everything is like working together and sort of like the golden package, it can be great, but the moment you, you try to like, Breakout of the, like the, the cookie cutter formats, um, particularly with JavaScript.
How has using micro frontends changed your approach?
---
[00:06:19] Ben Lloyd Pearson: Um, that, you know, it can get pretty difficult, you know, cause there's, I mean, there's hundreds, maybe even thousands of libraries that you can choose from out there. So I'm, I'm wondering, you know, how did this complexity affect your ability? Like, did, did you have to change how you approached the challenge?
Were, were there specific groups of libraries that you found beneficial, you know, just in general, like, what kind of challenges does that, that complexity of just how many options are present?
[00:06:45] Thayse Onofrio: That's a great question. I think a lot of people actually say that one of the benefits of using micro frontends is that each, uh, micro frontend that you have can have their own text tag.
So you can choose to do this frontend in one library, this other [00:07:00] using another library, and then you just kind of stitch everything together. That's possible, that works, but I wouldn't recommend it. So, if you are looking at the same view and you are loading, like, just as a user going to a web page, I would have to download a bunch of libraries, dependencies that not really needed, and that can really become complex to manage and really affect the performance.
So, it's that kind of thing that it's possible, but that doesn't mean you should do it. And, yeah, and even if, if you're using the same, uh, libraries, you have to be careful about versioning. If you have, like, different frontends in different versions of, of those libraries, how will they interact once you are composing them together?
So that's, that's a big concern, I would say, with using micro frontends as well. Just being careful with using so many different libraries. There needs to be, like the system needs to work together also. You need to have a lot of coordination between the micro front ends [00:08:00] in a lot of ways. And I think dependencies is one of them.
[00:08:03] Ben Lloyd Pearson: Yeah. So do you, do you give teams like a lot of leeway to sort of build that or define that path themselves? Or do you rely more on sort of like, do you give developer teams like, like solutions or, or guidance on this? Or do you let them kind of choose their own path more?
[00:08:20] Thayse Onofrio: Yeah, I think there needs to be a lot of, coordination in that in a sense, and, I think it's a bit challenging because you do want the teams to have their own freedom of choosing what path to follow, but there needs to be some kind of, uh, governance around it.
So I think it really depends on each context and each team, but usually having someone that can at least set the, uh, Guidelines, set some, uh, guardrails around it really helps. So you avoid like having one team going completely different way than the other and then creating those complex challenges. Uh, so yeah, just having a forum for the teams to [00:09:00] talk about it as well really helps, but I would say just setting guidelines and, uh, I think a lot of teams also use these, templates to get started as, as a micro frontend.
So you have like some libraries there. You have some. Guidelines that are automated already to get started. So at least teams get started in the same direction, you know.
[00:09:21] Ben Lloyd Pearson: So, one other thing that, uh, you mentioned, uh, or you mentioned in your, your talk is, uh, uh, some of the complexities around build pipelines.
So, so, you know, a monolith can ha is typically going to have very different build requirements from a, you know, front end microservice. So, how has that played into this, uh, into this equation and, you know, what sort of, what sort of things have you had to do to, to overcome challenges with that?
[00:09:48] Thayse Onofrio: When we are in a monolith approach, the pipeline, uh, when we need to handle everything related to that, so we can become challenging.
And then when we start to break down each front end [00:10:00] monolith, micro front end actually, will have its own, uh, build pipeline so you can build and deploy code independently from each other. But I think it really helps that you can add the sort of validations that you need based on that specific framework.
Um, piece of, uh, micro frontend, which doesn't necessarily is the same as the other. So you can really adapt that and make sure that you are having the right validations, you are building code the right way for that specific piece of code and getting that into production. Uh, so yeah, I think it just gives a lot more flexibility.
So each team can do what's needed for their own challenges.
[00:10:39] Ben Lloyd Pearson: Gotcha. And it seems to be like that's a big theme with rolling this out. How many developers do you have at your organization?
[00:10:48] Thayse Onofrio: It really depends on the teams that I'm working with as a consultancy. It changes a lot, but I think the last time I was working with this, in my specific team, I think we were around eight people.[00:11:00]
[00:11:00] Ben Lloyd Pearson: Okay, okay, gotcha, yeah. Because I just know when things get big and complicated in the developers world, like, uh, you know, it is great to offer like a lot of those, um, like templates effectively that sort of set them in the right direction. But there's always just so much nuance to the technologies, to the processes those teams use.
What is the process like for a team to move to using a more micro frontend based approach?
---
[00:11:21] Ben Lloyd Pearson: So I'm wondering what, what's your What does it take to migrate, you know, what, from this like monolithic design to one where, uh, you're doing more micro frontend, maybe even some microservices, you know what, what's step one? What's, what do you do after that? Like, is there, is there a predictable progression or, um, is it more nuanced than that?
[00:11:41] Thayse Onofrio: Yeah. I would say that the initial thing, and one of the most challenges part is understanding how you are going to do that in terms of. Which parts of the application can be separate modules, how you're going to break things apart. So thinking about bounded context and how do you get to [00:12:00] that approach of knowing this should be a separate module, this other thing should be its own module.
So I think that's the most scary part in the beginning, trying to do the right thing, because at the same time that you want to get all the benefits of Separating things out, you don't want to get too granular, because otherwise then you are just adding new challenges and not really getting the benefits out of it.
So there needs to be like a balance of where it makes sense to do it or not, much like microservices. Um, and yeah, if we are able to align like the microservices approach with the micro frontends approach, I think we get a lot of value out of it because then we have this one deployable unit of code. Uh, and getting all the benefits from, from all of that.
Uh, but I would say, yeah, the first thing is understanding exactly how to do it in terms of which will be the, the physical and ownership boundaries of those micro frontends. And then you can start looking into [00:13:00] thinking about the trade offs, like what, what will be the benefits added, what will be the new challenges that we'll get.
Because there is always trade offs, always we need to think about the, the new challenges as well. And then I think we can move on to like, choosing the approach, how we are going to do that, and really take into consideration what's the team's knowledge of the tech stack as well, so you can choose an approach that makes sense for the team, that it's not everything new for them, that they need to learn everything from the beginning, you know?
So then, after you do that, I think you can start actually doing the migration, and thinking about small steps as much as possible. What's the minimal thing that you can do that you can start already to get some value out of it before you move on to increasing that. So doing that as slowly as possible in a way that we are not impacting user experience, right?
Because we can't just stop working in what is live in production and stop maintaining it, stop adding functionality [00:14:00] to it, just start working on something new from scratch. So we need to find a way to do that, uh, a little bit more slowly and. Starting to get value out of these, these changes.
[00:14:11] Ben Lloyd Pearson: Nice. So use use a phrase there that I've never heard before that I want to dig into a little more bounded context.
that is a, I feel like I should know what that means. Maybe can you explain a little more like what exactly you're describing there?
[00:14:25] Thayse Onofrio: Sure. Yeah. Uh, so bounded context is a concept from domain driven design, DDD. Uh, so here we are talking about this, uh, finding these boundaries about like physical and ownership boundaries.
And it really means that each bounded context should be an independent service, and in this case talking about micro frontends, that should be evolved independently from one another, so developed and maintained independently, but while they should work together to create this unified system. So really what we want to achieve here with micro frontends, but it's a concept that [00:15:00] doesn't really need to be attached to a specific approach like microservices or micro frontends.
But I think both of these approaches, uh, feed from bounded context and, and DDD in that sense.
[00:15:13] Ben Lloyd Pearson: So, it, it, because it, it kind of sounds like this is, like, kind of a critical aspect of understanding where to, like, where to begin effectively. It's like, where, where can you pick a part of your UI that you can just pull out and make that your first, like, microservice.
So, for an organization that is like, wow, this sounds amazing, I want to do this. Like, like, how do they find that first?
[00:15:38] Thayse Onofrio: That's definitely, I think, very challenging, and I think it really helps to think about the user flow, like how the user interacts with your page, so you can start to think about, what is the flow that the user is doing here. And you kind of start seeing that the user is going to focus on one specific part instead of the other.
So you start to [00:16:00] see how things, uh, are separate from a user point of view. And then you can think about how that would make sense from the development, team point of view as well. Starting to separate that out. Um, but yeah, I think using, uh, A lot of those, DDD tools as well might help. Uh, I'm not an expert in it, so I'm not going to dive deep into that, but just studying a little bit about it, I think it would really help for someone who wants to start going towards this and separating things out, trying to think about what approach you use for that.
[00:16:35] Ben Lloyd Pearson: Wonderful, wonderful.
Are there important changes to how teams think about building code with a micro frontend framework?
---
[00:16:37] Ben Lloyd Pearson: So have there, have there been any sort of, like, cultural changes that you've had to do, like, in terms of, like, how people think about how they build code or, um, the way they approach problem solving, uh, as a result of adopting, uh, like a micro front end framework? Uh, you know, so beyond, like, the technical challenges and even the process, like, is there, [00:17:00] is there cultural challenges that you have to overcome as well from an engineering perspective?
[00:17:04] Thayse Onofrio: Great question. Yeah, I think mostly teams are more, are usually happy, you know, about being able to have more ownership about their own things. Not having to rely so much on other teams and other folks. Uh, and just, yeah, having more independence in that way. So I don't think there is so much cultural challenge.
I think It's more like
[00:17:26] Ben Lloyd Pearson: opportunity, right? It, it's like you're, it's a way to empower developers while also giving them a framework to be a little bit safer. Mm-Hmm. , you know, uh, have a little less risk. I imagine. So, yeah, I mean that's, that's actually a great point I think is that this is a great way to make, to encourage your developers to be a part of a positive cultural change, you know?
Yes,
[00:17:48] Thayse Onofrio: definitely. I think the only challenge, uh, more related to that, I think is more, If the developers are not comfortable with the technical side of it, they don't know much about it, they might have some concerns initially. [00:18:00] So, I would say that's more like a challenge, just making everyone feel comfortable with that as they go along.
But outside of that, I think folks are generally happy about just having this independence and ownership.
[00:18:13] Ben Lloyd Pearson: So you heard it here, do micro frontends, your developers will be happy.
What does a team using micro frontends benefit from once it's all set up?
---
[00:18:19] Ben Lloyd Pearson: So what's, what's the ideal end state for this? Like it pie in the sky, you've, you've, you've mastered the, the world of micro front ends.
Um, what is, what is it that future look like to you?
[00:18:33] Thayse Onofrio: I think that is, there needs to be like, once we are in a state that is good, that makes sense for everyone, folks need, can work independently from each other. Uh, we need to be careful with having like some. Guardrails in place and always looking into that again because software is not static, right?
We are always evolving, always changing. Maybe some part of the [00:19:00] application previously was not very important but would not get much attention and we decide not to separate it in a micro frontend at that moment. But one year from now we need to build a lot of functionality into it. So now We are seeing like a separate user flow for that and now it makes sense to start separating it.
So I think we always need to keep an eye on it and making sure that we are following up with the evolution of the system so we can always think if should we break this up? Should we go back to how we were? Maybe, maybe it doesn't make sense anymore, this approach. So yeah, just thinking about software is something that is always evolving.
I think it's important so we don't just. Just think that we've reached this peak of everything is good now, not going to have any issues because it will not stay the same, so we need to be constantly thinking about it and seeing how we can improve. Improve.
[00:19:58] Ben Lloyd Pearson: Yeah, it almost seems like, if [00:20:00] I'm reading between the lines correctly, it almost seems like what you're saying is that we need a world where developers can easily understand whether or not something is a thing that should be broken out into a microservice or a micro frontend versus something that is better to be a part of a more monolithic structure.
Yeah. So that, it's, there's, there's, you know, because it does sound like there's a lot of questions about, uh, you know, when to do that, where to do it. And, you know, maybe that is, like, the future we need is just better clarity through talks and sessions like yours, right?
[00:20:30] Thayse Onofrio: Yeah, I think that just empowering folks with knowledge and, and they can make those decisions and bring up when they see issues and things that, that should be changed, I think that's really important.
[00:20:42] Ben Lloyd Pearson: Wonderful. Um, is there anything that you feel like we've missed that you'd like to share about, uh, you know, your session or the work that you've been doing in this area?
[00:20:49] Thayse Onofrio: Yeah, I think one other thing that is really important about micro frontends, like one of the new challenges is thinking about the testing part of it as well.
Uh, because yeah, [00:21:00] we can have a great testing strategy when we were in this monolith approach, but as we start to break things up and then we need to compose them, there is a new challenge of how do we make sure that we are composing things the right way? That's the challenge. Maybe each application works correctly by itself, but then when we integrate it, how do we make sure everything is working right?
Uh, so we are just thinking more about functional tests, contract tests, just, uh, looking into that to see what's the right approach. Um, and I think also thinking about ownership of doing this testing because you can have One application being displayed in multiple different views, so interacting with multiple other micro frontends.
So who is responsible for making sure that the composition works as it should in those different views, for example. So yeah, that's definitely a new important challenge I think that we need to think about when going through this approach. And yeah, I would just say in general, just thinking a [00:22:00] lot about the trade offs and, you know, thinking about the benefits that we had, but also about those new challenges.
So, it really supports us in making those decisions about when to separate things, how to do it, and should we not do it, should we do it, so just Having all that knowledge in place, we can, I think we can make better decisions.
[00:22:20] Ben Lloyd Pearson: Yeah, so, I mean, if I had to guess, I imagine micro frontends probably makes things like unit testing easier, but then like integration and end to end testing a little bit more complicated because now you're, you're, you have like this monolith and the microservices that sort of have very different ways of solving the problem, right?
Exactly, yeah. So we really
[00:22:39] Thayse Onofrio: need to rethink our, our testing approach so we can make sure that everything is. Doing what they should, basically.
[00:22:47] Ben Lloyd Pearson: Well, wonderful. I'm super happy that you were able to join us today for this conversation. Are there any other last words that you want to leave our audience with?
[00:22:57] Thayse Onofrio: Oh yeah, just getting to know more about [00:23:00] it. You know, just go after this knowledge about micro frontends, but also anything that makes sense to think about how we can improve collaboration between teams when working together. Just trying these new things, I think it makes a lot of sense to experiment, see what works, see what doesn't work, but having a lot of flexibility to trying things out and see what makes more sense and can bring more value to our teams.
And yeah, if you have those issues, I think it makes a lot of sense to try Microfront Ends Out. It's not bulletproof. There are new challenges with it, but that it can really bring a lot of benefits. So I would encourage folks to try it out.
[00:23:43] Ben Lloyd Pearson: So if our audience wants to learn any more about you, your work, the company you work for, where's the best place for them to follow?
[00:23:50] Thayse Onofrio: Yeah, uh, I actually have a blog, it's taizionoffshoot. com. Uh, so I write some stuff there. Uh, I will publish some talks there as well. So. [00:24:00] Feel free to check it out. Also, social networks the same handle. Uh, yeah, I think that's it.
[00:24:07] Ben Lloyd Pearson: Wonderful. Well, thank you Thae for coming to joining our podcast today. It's been a real pleasure.
And yeah, thanks.
[00:24:13] Thayse Onofrio: Thank you for having me.