Hey everyone, nice to be with you all at React Advanced this year. I'm super excited to be doing this talk on micro frontends for mobile with React Native. It's a topic that I've been exploring a little bit for the past few months and I think there's a lot of interesting learnings and I hope that by the end of it I will have piqued your interest to explore a little bit more in an area that I think is a little bit underdeveloped and there's a lot of scope for improvement within our community. So yeah, hopefully some exciting stuff will come out of this.
A little bit about me. My name is Mo. I am the head of mobile at a company called Theodo based in the UK. Theodo is a group of international consultants, digital experts that are located around the world, mainly based in France, the UK, New York and also in Morocco. We have been doing React Native for a very long time. You may know us by another name, BAM, where we've been working on open-source in React Native since the very beginning. We adopted React Native back when it came out a few months after it was released by Meta, and we've released various open-source projects like the React Native Image Resizer Library, and more recently Flashlight, which is a tool to measure performance for mobile apps.
Being in the consultancy space, you get to experience a lot of different projects, and I want to talk to you a little bit about one of them today. Story time. In the last few months, we were approached by a client to develop a streaming service. Now, this is a full-scale media platform. It's not just streaming with some videos and just a very basic site. It was the full-fledged thing, with news, with streaming, reading articles, listening to podcasts, all centralized into this one platform that had quite a lot of different moving features about it. The key points in this project was that, one, there was a large number of features, but they had a bunch of other requirements that made it more complex. One was that they wanted it to have feature parody across web, mobile, and even TV. They wanted to have very short turnaround, which meant that we needed to have several teams of developers working on this project simultaneously.
So, being a bit familiar with the React Native space, one of the things that we went for when we heard about parody across the board was this idea of universal apps. This is a space that is developing and I think coming to fruition in the past few years. With universal apps, the idea is that you write once and you can run anywhere. You can use React Native really to create a web application, a mobile application, a desktop application, and even maybe a TV application. You try to reuse as much of your core component logic and your business logic across the board and super powerful in the sense that you can have many, many gains in terms of speed and delivery and rate of iteration and innovation. So it's a very exciting space to be in and we knew that this was going to be a good fit because our project was going to be mobile first but they also needed access to web and TV, so it was kind of a no brainer for us. But it also got us thinking about something a little bit more subtle, which was how do we architect a project at this scale? How do we create the right work stream so that our teams can simultaneously develop? We've got tens of different developers working on this project at the same time. How do you organize it in a way where people aren't stepping on each others' toes? People aren't having too many different sort of merge conflicts or too many different blockers along the way of their development. So one of the things that we looked at very heavily was how do we structure this project? Now this is a simplified folder structure, but hopefully it gets the point across. One of the things that we did was we tried to take the main features of the application and put them inside of packages that teams could develop autonomously.
Comments