Ignite X is here! Frank Calise stops by, which means it's the start of Ignite season! After nearly a decade of React Native, Infinite Red's popular boilerplate is celebrating a huge milestone with a new release. Mazen and Frank break down everything that's new in Ignite X—don’t miss this deep dive into what’s new!
Ignite X is here!
Frank Calise stops by, which means it's the start of Ignite season! After nearly a decade of React Native, Infinite Red's popular boilerplate is celebrating a huge milestone with a new release. Mazen and Frank break down everything that's new in Ignite X—don’t miss this deep dive into what’s new!
This episode is brought to you by Infinite Red! Infinite Red is an expert React Native consultancy located in the USA. With nearly a decade of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter, core React Native contributors, creators of Ignite and Reactotron, and much, much more), Infinite Red is the best choice for helping you build and deploy your next React Native app.
Show Notes
Connect With Us!
Jed Bartausky:
Welcome back to another episode of the React Native Radio Podcast, episode 311 Ignite 10 with Frank Calise.
Mazen Chami:
Hey Frank, welcome back on the show. How are you doing?
Frank Calise:
Doing well, thanks. How are you?
Mazen Chami:
Good. Can't complain. I guess best thing to start with is since it's just you and I, we could do a lot of sports ball talk these days. Sorry to all the non-sports ball people out there. How have the Mets been? Sorry to start probably on a bad note, I guess
Frank Calise:
Actually decent this year. It was a fun wild ride through qualifying for the playoffs and they made it in and to the next round. I'm now facing rival City Philadelphia, so that'll be interesting and ugly.
Mazen Chami:
Yeah, well as it is with baseball, I guess.
Frank Calise:
Yeah,
Mazen Chami:
I'm a poser Yankee fan because that's team my wife supports and I have no other option or else I would be sleeping outside of the house. So here we are. Go Derek Jeter. No, he's not playing anymore. Anyways, I'm Mazen, he's Frank and we're a React native radio. Before we get into the topic, let's hear from our sponsor. Infinite Red is a Premier React native consultancy located fully remote in the United States. We're a team of 30 senior plus level React native developers and support staff and have been doing this for nearly a decade. If you're looking for React native expertise for your next project, hit us up at Infinite Red slash Radio. Don't forget to mention that you heard about us through the React Native Radio podcast. Okay, let's get into our topic, ignite V 10 with Frank Calise. Here we go again. So Frank, we're getting ready or we have released the Alpha and I assume the beta at this point for Ignite V 10 and we're getting close to having the full release for Ignite. How do you feel at this stage of the process?
Frank Calise:
Pretty good. I think it was about this time last year where we released Ignite nine. I didn't think we had that much work to do, do a full 10 release, but like true consultants, we invented work too, but we really packed some good features into this release and it feels like it progressed and the cool part about 10 was more people from Infinite Red got involved. So that made it a more enjoyable experience on my side and get to work with some of my team members more closely that I don't normally get to work with.
Mazen Chami:
That's cool. Yeah. Are we calling an Ignite XX plus? What is it going to be?
Frank Calise:
I didn't come up with a clever name this time. I think we're just going to ignite 10 with the Roman numeral X.
Mazen Chami:
Okay. We'll see. Maybe for Ignite 11 we'll come up with something witty.
Frank Calise:
Yeah, maybe we'll have a community name contest.
Mazen Chami:
Oh, that's a good idea. Yeah, I'd go for that. So what's the largest, or I should say, what's the main feature of Ignite V 10?
Frank Calise:
I don't know, that's just one main feature. I guess something the community has been looking for is the enhanced version of the boiler plate in the sense of dependencies, theming, things like that. So we made a big shift from the default being expo go and it is now CNG by default. So for those of you who don't know, that's continuous native generation. You can head over to the expo docs to read more about that, but it's their recommended way to build an app and get it into production. To my knowledge, never recommended expo go to go into the app stores, but of course you could have done it and it worked out. But in making this shift, it allowed us to get into some of those upgrades that we would do on our client projects anyway, because you don't have to live in that expo go ecosystem and you can make dependency changes more easily and things of that nature. So I would say that's the biggest core piece behind this movement.
Mazen Chami:
Cool. Yeah, whenever I think of expo go, I always envision Demo being able to demo your app locally quickly without having to deploy and all that kind of stuff, but also demo a limited, or should I say subset of your code, a subset of your app. So if you have anything native specific that's outside of expo's, core modules and some of them don't work within Expo also then kind of get to do that. In the past, whenever I was doing mentoring or teaching, I would usually do expo go because for beginners it's always easier to deploy. This is when in remote situations kind of get them to send you their expo, go QR code, you scan it, you get to see it. But we are consultants and we're talking about building production level apps. Not that expo go can give you that, but still we're talking about bigger features here. Expo C and G makes the most sense. Can you talk about, I also see on here that we've moved over to MMKV over Async Storage. I know we just released an episode with Mark savi on Nitro modules, but he's also the maintainer and I guess founder of MMKV.
Frank Calise:
Yeah, so with that CNG switch, this allowed us to jump over from AY storage from the React native community package to Margie's and MKV package, which obviously you get that boost in performance, you get the synchronous calls, which is nice. And addition to that, we do have a React toron plugin for MMKV. And so we made that part of a default boilerplate React Toron set up as well, so you can inspect what's stored locally more easily. And with this change, there was an interesting nuance in the development here because in new architecture, which Ignite should be compatible with dependencies and having them work properly, it gets kind of crazy and depending on the package you're talking about and MMKV, the old architecture is supported in two x, but when you go to Newark it's three x and further. So we had to make some adjustments to the CLI to get that right, but the cool part is that intent, that adjustment is there, so if you throw on the new architecture flag, it will make those changes for you without you needing to think about it.
Mazen Chami:
Yeah, I just have to do that for a client. V three is a pure c plus plus module, which is why that's the case. Cool. So yeah, I think the next one I'm actually going to talk about, and we're going to have a larger episode around this topic, but we just wanted to highlight it in V 10. We did a lot of work and support around keyboard avoiding stuff. So I guess the TLDR on that is we leveraged React native keyboard controller to do all the heavy lifting. This kind of seems like the best package out there that does this handling and there was a lot of rework to the screen component, which is where this is essentially housed. And basically all that happens is you wrap your entire app with the provider and then within the screen you decide we're doing the logic for you where I did a couple of test cases, right, four test cases. If your input is on a screen at the top of a view, if it's the bottom of a view, if it's at the top of a scroll view, if it's out of scope or out of view in a scroll view, how does it handle in those four scenarios? So those are all tricky situations and I believe if you were to go into V 10 that should be solved. Now with all that, please open up any issues within there if you see anything.
Frank Calise:
Yeah, that's great. Definitely keyboard handling is always an issue of thorn and reactive side and we hope to combat most of that with this change.
Mazen Chami:
And believe it or not, that's actually one of our most requested episodes. So we'll keep it at that. We'll have a full episode around this and what we did and what we recommend moving forward. The next one is my favorite topic, as some of you may know by now, better I 18 and support basically swapped out IN js for React I next and IT next. Again, listen to my talk at React Universe because I kind of go around why this is a better path and it's mainly because we have a larger feature set that will let us let you and whoever uses Ignite leverage all the aspects needed for internationalizing your app. And as part of this work, we also opened up a cookbook recipe so that if you are an older version of Ignite, you can migrate from I 18 N js to react 18 next.
Frank Calise:
Yeah, I think that's a great addition. This major version change around everyone always asks, oh, how do I upgrade? And there's no real answer to that because you kind of ignite your app and you're off and running and then you're on your own. You add your dependencies, you have your business logic and you maintain it. But as these releases do come out and there are some changes this time around, we created some how-tos via the cookbook recipes and that can maybe help you within those migrations instead of reading get Diffs or sifting through PRS and that sort of thing. So that's a pretty cool aspect. Next up is the refactor of the toggle component. Nothing groundbreaking here other than in our component library in Ignite Toggle was responsible for check boxes, switches, radios, all that. You changed the view of those via the variant prop. There were some animations and things in there, so the files getting quite large. We refactored it to be three separate files, so you have your switch radio and checkbox files now it's a lot easier to maintain for us. And one of the other things we did here was refactor the animation code. So it was using reanimated but now it just uses Core.
Mazen Chami:
Why is that?
Frank Calise:
Yeah, it was just simpler in terms of maybe not everyone wants to use Reanimated now we go to it quite a lot on our projects, but we had some of the team thought that we didn't need the UI library depending on Reanimated out of the box. So we were able to strip that and you could only sell Reanimated at the beginning of your Ignite app if you really wanted to. And it is a very complex library. There are issues with it from time to time, so maybe that alleviates pain for some.
Mazen Chami:
That's actually very cool. I just looked it up, the old toggle file was 700 lines. That's a lot to maintain. Kind of scroll up and down through just to figure out one silly fix that might come up. And I think you briefly touched on it, but I think it's also very important to highlight and bring up back to the top is you could essentially copy the components folder and put it in your other projects because it is third party agnostic. It doesn't care about those third party libraries. It's React native Core. You can do the changes for the animations and use reanimated or whatever it is you want to do, but we are just making it a non third party dependent design system have you library where you can just do with it as you want and kind of keeps it slim along those paths.
So I think that's kind of important to highlight. Next up is actually one that I believe the community was asking a lot of questions around. It's the removal of MST. So as you know, we are MST fans here at Infinite Red Jamon is one of the maintainers of M-S-T-M-S-T stands for MobX State Tree. So essentially Ignite is now similar how Component library is not dependent on third party libraries. Ignite is no longer dependent on a state management tool. Essentially it gives you a true boilerplate empty starting point where you can come in and add your state management library of choice and please don't choose a redux. Oops, I said that out loud Anyways, moving on.
Frank Calise:
Next up is another one that was always requested by the community. I think there were like three different issues open about this, but theme support out of the box Ignite only really had its light theme and since dark theme is what all the kids want these days, mark Ricker of Infinite Red was able to implement this functionality. So he has added some hooks and context around tracking which theme is active. If it's enabled by the user or the system, you can do either one and ways to adjust your color palettes, your spacing, anything related to the theme. And that's all working in the boilerplate demo application now. So you could see how that works. We did a part of my workshop at Chain React dealt with these changes just to kind of show the work involved in actually supporting another theme because your boss or client may just say like, oh, just activate dark mode. How hard could it be? But it's kind of more involved. And this was another one that comes along with some cookbook recipes and how this theme support can play nicely with third party styling libraries like uni styles and style components and some of the other ones out there, which is pretty cool.
Mazen Chami:
Yeah, that's pretty cool to highlight. I'm a big fan of uni styles these days and I think the theme support set up that Mark did is very cool and pretty similar I would say. And as everything that goes with Ignite and what we do at Infinite Red, this not just something that Mark hand rolled and pushed and that was it. This was actually one that was tested at one of Mark's clients. I believe it was Mark's client. Yeah, he got to use it on the client project from end to end, figure out any bugs brought those bug, fix his back into Ignite and then the rest of the team at Infin got to weigh in on it and kind of give their feedback and that's where this landed. So we call Ignite the battle tested boiler plane. That's for a reason because we essentially do battle test it before we roll it out to the community. So you're getting good stuff out there. Tell us a little bit about the generator stuff, Frank.
Frank Calise:
So one of the probably most underrated pieces of functionality in Ignite are the generators. So if you don't know the CLI has a way of generating your models if you're using MST, your screen components, your UI components, and basically it's like customizable templates to do some of your recurring work upfront. So if you're always importing a few things or starting your screen component out with the same header and things of that nature, you can adjust the template and then just with a quick command on the CLI generate a new screen or a new component in your component library or a model where you're going to store data. Part of where the generators fell short was that it had a hardcoded path in it and it expected Ignites directory structure to be there. So that means you have a top level app directory where components live screens and things of that nature, which worked fine if you're using Ignite, but with Expo router becoming more and more popular and we wanted to be able to flow that direction if that one day becomes a default or people just want to play around with it.
Expo router also uses this directory structure. So that was one thing to consider. Another consideration was I had a client that I've worked on that had a very specific Monte repo structure and they wanted to be able to house the screens in one place and the library in another, but utilize the generators and that wasn't very possible the way that it was. So that was another use case for this change. And basically you now have the option to specify the directory that you're going to generate into as well as the case, the casing on the file name. So it's a Camel case, Pascal case, a few other options in there, none. You can have it as is as you type it. And yeah, this just lets it be a little bit more flexible and it kind helped prep for the next change that I'll talk about, which is the experimental expo router flag.
So if you're familiar with the experimental flag on Ignite, you can use certain versions of expo like Alpha Beta Canary for example. Anything. There's an MPM tag for to be honest, as well as new arc, you can pass in new dash arc and that'll swap you over to the new architecture. So now a new one is Expo dash router. If you provide that on CLI, we will actually switch up our directory structure. You'll now have a top level source directory, SRC, the app directory inside of that will contain your routes. And then all of the other Ignite directors you're used to will be a sibling to that right under SRC. And again, with the generator changes, you can now generate screens properly in the expo router setting, which requires you to have more nested directories and not one screen directory for example. But it's been really fun to play with that. This came out of inspiration for prepping for Chain React and the expo router workshop I did with Ellie and Keith Kerik of Expo. I had to set this up in five projects I think in a matter
Jed Bartausky:
Of
Frank Calise:
A few weeks, and I got tired of doing that, so I built it in.
Mazen Chami:
It sounds like a lot of ignite, like I said, battle tested stuff. So from client stuff but also from workshops that we put together, talks that we put together that just kind of enlightened us to do all this research and stuff. That's pretty cool. So experimental explore router still, do you anticipate that coming out of experimental for V 10 or just who knows? At this point?
Frank Calise:
For V 10, I'd say definitely not. Maybe at a patch version sometime in the future we'll see what mid-October brings with SDK 52 and the next release expo router. We've definitely left it as experimental. We are using on several client projects now, I think three, four maybe.
Mazen Chami:
I'm on a project where we're full full expo top to bottom and expo router and I'm actually loving its flow.
Frank Calise:
Yeah, it's definitely been performing well in 90% of the cases. There are some things modal related, crazy navigator, like nested related things we're hitting and working with expo to iron out. So I think once those are more stable, we'll probably, and if that's what everyone's going to, I mean then that's what we'll do to switch it. But for right now it's a flag and it's pretty easy to get to.
Mazen Chami:
So last line item here, not Ignite 10 related but adjacent Ignite Cookbook. We've mentioned a bunch of these. So there's a cookbook to swap out it N js for React i 18 next or I 18 next if you're an older version of Ignite. Frank also mentioned the new theming system that we have set up and now plays nice with third party libraries like style components, uni styles and all that and shows you how to handle it. And we also have another cookbook recipe for better Monorepo support. That's something the community has also been asking for quite a bit. So there's that. Please, please give this a try. Post any issues that you come up with, fix anything that you see wrong and just kind of start a conversation with us and we'll talk about it. And like we said, most of these features came out of issues that you all the community opened up and we compiled them all together and Ignite 10 grew from it. So please keep doing what you're doing. Community. Before we close off, Frank, for those who already do not follow you, what's your handle on social, on Twitter? I'll never say X,
Frank Calise:
Twitter, GitHub, LinkedIn is all Frank Elise, C-A-A-L-I-S-E.
Mazen Chami:
Give him a follow. Before we close out, I really want to shout out to everyone at Infinite Red who played a part in this release. Like Frank mentioned, a lot of different people played different parts in it. Frank, of course being one of them. Philippe Pena, Lizzie Lin, mark Ricker, JP or Justin Hick. I know also Trevor Coleman, Josh Yos were helping us with some reviews and same with Ryan Linton and many others within the Infinite Red organization. And also I'm sure some community members also helped out with this. So huge kudos and shout out to all you all for helping out with this. Robin's not here to give a mom joke. So that's it. See you all next time.
Jed Bartausky:
As always, thanks to our editor, Todd Werth, our assistant editor, me, Jed Bartausky, our marketing and episode release coordinator, Justin Huskey and our guest coordinator, Mazen Chami. Our producers and hosts are Jamon Holmgren, Robin Heinze and Mazen Chami. Thanks to our sponsor, infinite Red, check us out at infinite.red/radio. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio on all the major podcasting platforms.