Mobile Microfrontends With Zephyr Cloud and Re.Pack
Subtitles
Show
[Music] hey everyone this is react Universe on air podcast by callstack total software engineering consultancy today we have a very exciting topic for you we'll be talking about micr frontends how they came about on web and what are we doing to bring them to mobile as well to discuss those topic I have a very good guest with me today Zach Chapelle co-founder of zir and uh current CEO hey Zach how are you good hopefully I'll be CEO for a little bit yeah yeah we hope that and also yakob romanik from Kack uh maintainer of repak yeah he how's it going yeah we're good so guys let's talk about micr front ends uh at first so Zach maybe you can bring uh some clarity to this topic uh maybe listeners of our old podcast the react native show don't know much about them so what is this architecture about what does it enable and like how did we get there so um It's actually kind of a fun Journey I'm sure a lot of us if you've been in development for a little bit remember when microservices first became a thing um we had really monolithic backends and then we would decompose uh them into microservices and um it it was mostly around organizational changes try to decompose things so people can ship independently but also there was some um interesting performance ramifications of that um and I believe it was 2016 Michael gears actually wrote a book on micro front ends and um at that time he put together a canonical example around tractors so if you're wondering why everything around micro front ends is tractors it's because the original book had tractors um and he was um I think he's either German or Austrian I get where he's from um but yeah so that was the the big thing on how that started and basically um just a way for you to be able to decompose your front end like people did in the in the back end that's
a the easiest way to describe it so what would be like the ideal use case for micr front and on web can you like explain one example of why we should use micr frontend in wi use cases it's funny cuz um I actually did a LinkedIn post about this last week because um my CTO and I dimma we were on a call and someone's like well when do you actually decompose a micro front end and the answer I gave uh Tas who's another podcaster was um that it was mostly cented around um when your teams get bigger when you're um you want to be able to ship faster those kind of things and dimma had a really interesting answer that I think I'm going to steal and that's that when you start to have different parts of your platform that that move at different velocities right you have one part of the platform that's kind of stale you have one part that you're innovating on a lot and you don't want to have to keep building the part that is stale um I'm not sure if I'm going to stick with that answer for forever but it it does make sense to me logically that you know the moment things need to move at different speeds that's a good time to start decomposing so how about from technical standpoint what is the technology that enables it and what is the how the workflow for Developers for look like um the technology enables it um if frames no um just kidding um so I's like no um no so iframes is actually kind of like the original micro front ends to an yeah and um so if you if you ask like what's it the technology that enables it that that was the first one um but in reality there's a lot of different technologies that you can use and you could actually use no Technologies to do it if you want you could you could kind of start to do it manually through npm packages and stuff like that but that
fits in the other part of the Journey of where we can compare it to back ends um because when you started to decompose micro um or your monolithic backend to microservices you started to run into issues and you needed something like Docker right you need to be able to containerize all of these U microservices that you're writing to bring consistency to bring ease of use for the Developers ease of portability all that um and in the front end we have something similar to Docker um and that's module Federation and if you look at the API surface they're actually very similar here's what I expose here's what I consume here's where I'm located all those kind of things match very well pattern wise um and that was like the main technology that really helped scaffold the growth of uh microfinance so is module Federation um concept Ava ailable only in weback or this is more General concept that gets transferred to other bundlers as well yeah so when when it started it was part of weback um it was actually part of weback 5 beta um and Zach Jackson talks about this the Zach with more hair um he talks about this quite a bit more um but since uh rsac came out we've had a lot of effort to decouple uh module Federation from webc itself um so of of course we have roll down V RS pack web pack um I think there's some stuff for um roll down now too so I mean we we're working to support pretty much everything um because we realize that the the issue of federation and the capabilities provides scills across all the bundlers so uh to things we had Zach Jackson on the podcast as well like two years ago or something like that I think it was the at the time when we at col stack we were trying to include module for a in repack so we had Zach and uh and some other guests on the podcast talking about that but when you say we are you saying like
a working group for module Federation or are you saying we at zir yes um so the the the answer is both so um there's a lot of us that are on the model Federation Court team so Zach dimma I and and the B dance team are kind of like the the main folks on the on the core team of modation there's a bunch of really good contributors too um so like a lot of the things that you see happening is a combination of the efforts that we have with Zephyr um Vision that we have for module Federation as a whole um and then um where like the big users are trying to take it to so um it's a little bit of a complex we um because you know Zach and and I and dimma are really tightly coupled through Zephyr um but then we also do a lot of work together in the modu Federation community so let's talk about zier uh for a little bit what do you do at zier what is that platform what it's what it enables me as a web developer first to to do to achieve I'm assuming you've tried to deploy an application before yeah I did and um and I know yakob you you've deployed an application or two um and so when we started Zephyr the a lot of it came to the issues we are running into building and deploying Federated applications right how do we um version them how do we deploy them how do we bring them together how do we kind of bring the and some people hate the scenar the kubernetes like experience um to where you're able to compose all these different micro front ends in a in an easy to manage way um and that's kind of where zhr started but then as we started to build it out we found it's actually much more powerful um so we found out like you can deploy just Standalone applications too right and you could deploy them directly to the to the edge and there's a lot of fun stuff there um
and that kind of led to the thought process on what actually is a micro front end right because a micro front end and this is one of the other things I said on a different podcast is that it's just a front end that you haven't decomposed yet right um because every time it gets bigger you'll decompose it more and then you'll decompose it more and um Zephyr helps you on that Journey okay I'm going to I'm going to like dig deeper there help you how how exactly can you help me decompose my front end okay so we're going to get deep um okay so when when you try to manage Micron ends and module Federation by yourself um there's a lot of things that you have to put in your configuration around like what you can what you consume what you exposed I mentioned that a little bit ago right um where you're located and that ends up um creating quite a bit of configuration right because we know developers love to have to maintain hundreds of lines of configuration files right um that becomes painful and then as you move through environments and as you move through the development life cycle and begin to decompose more you have more and more configuration Zer abstracts all that away and just does it for you um you just now can say I I consume the header I consume the footer and we're able to resolve that based off the environment and the configuration and the versions and all that for you um the other part that's a little bit challenging is kind of like when you're working with microservices you have to spin them all up in order to actually be able to use your application right with um micronance it's the same you have to build and run the shell on your local machine you have to run the header and the footer and all that kind of stuff just to be able to use your and develop on your application
um with Zer were're able to conf uh compose environments together um so you can go to like a staging or QA environment and then hot swap in the thing that you're working on in local development saving you a bunch of build time and compile time and and basically development energy um to be able to actually move forward okay thanks that that wasn't that deep but I I I got I got my answer thank you so much Kuba you are awfully quiet today uh not not like you so maybe I'm going to direct some question questions to you as well the sure think yeah uh so we've heard about micr frontends in general we've heard about microfrontends on web and we've heard how you can utilize zir for example to help you manage that when it grows in complexity how is that relevant to mobile at all do we even have microfrontends for mobile at all so as Zach already mentioned yeah previously uh you can also do micr front end using like npm modules so um this is what uh what we call the uh build time uh microf fronted architecture at least here at KAC um and this is something that was um there were already few talks uh about uh I think the last one was during the appjs uh last uh summer uh where actually um build time micr frontend was actually used at some company but um in here at kak we are experimenting with module Federation which allows us for runtime microfrontends to recap in order to even think about micr frontends on mobile you have to use some kind of web technology like react native for example because those concept are like web first um from the Inception and you're saying we already had them during NP from npm packages but only in build time meaning not really useful for for most use cases that that Zach explained but uh yeah so like I said I've been talking
about module Federation with Zack Jackson for mobile two years ago more than two years ago so what happened and what changed during that time that right now we can finally uh be talking about microfrontends for mobile um so the first thing that came out is ouris parar that greatly uh well kind of eliminated the performance impact that uh we had with uh uh repack and weback before because as you grew bigger the builds became like super slow it was also like um quite hard to configure back then uh when I started working on it and the other part that is Zach already mentioned is that the modu Federation was decoupled from weback and uh it was made into its own separate thing and uh thanks to that there were uh the development of mod Federation was no longer um uh slowed by the uh maintainers of weback you could say you could say it like that and so it could develop on its in its own pace and thanks to that we got many new features and uh uh in in thanks to those features uh it allows us to remove lots of obstacles that we had before uh in repack with the first uh integration of Modo Federation so in essence it's it's way simpler and it removed some obstacles that prevented us from actually thinking of having this uh in production builds for our clients I'm I'm going to jump on the question with that one so um was it the actually the abstraction or the extraction of module Federation from we or was it kind of like the enhancements that came with Federation 2.
0 and like the runtime and and the life cycle hooks yes uh it's kind of it's kind of everything actually because uh the runtime plugins allowed us to configure it uh and tailor everything more to the react native word and uh uh yeah we are finally able to use uh remotes at build time which wasn't possible before because of some
0 and like the runtime and and the life cycle hooks yes uh it's kind of it's kind of everything actually because uh the runtime plugins allowed us to configure it uh and tailor everything more to the react native word and uh uh yeah we are finally able to use uh remotes at build time which wasn't possible before because of some
limitations imposed by web and arsp because also some changes from arsp were backported to web so that also helped a lot nice so uh Zach uh was talking a bunch about like um micr frent for web and how they are mature now and like different use cases and some of those use cases that I think like really transferable and very generic like PL platform agnostic is like the team size team velocity can you see any other like benefits or use cases for micr frontends for mobile aside from the you know team sizes and velocity well it's definitely not a one fital solution so uh you only need to consider this when you're actually facing those issues like uh this is not something that doesn't come without its tradeoffs like the it the with reback even though we are trying to simplify things it's the whole complexity of the centralized architecture with micr frontends is which is already a mouthful by the way um um it's um it's a little bit harder to grasp for people so but the the ultimate goal is to allow independent teams to release uh on their own and uh have only one team to uh integrate everything into the the final app so which is kind of the same like on web right I have a question on that one cuz like the when I think about mobile I think about app size right you see all these apps on Twitter getting blown up all the time for you know it's a 1 Gigabyte application and um all the pain that comes with that so like do you see um bundle size and the amount of code you need to ship being one reason to move towards this and then the other question is um we have a lot of applications that I've encountered where you have very different personas that are using the application and the need for different or higher levels of content as you as you um increase your capabilities with
the application is that are those a couple Avenues you see needing something like this yeah so so Mo microfrance and modu Federation definitely helps with uh making some parts of the application lazy loadable so you can actually uh start with a rather small bundle size that you can put into the app store and then only download what's needed later during the app run time so that definitely helps uh with that uh I'm not sure this is really that much of a problem these days I think we only are dealing with um like you know this uh only huge ABS that's are like in top 100 of the stores so these are the ones that probably have these kind of issues oh yeah and we want all of them to start using micr frontends and to like use our services we are good at it definitely we want those like I I I can see your point Zach like the example that comes to my mind is the tradeoff between uh releasing let's say I don't know 25 different targets for different markets that have some certain screen that are uh uh needed for that market specifically or for legal reasons or for cultural reasons or you can just ship one app to all of them and then based on the user location just download just lazy load the the modules the screens that you need for that particular um environment I think on that one an interesting thing that came up I think last year when I was in Poland um were for uh Shameless pug react Universe um the there was a really interesting use case around being able to eject a remote after you no long longer needed it so the use case of that being like a training module or something like that that users go through one one or two times but then they never touch it again right so why keep that coat around why keep that that download size on your device right because people are always
trying to find ways to lighten things on their device with um what we're building with Mod Federation and and micro front ends on the on the mobile were able to eject and and collect the garbage of that Federated remote and actually offload it off the device which I think is a very interesting um concept yeah since the bundle is split into multiple files it's just easy to pick which files you can eject after after times of them not being used yeah I can also think about one challenge for mobile uh that doesn't exist maybe as much on the web cuz on the web like when you go to a web when you go to URL you almost always get the newest page that's out there um if you don't screw screw up as a developer and do some kind of crazy like workers or something like that uh for mobile I don't really have that I need to like make my users either download the newest from App Store or do something like a code push or something like that so how would you say this is a more challenging situation with like versioning of different modules cuz like as I understand it I have a shell application that is able to consume some kind of modules but my shell application I can downloaded a year ago and then the Federated modules that live outside of my app uh maybe evolved so how do you deal with that in sorry first question is it a challenge on web at all the versioning and then how is the challenge different for mobile I was going to say on the web part like is it a problem with versioning um I would say yes as soon as you have people that need to do things independently or as soon as you needed to roll back one part of your application um I I was on site with a customer yesterday and they were talking about roll backs and their currently their Front End is Extremely monolithic so when they back and they do releases
every two weeks everybody's feature that wasn't broken is also getting rolled back right so the the advantage of decomposing your application into smaller pieces and smaller life cycles that are independently versionable is you don't have to be as heavy fisted with your roll backs you don't have to be as aggressive with your your release testing because now everything is independently versionable um and that makes it a lot less risky for you to be able to roll forward and roll back yeah on the on the mobile side of things it's um as you as wookash already mentioned it's a little bit harder because um we need to put our apps into the absor still the shell app needs to land into the app store or or the Play Store right so at any given uh moment in time we have like multiple versions that that are installed on user devices so that's another layer of complexity that we have to deal with here uh when when doing micro frontends with motor Federation on mobile um but yeah uh it's uh you could say that every version lives around uh 90 days from from what I remember uh please don't don't F check me on that uh I do believe there's some um some data uh that uh shows that uh it's the lifetime of a version is on average around 90 days and after that it's uh it's starts to become a very small percentage of actual um uh users that have that version Oh you say when you push a new version of your app to the store uh it will take on average like 90 days for most of your user base for like uh big percentage of your users to like migrate to newer version yes I don't know where I had that number from but that that's always what I keep at the back of my head so uh but yeah 90 days is still a long time so ideally uh so this complexity introduces something
that we have to deal with uh on the mobile side of things and uh when building micr front ends for for for mobile you you have to remember that you have to align the the um the microfrontends that you want to ship to the actual version of the app that the users have so sometimes either you'll limit the feature only to the newest version or you make it also compatible with other versions which sounds like a lot of Hustle but in reality isn't really that much of an issue it sounds very scary on paper a question on that one so the the interesting thing about like the mobile app space is like I've played like League of Legends right and there's always mobile updates every couple days and it you know you sit there download 3 gigabytes of mobile updates and then um the application restarts but there is still occasionally App Store updates so how do you understand when something should be an app store update when something could be an overthe a update that's just downloading additional chunks on the app itself like what what differential between those two that's a good question it's I'm not sure I'll be able to give you a satisfactory answer but uh generally out would you know we can utilize micr front and and the ability to dynamically update the app like a as a um as something to bring the stuff as fast as possible to the users but in the background we can always schedule another uh App Store release which already has this stuff packed in so it becomes like the Baseline for the new users to download from right so they don't have to refetch stuff when they download it from the App Store yeah that makes sense and then what about like the binar because I know like one of the things that I've ran into trying to do over the updates with mobile is like if the version of react native or like a
barcode scanner that's interacting with the native apis updates like um do you see that being something that we can over thee update with Federation or is that something that will always have to go back to the App Store no that's actually that's a also very good question but that's a that's like a hard limitation of uh of micr front mobile we can only like manage the JS part of things but when it comes to the binaries that are shipped there is no way to update it over the year so we need to uh make sure that the native modules that we ship with the app uh are still compa on the JS side of things when we make some changes there yeah that's what I mentioned that I think it's even a bigger much bigger Challenge on mobile because like uh you have to maintain the compatibility between your native side and your JS site in your shell in your shell app as well um yeah correct yeah there's also the people that are saying things like oh but you could just use a web View and do some of these things like so why why wouldn't we want to just use a web view in act native to do do some of these things ra rather than doing it as a Federated application well it just doesn't feel native it's not the same thing right that's why we do react native and not web okay we are like 25 minutes in the episode and dear listener you might be wondering why are we having uh zir co-founder and like talking about microf front and On's mobile well well well maybe we can ask sack and and Jacob what you were guys working on recently what kind of fun integration between zephir and mobile you came up with so we we um so one of the things that we're doing with Zephyr is is kind of a concept called acceleration weeks which is basically a glorified hackathon uh where we bring in like really incredible uh community members and partners and we
and we do a hackathon with a a customer of zephyr and um what's really fun about that is it gives us a way to be able to make sure all the Integrations are working and actually test things out right um and in the one that we did I think it was between Thanksgiving and Christmas or it might have been before Thanksgiving I forget exactly when it was it was even before Thanksgiving yeah okay yeah so before Thanksgiving um we did one and we actually were were going full Federated the entire stack which is pretty much unheard of and um we had module Federation ation running for our node-based um uh nestjs powered lambdas that were doing hot module reloading in a running Lambda with new versions of Federated remotes for apis and we we that's the back um then we were doing in the web which that's less scary and things that we've done before um but then kind of like in a world first we had the same thing happening with mobile so yaku was up there um doing demos with the team and we were hot module reloading and doing over theair updates and doing all kinds of really fun stuff with mobile applications in a live demo and that was really fun to see because we had a production application and it it was really fun cuz like oh the application's broken let's go look at this logging tool and see where the air is and like oh here's the error let's go do a release and because releases with Zephyr are some second it was literally a drop down new versions available we refresh the application and it and now you see confetti um so like it was it was a really fun uh Journey so I think maybe you could share a little bit on like what that was like from the mobile side cuz I on the web were spoiled we've had that for a while um you know I think it was new for you on the mobile side
yeah I still can't believe how how smooth the demo actually went you know that there was like everything went perfect there so uh yeah uh what we did we we integrated the this effer with the mobile side which was still very experimental it allows us to uh deploy one version of the micr frontend download it on the up and then uh we managed to you know create a situation where we actually shipped the bug um to production and then we were able to uh quickly uh um um roll back that version to to the previous one and uh yeah the app was up and running back in like under a minute or something like the whole deployment was uh like Zach said uh from the Zer Cloud point of uh point of view it was under subsec but uh uh for the user it was like I think in total under a minute so yeah still a wonderful time and wonder faster than an app store review definitely yes that's a don't say that don't say [Laughter] that no I think please don't block our apps from your store well no I think that that's an important thing to highlight like we're not we're not trying to bypass the App Store as a as a concept right um what we're trying to do is give people the flexibility to be able to do smaller and more granular updates when with control right um and I think that's the the really powerful aspect of what we're doing because a lot of the people that really need this are very um compliance heavy right or they're very large teams and and they're going to continue to have their same release flow and their same app store approval flow and all that kind of stuff but when as they start to decompose and as they start to find which parts of their platform are less risky or which part of their platform is uh less prone to compliance like those are really good opportunities
for those kind of people to you know oh it's a training video great we can we can update that over the air it's a um a module that's only for administrators okay great we can update that over the air um for Consumer based stuff it's going to be super exciting but I think a lot of the folks that we're targeting are the people that are experiencing the most pain right now in in the Enterprise space I think um this is very s what you just said it's a very similar story that we had with code push in the early days uh everyone was pretty scared of using Code push because like um is this not bypassing the upore regulation or something like that and as long as you keep your app the same meaning this is still the same app it still does the same thing but I'm just fixing bugs or I'm just updating those screens that don't need to go through uh painful App Store review I think we're in the green there uh the problem happens when you develop like Todo up and you start making like uh I don't know weather updates on it well yeah you change you change a too app to a video game or to you know a messaging app like those are those are very different things um and I think that's a good way to get apple and and Google angry at you so from your stories about that hackaton what I got was you can use microfrontends on mobile using repak and zir correct uh so question to you Zach um I've done a a fair beit of TV development do using react native and some of the tools that we used for TV in react native in this development workflow some of the services are not really ready for TVs so I would have something like create a new app what kind of app I want to click TV app there but there's no TV checkbox I need to go okay this is a mobile app created with react native but it runs on TVs so what would you say is the state
of zaffir Readiness for mobile because like you have this very powerful system very powerful platform for web how is it the different between web and Mobile on the technical level there and like from developer workflow level so I'll give I'll give the Zephyr CEO answer and then I'll give the I'm I'm a you know a missing the time when I could actually push code on a daily basis um so the Zephyr CEO answer um is the um the way Zephyr works is we hook into your existing bundler your existing Pipeline and and we just assist with the publishing and coordination of file so like we don't completely change how you're bundling your application we don't change how your like development workflow is as a whole in a forceful way right um what we are is a enablers and I like to say were a side effect of your existing build right um so from that standpoint we're in a very mature spot there was a little complexity around how we handle bin um binaries and assets that are being generated by repack and and um for the mobile space because there's Android and and iOS and there's differences and and outputs and all that kind of stuff so we had to do a little bit of work around the plugin for that um but that's all it was is is writing a you know pack and Native plugin to be able to make those things easier it wasn't a we have to re architect Zephyr to make it work with mobile so that was really nice um the developer answer is it really comes down to like how I actually want to work um so I am an incredibly lazy developer um which is actually a whole philosophy around the lazy developer right I don't want to have to spin up a bunch of tooling I don't want to have to spin up a bunch of um infrastructure just to be able to see something and the thing I love about Zephyr is I don't
have to go and figure out how to do infrastructure for mobile updates I just have Zephyr I just have module Federation and now I build it the exact same way I'm building the web and now I have versioning and overthe a updates and like that to me is really nice because it's just a whole series of problems I don't have to solve yeah when I started using Zephyr I was actually you know positively surprised how everything integrates into your own config like you can commit the config file into your repository with the development setup and just zeper takes care of the production setup for you and it still exists there at the same time they don't interfere with each other you have your environment variables uh St in z if you need something and yeah everything just works very nicely I think we could talk about the difference between like EAS and and Zephyr and how like bring your own cloud too because I think you got to see some of the fun of that too like did you what kind of thoughts you have around that as you said already before yeah you only like take the metadata out of the builds that that we upload to Z and then the rest goes straight to the cloud of your own choosing which is also very Flex flexible and um and so far I think there's like integration for cloud flare and netfi is that correct and fastly right fastly Cloud flare um netfi aamai um and then there's a couple more coming I think gcp and AWS should be within the next month um so like I think that's that's another interesting thing about a difference between how you currently work with mobile like there's there's um tools from other t team that can do over their updates but a lot of times that code is or the the updates themselves are living on their infrastructure right which some organizations that's a no-o um some
organizations are okay with that that's that's perfectly fine but the the way we approached it with ZR is heavy on the bring your own cloud so we want to push the code um directly from your infrastructure to also your infrastructure um we don't force it to come to our platform um and I think that's a really interesting difference because when you're over there updates are coming from your CDN rather than some third party provider I think that's a that's a really nice security Advantage I mean the the obvious question that just pops in not thisp this how do you make money the CEO hat um no so the the we we charge on a perced basis so the we look at how many people are making changes um and then that's how we charge so like I don't want to and actually that's a really good segue because I don't want to charge People based off of their productivity and I was in a conversation yesterday and they're looking at a different platform for mobile and I said you realize this platform charges you based on how many over-the-air updates you ship and to how many users you ship and that disincentivizes your developers to actually ship smaller and less risky things so now they're going to be SL shipping slower because they don't want to spend a bunch of money on this platform for all of their users so if you have an app that's getting millions of downloads that's a lot of users getting updates and if you want to be able to do small incremental updates all throughout the day that becomes expensive really quick whereas with Zephyr you have 50 developers that are doing that work you're going to get charged 50 developers whether you have a 100 users or a 100 million users um and you could do as many updates uh throughout the day you as you want and I think that's a better incentive
for people to be able to ship and do and provide value to their customers rather than trying to batch those updates or ship smaller things because they don't want to spend a bunch of money yeah I think that's a really good point you don't want to um incentivise less updates you you want to enable as much value for developers of using these tools as possible so yeah yeah we we we have very similar discussion right now in the project that I'm working on when we are when we have to migrate off of uh up Center of code push and a bunch of different tools actually came out just last month to enable that and they all like differ differ in approach so like it's really hard to gauge those um you know cons and Pros for for those but I think that's a really good take that you should pick the one that allows you to do the thing that brings you value as often as you want and not to decentivize you from using it um I want to talk a little bit about the existing integration that you have and like what is the feedback from customers from developers of using uh module Federate that react native freack apps with zair it it's funny because um one one of the folks that we talked to said that they're actually a little bit scared now um because if they if they ever tried to take this away from their Engineers their Engineers would quit and I think that's a really fun place to be as a CEO like oh you can't you can't get rid of our platform because your people are going to want to quit because um when releases and the ability to see your code become something that you are used to having subsec anytime you go somewhere else or anytime you have to go through a different release flow it becomes really painful so um you know that whole shift
in in mindset makes it very sticky and that's why one of the reason like well why don't you have really hard vendor lock in are you worried about people leaving the platform no go ahead it you'll be back to having pain um you know it's it's one of the things like I want to make Zephyr so compelling that Engineers don't see a different way of working because they get so used to being spoiled by everything being subsecond and being able to see their changes in production without actually releasing them to end users being able to you know not have to have their laptop running for someone to be able to see what they're working on um you like those kind of things are now a reality with effer um and the feedback we're getting from customers is like there's a whole bunch of tools and platforms are able to cancel their subscriptions on and their developers are happier and they're more productive and like that's a that's a win-win for everybody yob any anything to add to customer uh developer feedback on the integration between um repak and zephier well I'm read not on that side that collects these kinds of opinions well you are a developer and so you can just speak from your own examples sure yeah um there are some obstacles we are trying to fix them in repack so far but the overall the experience was uh actually much better than I expected I expected much more friction when moving from Metro which is like the default bander in the react native world but uh yeah uh it's uh it just means that we are going in the right direction and few more obstacles ahead of us and yeah we'll be in a very good place hopefully cool Kuba what can we expect from repak 5 like what are the newest things there like uh should we should we all start doing micr front
ends on mobile with react 5 uh sorry re yeah so so so the biggest two features are supports for rsac at the same time uh still supporting web pack uh and also the support for moo Federation 2 uh which is already quite a lot of features and uh you know at this point in time we still haven't released the stable version of repar 5 which is coming very soon actually we're just finishing up on the last sort of issues and uh and finalizing the Docks but yeah it's coming very soon I promise next week we are publishing a new RC uh version like every week so yeah you can always try it um uh if you're very eager to do so uh but yeah uh at this point you know this this should have been already reback six but yeah it is what it is now um so um ours uh support for RSP uh is um is a big thing because it brings enormous Improvement in performance to the bunding speed uh some of the apps I've tried my grating uh really gain noticeable performance gains in um in the cold builds in development which is around 5x uh improvements uh and also for the HMR time we also dropped from like 700 milliseconds to like 10050 or even lower depending on the on your setup so um overall reback 5 still stands for 5x Improvement across the board in terms of performance I jump in on that and that's before you haven't moved repac to uh 12 of RS Pac with the persistent cash right uh not yet yeah the it's still cold builds every time so we are not using any sort of cash but it's like super fast nonetheless so persistent cast will only make it like uh if you B the the first time and we run the second build then it's going to be like super fast again so it's going to be like I don't know subse builds maybe from from the start yeah I think there there's a couple interesting things on that so like with rsac 12 I think it's still in
it's in beta no um the RS pack team added persistent cash so that's probably going to help with the cold start as well as I think they said that helps with the HMR speeds as well um and then also like does the NX cash also impact that too cuz I know you look a lot of the raw repack stuff like does the repack code start get get impacted by the NX cache as well um I'm not sure the two actually interact because well uh for for the for the development it's mostly just you know in memory cache of the dev server of reack so so there's no overlap there uh we use anex inside of repack repository but yeah that's just for building the library itself so okay guys we're going to wrap up this episode really soon but like one last question to both of you and maybe Zach you can start if there is one thing that you want people to take from this episode either this is encouragement of using micr frontends with repack or this is the discouragement of using micr front ends at all or maybe it's like a I don't know a plaque for some good learning material about that what would it be I think it would be to challenge the be open to challenging the assumptions on how you work because a lot of times we get stuck in a in a mindset that we've always been in and in reality most of the the development practices have not changed we're still basically zipping a bunch of code and ftping it to a server somewhere what that server is whether it's a you know a triangle or a cloud like it's you know it's being ftpd over to somewhere and being deployed um and I think if you start to challenge the Assumption on how you work and how you can work you'll find that there's a lot of things available and ZR is just one of them that can increase your productivity and it's not just for web it's for the entire stack that you work in and I
think if you can start to open your mind around those kind of things and you can see how that impacts your friends in QA how it impacts your friends on the sales team how it impacts your friends in product that have to review everything you're doing you'll see a lot of organizational shift um and we've started to see the impact of that with several folks already but the bigger challenge wasn't actually the technology it was the mindset and the thinking about how they work and I think if that that's one thing I can give to people is to just keep an open mind on on how you work and how you ship code and remembering you know why you're actually doing it nice thank you so much cool anything to add that's a good one uh I'll back I'll back Zack up on that uh and on top of that I can only you know do a Shameless plug of trying out repack 5 uh thec version maybe there's still something we we need to fix yeah and um especially if you interested in microfrontends on on the mobile side of things then yeah repack is right now the the way to go so yeah that's that uh definitely subscribe to this podcast we're going to have much more uh episodes like that for you uh thank you so much Zach thank you so much Kuba for joining me on this and uh yeah have a great day thank you for having me yeah thanks for having me before we end I have something to plug the react universe conf is back and we're on the lookout for speakers with great stories to share starting February 10th we're officially opening the call for papers for all things full stack and close platform with react and react native if you've got something exciting insightful or gamechanging to say we'd love to have you on the stage visit our website to submit your proposal let's make react Universe con 2025 Unforgettable together
Timestamps
Show
Guests
Zack Chapple
Founder
@
Zephyr Cloud
Jakub Romańczyk
Software Engineer
@
Callstack
Picture this: you’re managing multiple teams that can innovate independently, deploy updates swiftly, and navigate the complexity of app architecture with ease. Microfrontends make this possible, enabling the decomposition of frontends, much like microservices transformed backend development. But how does this translate to the mobile app development landscape? And what does it mean for your team’s velocity and strategy?
To give you the answers, we invited Zack Chapple, the Co-founder and CEO of Zephyr Cloud, and Jakub Romańczyk, the maintainer of Re.Pack at Callstack to talk about the evolution of microfrontends and their adaptation to mobile development.
How to embrace microfrontends on mobile?
Our episode starts with the fundamentals: what microfrontends are, why they matter, and the technical enablers that make them possible (Module Federation, anyone?). To give you a better understanding of this concept, Zack draws parallels between microservices and frontend decomposition, explaining how this approach empowers teams to ship independently while maintaining alignment with organizational goals. Then, we proceed to discuss the role of Webpack, Rspack, and Zephyr Cloud, showing how each of these solutions streamlines the management of complex frontends on web.
And since we were to talk about mobile microfrontends, that’s where the Zephyr Cloud and Re.Pack collaboration steps in. In addition to explaining how the integration of these tools works, our guests cover platform-specific pain points, such as managing version compatibility across shell apps and federated modules and dealing with over-the-air updates while staying compliant with app store regulations. They also explore real-world scenarios, including reducing bundle sizes, dynamically loading features based on user needs, and even ejecting unused code to optimize app performance. And let’s not forget a teaser for the Re.Pack 5 release!
Why should you care about mobile microfrontends?
For engineering teams, adopting microfrontends means smoother collaboration, faster development cycles, and reduced risk when rolling out updates. Organizations benefit from more agile workflows, streamlined app maintenance, and the ability to scale effectively without sacrificing quality or speed. This is by no means one solution to fit all, but if your team is grappling with massive app architectures or looking to innovate with smaller, more nimble components, this episode offers some tips for success.
More about microfrontends with Zephyr Cloud and Re.Pack
Planning a super app with React Native?
We help architect and develop super apps using modular, scalable designs.
Let’s chat
//
Insights
Learn more about
Super Apps
Here's everything we published recently on this topic.
//
Super Apps
We can help you move
it forward!
At Callstack, we work with companies big and small, pushing React Native everyday.
Super App Development
Turn your application into a secure platform with independent cross-platform mini apps, developed both internally and externally.
Module Federation Development
Use Module Federation to provide dynamic features within React Native mobile applications post-release.
