As Microsoft App Center sails into the sunset, Robin and Mazen break down what this major shift means by focusing on new tools and strategies for React Native developers.
As Microsoft App Center sails into the sunset, Robin and Mazen break down what this major shift means by focusing on new tools and strategies for React Native developers.
This episode is brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Episode Links
Connect With Us!
Todd Werth:
Welcome back to React Native Radio Podcast, brought to you by the Flat Earth Society. If the eclipse was real, why wouldn't they let us look at it with our own eyes? Episode 2 94, rest in Peace App Center and other news.
Robin Heinze:
Hey Mazen, do you follow Formula One at all?
Mazen Chami:
So growing up I used to watch Formula One religiously with my dad. He was a big Formula one fan, a Ferrari and Mercedes fan. When I moved to the US I stopped watching it, but during the pandemic, someone in our bubble was into the Netflix show Drive to Survive, so she got me back into it ever since. I've been watching, but I dunno how to say this. I know you're going to take offense to it. I don't like we're stopping.
Robin Heinze:
Well, of course not because he wins everything and it makes it not fun. If you watched the race on Sunday, he DNF for the first time in two years.
Mazen Chami:
Spoiler
Robin Heinze:
Alert. Hopefully nobody is still catching up on the Australian GP by the time this comes out, but it was a good race. I have been super into it recently, but I am the kind of fan that F1 fans hate because I came from Drive to Survive pretty late in the game, so I don't have all the history. I've been trying to educate myself though on the history, but it's been fun.
Mazen Chami:
I go back and forth. I don't know if I'm, I'm more of a Ferrari fan, but I also like Mercedes, but I also like the underdog story of Williams.
Robin Heinze:
Williams is having a rough time.
Mazen Chami:
I mean, they were good when I wasn't even alive, when they were good, I feel like, so they're the underdogs in my mind.
Robin Heinze:
I've had a really good time. I'm not going to say who my favorite driver in team are because I just don't want to make any enemies in our fan base. I feel like people get really intense about their favorite drivers in teams, but it's been really fun to watch and this past weekend was insane to lose Max so early in the race and actually have it be a
Mazen Chami:
Fight. Yeah, I think drive survive, put them in the spotlight a lot that people didn't know that they're just grown up children at the end of the day.
Robin Heinze:
Well, yeah, so much more about the drivers and their personalities now because of Drive to Survive and social media and stuff too, and it's just they all seem really cool. People that I want to hang out with,
Mazen Chami:
I would love to see if they did, it would've been great if they did a drive to survive when Schumacher was driving. I wonder what those personalities,
Robin Heinze:
That would've been really interesting. I feel like they were a lot more contentious with each other, like the drivers now they're all buddies like Carlos and Lando gave each other a big hug after the race on Sunday. They're just really cute and friends. Anyway, I can talk about F1 for the whole episode, but I won't. I'm Robin. I'm your host for today because Jamon is on his way to Africa, which is very exciting for him and his family. So I'll be your host for today. I'm your friendly director of engineering at Infinite Red and I'm joined by my investigative co-host Zen for the day.
Mazen Chami:
Where's my magnifying glass? I need it. I'll get it next. You
Robin Heinze:
Get your Sherlock Holmes hat. Yeah, I love it. Before we get into our topic, let's hear from our sponsor.
Jamon Holmgren:
This episode is sponsored as always by Infinite Red. Infinite Red is a premier React native consultancy located fully remote in the US and Canada. If you're looking for React native expertise for your next project, hit us up at Infinite Red slash React native and don't forget to mention that you heard about us through the React Native Radio podcast.
Robin Heinze:
I guess you did get to hear from Jamon from Africa doing this sponsorship. Not really. Let's get into our topic. We're going to do an episode of We React to news. Everything that's been going on in the React native world, one of the biggest headlines recently is App Center. Microsoft App Center is being retired Ozan. Have you used App Center?
Mazen Chami:
I used it and I was like, you know what, I'll just go through the pane of store uploads. But this was like early React native early app center coming out.
Robin Heinze:
It was the thing. It was the tool to use for a while there.
Mazen Chami:
Yeah, I didn't jump on that bandwagon. I don't know why I didn't.
Robin Heinze:
We used it for Code Push for sure. I don't remember that we ever used its full tool chain. We didn't do builds on it
Mazen Chami:
Technically. Well not Firebase, but not all of the support Firebase has, right? It does building testing distribution. Yes. Don't they do analytics also and stuff like that?
Robin Heinze:
They do analytics and diagnostics like crash reporting and stuff. I think they're most known for Code Push, which was the first over the air updates.
Mazen Chami:
When you say App Center, my mind just goes straight to Coush. I don't really think about the other
Robin Heinze:
Stuff. That was really the feature they offered that was novel and you couldn't get anywhere else and you couldn't do yourself like building and distribution. You couldn't do that yourself. You can go through the stores, whatever, but Code Push was really their bread and butter and they did say in the announcement of the retirement that you will still be able to use Code Push as a standalone. So they're creating a special version of Code Push that you can put in your app independently of the app center, SDK. So that's good. I think a lot of people still do use Code Push, but I don't think a ton of people were using the rest of their services. That said, I have a client that is still using their distribution services and when I told them I was like, oh by the way, we're going to have to figure out a new solution for App Center. They're like, oh good, we hate App Center. There you go. There you go. That was an easier conversation than I thought it was going to be.
Mazen Chami:
I've heard a lot of those stories. It's great in theory for what it does, but it's not intuitive and it's not easy to use and I feel like the past couple of months I've only heard negative things about it before they shut it down.
Robin Heinze:
I think really just Microsoft is focusing on other things. It just never got the dedicated attention that say that EAS is getting, which by the way is probably your best alternative right off the bat is Expo EAS.
Mazen Chami:
Oh, hands down.
Robin Heinze:
Because EAS has build all the way through store distribution
Mazen Chami:
And now they have store listing edit. You can edit your keywords, your description right in line. I know I've mentioned this in the podcast, what are we in March now when we're recording? Like a year ago? I feel like I touched on this because with the Chain React app, I was building it and I used EAS update and distribution and that whole pipeline for it and it was an amazing developer experience a year ago. I used it recently and I feel like it's grown even more. It has a lot of potential. So I think for a company that's looking for an alternative, this is a very, very good solution. And I think recently as part of this whole push, well as this whole code push goes away, they've also released, what do you call it, GitHub actions. So ways to integrate all that into your CLI and all that. So that's amazing and if you're interested, you could check out our Chain React 2023 app repo. It's pull Request 180 3, which I think is in the show notes. Yeah,
Robin Heinze:
We've used EAS pretty heavily around here. I don't think we've ever talked about Expo on the show, right?
Mazen Chami:
The first time I'm hearing it. Actually
Robin Heinze:
That
Mazen Chami:
Was they came on yesterday or
Robin Heinze:
Something, pick it up. We love expo around here. We talk about it a lot. The only thing that they don't have is the crash reporting and analytics side and they have I think pretty tight Integration with Century is a good option if you're using expo for your crashes and analytics along with there's a ton of great analytics providers out there as well.
Mazen Chami:
I wouldn't put it past them. If there's an expo analytics SDK coming out soon,
Robin Heinze:
I wouldn't be surprised if that was on the roadmap.
Mazen Chami:
Watch out Firebase,
Robin Heinze:
Keep an eye out from the infinite red space where we're planning a blog post about how to transition from map center to EAS. So keep an eye out for that. Next up we've got React native Ski A 1.0, ski A is official. It's no longer experimental. They're actually ahead of React native and getting to 1.0. That's impressive.
Mazen Chami:
What's funny about that until I watched this video, so the video I'm referring to is it will be in the show notes, it's called Time to Fly by William Lon. I didn't realize Skia was experimental until now. I just thought any React native versioning system, but it's out.
Robin Heinze:
I mean it's probably experimental the same way React native is used,
Mazen Chami:
Been fine
Robin Heinze:
Unquote experimental. It's still 0.7 something. Exactly.
Mazen Chami:
Yeah, it's great. It's great. I think kind of like going over what this video time a flies is about, William covers five points that ski at 1.0 does one Rich text layout using their new paragraph API. It's exactly what it sounds like.
Robin Heinze:
Paragraph API is that like
Mazen Chami:
They're calling it a paragraph API. It's almost like a think of it as like a text wrapper. It's probably the best way to put it. So yeah, think of it. You know how you use your text component, you would use a paragraph component and what you can do is you pass in a prop called paragraph and then within that paragraph you do your styling size, font size, font, family if you want to align it to the center or not. And then you do other stuff like you add text to it, you add animations to it, you do whatever you want. And then the nice thing about it is you can add text as many times as you want. So let's say, let's hear me out, you add text and it says hello and then you add another text that says World, but then you style world differently.
So it's almost like some websites you go to that's their whole banner text. Some are underlined, some are bolding and stuff. It surprising. You can now do hard with this and it is, what is it? Nesting texts in React native always has something wrong with it. You almost have to apply too much padding to all of them to get them to line up and stuff. So that's a cool part to this. Another, that's one. Number two, they've kind of upgraded their animation hooks. This is actually very cool in the video they got to show how you would write an animation in the past and then now you'd write it. Now it's so much quicker, so much cleaner. They've essentially in my mind, taken user feedback on how complex it was and how long it took to write an animation and just kind of simplified it and it's like you could do it in one line, two lines and just get pure clean performant animations out of it. The other one is called Atlas API. So pretty cool because you can do massive large animations without skipping a beat even on low end Android devices. And I believe in the video, again, I'm kind of doing this from memory in the video they go over an actual globe.
Robin Heinze:
I can see why they, that's why they call it the Atlas API.
Mazen Chami:
Yeah, right. It's like a ball of, what do you call it, like icons and then that icon kind of moves around and they compare before and after and you do see a jitter in the past and then now it's just very smooth kind of moving all over the screen. So that's pretty cool. I don't know if that's where Atlas came from, but it's pretty
Robin Heinze:
Cool. I mean Atlas is the God that used to carry the world on his shoulders.
Mazen Chami:
There you go. Well that's actually right. Yeah. The number four on the list was Lottie animations using a new package called React Native Scottie.
Robin Heinze:
That's a really cool name for it is. And Laie Laie. Please tell me, please tell me there's a logo or something referencing like a Scotty dog. Such a
Mazen Chami:
Missed opportunity. No, it's none of that. So this was built by Margie, so our good friend Mark savi who's been on the podcast.
Robin Heinze:
Okay Mark, if you're listening, you need to make the logo for React native Scotty a Scotty dog, please. This is important
Mazen Chami:
On this one very, I'm not going to dig deep into it. It's basically instead of you importing React Native Lottie, you'd import React native Scotty still put your JSON animations in the Scotty component and it's efficient. So a good benchmark they have, you can kind of see on the repo they saw a 63% improvement in frame rates. That's massive if you think about it. So a lot fun animations can happen, can so faster, better with React native. Yeah, and again, I think we say this a lot on the podcast, but any package written by Mark Avi is a good package that I'm sure I'm going on a limb here, but I'm sure is new architecture compatible. Also I see a c plus plus folder. I'm not going to keep digging. A hundred percent has to be new architecture. Last one very quick. This is Canvas kit js. So really the best way to explain this one that I was able to figure out, think of it as a, you deliver web experiences with React native Skia in a small bundle size. So I think the small bundle size is very important. So you get to keep your performance low and everything that comes with a small bundle at the same time, you're able to deliver what you would call web animations on mobile and then in reverse also on the web. So the whole cross platform ability lives there.
Robin Heinze:
So there was a barrier to using skia for web apps because it was just so large, which negatively impacts web since it has to load the entire bundle on refresh.
Mazen Chami:
Yeah, I think at the end of the day, canvas could, JS is just a polyfill for the canvas kit that uses browser APIs. Does that make sense? So that's essentially all it does. Keeping everything down.
Robin Heinze:
Having stuff that allows you to seamlessly share stuff between your web and mobile is a huge theme that I've seen in a lot of libraries because getting to be super common to write once and run three places.
I know we're doing it on a couple clients, so that's really good to see. Speaking of new architecture, react native team published a new landing page on the doc site for the new architecture, which is a really good summary of the key points of the new architecture and why it's going to be important to switch. So that came out a couple of weeks ago. Theo, the YouTuber released a video this week basically going through that document. You could say, oh he's just reading the docs, it's low hanging fruit. It's true. He did just go through and read that document, but he added some commentary that I found to be really helpful in kind of internalizing what the docs actually said. He gave some examples that were really helpful for me personally to kind of internalize it and we as a consultancy are going to be responsible for convincing our clients for one thing when it's time to switch. So having these kinds of talking points in our arsenal is going to be really important. So I thought it was interesting. Theo's a prolific YouTuber and can be a little bit controversial sometimes, but I thought it was a good video. Did you watch it Mazen?
Mazen Chami:
Yes, I did. Very helpful. Like you said, just the commentary and hearing from a React native developer what their perspective is. I think him doing the, or showing at least the tool tip demo that the team at Meta put together, that was great. I know internally JP kind of
Robin Heinze:
Played around with it. JP is one of
Mazen Chami:
Our, and he gave us his
Robin Heinze:
Colleagues here at in
Mazen Chami:
Redd. Yeah, colleagues here showed. He explained that this is still on a nightly build so you don't have full access to it with the latest release, but just getting to see the tool tip move without a jitter,
Robin Heinze:
It was pretty mind blowing. That's big. I went down a similar path of trying to recreate the example that they have in the docx and it did not go well. Apparently the code that was used is not on Maine,
But it was still super helpful. I also, Theo gave this example of talking about JSI and going bridge list and the fact that you can run c plus plus basically directly. He gave this example of why you might want to do that. His example was about the Twitch chat and the colors and the fact that they needed to make them accessible and they had to do a bunch of math about transforming colors consistently across platforms and it was c plus plus was the only language that you could do it. And so being able to do something like that and still have it run and react native is going to be a huge deal. You can't do something like that now with the old architecture. So that was a really helpful example. Yeah, so I would watch that if you haven't, I mean if you want to just read the landing page, that's fine too, but if you want a little bit of extra commentary, I had recommend the video. I think Evan Bacon also endorsed it and retweeted it on Twitter, so that's a pretty good indication that it's a good one.
Mazen Chami:
Totally. And I think one bit of feedback I'll give anyone that's listening is we are getting close to when Meta is recommending the new architecture. So I think if you are on a higher level of React native or closer to what's the latest release? 73, well 74 soon I believe. But if you're close to that, I would highly recommend turning on the new architecture in your repo and just seeing what happens. And if you get any gains from do some performance testing and all that kind of stuff, start doing that sooner rather than later so that, because essentially you could have an app that's performing and good, but then you turn on the new architecture and all of a sudden you see some drastic improvements that could unlock a lot of avenues for you. And also what it could do is unlock the potential for you to find packages out there that aren't new architecture compatible. And you can help Meta who's actually helping all these open source maintainers get their apps.
Robin Heinze:
Expo is really taking a personal investment in making sure the libraries that people are using are new architecture compatible
Mazen Chami:
Where they're just helping the maintainers, your app at the end of the day get better, but you're also helping the community and everyone else involved in the community have good well performing new architecture compatible packages. Next up on our list, there's a new package out there by Gary Taman. It's called Faster Image. This is basically a replacement for React native fast image, which was deprecated recently ish, maybe a year or so ago. I do think there's a new package also coming out soon called React native fastest image.
Robin Heinze:
That's a joke, fast, faster. It only makes sense that there'll be a
Mazen Chami:
Fastest react native fast react native fast image react this one fastest image, fastest image and then fastest.
Robin Heinze:
If you say fastest, then you're just opening yourself up to look stupid when someone comes out with something faster.
Mazen Chami:
This is not fastest. This is faster image view, very good looking package. It's TypeScript compatible. We have animated transitions in here. We have placeholder support memory and disc caching, which is very good. And looking at the repo, there's a nice GIF that shows you how performant it is and how well it functions and it supports Vision os. If that's your thing.
Robin Heinze:
Does he go into technically how it's able to be faster than reacting to fast image?
Mazen Chami:
Yeah, so he said what he pretty much says on here is it focuses on speed and memory usage. So my guess is there's a lot of memory optimization and cleanup that's happening in the background and he's using some other packages which I've never heard of, nuke for iOS and Mac os. And then Coil for Android. Nuke is just kind of reading their GitHub repo load images from different sources and display them in your app using a simple flexible API take advantage of powerful image processing capabilities and a robust caching system. So again, I guess it just performance is the caching. Nuke is optimized for performance and its advanced architecture enables virtually unlimited possibilities for customization. So there's that. And then Coil pretty much has the same thing. It's fast, lightweight, easy to use, modern using Kotlin and essentially does disc caching and memory cleanup included is what it says. So under the hood he leverages native libraries that do all the optimization for you and then just kind of cleans up.
Robin Heinze:
That's cool. And
Mazen Chami:
Unifies the API for
Robin Heinze:
Us. That'll be nice to try. I'm still using the React native image in some of my projects.
Mazen Chami:
Well if you think about if you have a massive app, we've talked about it on here before, the meca app, it's a lot of images because an e-commerce store and you're display a lot of images in a scroll view, horizontal and vertically. It's
Robin Heinze:
Just like a performance nightmare
Mazen Chami:
Exactly on its own. So leveraging something like this could be helpful in scenarios like that. You have e-commerce apps, you have apps that have a long list say, oh, a good example could be like a contacts list app sort of thing where you have an icon and some text that's a perfect example of where you would want to use something
Robin Heinze:
Along those lines. Nice. We're getting short on time, so we're going to move onto the next one. But it's related. Speaking of performance, Shopify, another e-commerce adjacent app released an article recently on how they improve their app performance authored by Taha Naqvi, who we actually had on the show in React Native or React native Radio 2 45, which we'll link in the show notes, but they released it really in depth article Mazen. What was the kind of TLDR on that one? So
Mazen Chami:
TLDR load time optimization was done. I'm not going to go into the specifics. I think the article goes deeper than this list optimization. So again, episode 2 45 with Tahoe was about list. So you can see recycle view being used there. Setting inline requires to true, this is an interesting one. I think we've talked about it before. When that happens, let's say you have a package that's imported at the top of your library, your component, but it doesn't get used in all scenarios except certain scenarios. So you could wrap that in an inline require so that it's only used when that happens. So you don't have this bloated component with all these imports sort of thing. Bogging it down. So it's a performance improvement there.
Robin Heinze:
Weren't we just talking in our last episode about how inline requires is dangerous? Yeah,
Mazen Chami:
It is dangerous, yes. But I think we also mentioned, or if we didn't, were mentioning now it's 75, I think version 75 talks about how inline requires can help. So I think leveraging all those is kind where finding the right balance and knowing what you're doing. I don't know how I'd handle that in an app, but it'd be nice to kind of test out.
Robin Heinze:
What I really loved about this article or the piece that resonated with me was they kind of generalized the source of most of their performance bottlenecks was like one of three things. And the three things were doing necessary work at the wrong time or doing unnecessary work or not leveraging cash to its fullest loading data, every single render when you could be caching it, that kind of thing. I thought that was a really, really helpful generalization. And then they go into a lot of specifics in the rest of the article.
Mazen Chami:
The two other things I kind of wanted to mention was they take advantage of batch state updates, which is also very good. React 18, great feature there. And then native modules were taking too long to initialize, so they kind of talk about their strategy on how to handle that. So we are talking about building an app in JavaScript TypeScript, but we do need our native counterparts to play. Nice. So they're finding that right balance right there. Right? So long story short of this article, they improved app launch by 44%. That's
Robin Heinze:
Huge. That
Mazen Chami:
Is huge. And they also reduced, this is crazy to me, reduced screen load times by 59%. That's huge for a long list to be reduced by 60%, that's noticeable big time. So I would advise people looking at this article to look at this article if they feel like their app could use some performance help.
Robin Heinze:
It's so often overlooked and sort of saved till the end. So yeah, great article. Totally. If you want to learn more about how to make your app faster. To kind of wrap things up, we have a somewhat self-serving news item, but we're excited about it. Chain React workshops have been announced. So if you're coming to Chain React and you want to do a workshop, you can do that now. We have a beginner workshop which is React native to fundamentals. And then we have an intermediate workshop which will feature Keith Kurak from Expo. And then we have an advanced workshop. Mazen, you're actually helping with the advanced workshop if you want to talk a little bit more about what that's about.
Mazen Chami:
Yeah, I'll go backwards. So I'm teaching the advanced workshop, Josh and John, major colleagues here at Infinite Red will be assisting me for that. We're basically going to talk about reading and writing native code for React native developers. So understanding the different syntaxes of all the native languages needed and we'll tie that all with a bow and build a native module using some of those native languages that we kind of discussed. That's the advanced intermediate, like Robin mentioned. Keith Kurak from Expo will be co-led with Frank Calise, who I'm sure you've never heard of, but he's also a colleague of ours here.
Robin Heinze:
We never talk about him and we've never had him on the show.
Mazen Chami:
Ellie will be assisting them. Ellie's also a colleague here at Infinite Red. They're calling it Good Citizen being a good mobile citizen. So building apps for multiple screen sizes, doing config plugins and widgets, all that fun stuff that expo's doing over there. So you kind of get to learn that. So if you want to stay in the expo land, you have that perfect intermediate course. And then the beginner React. Native Essentials is what it's titled, will be led by JP, who I mentioned earlier, colleague here, and he'll be assisted by Nick and Felipe again, colleagues here at Infinite Red.
Robin Heinze:
Yeah, if you want to get information directly from the Infinite Red team, this is your chance.
Mazen Chami:
Exactly. Yeah. Face to face value with us right there. And like I said, the beginner is just beginner. You're going to start learning how to style things, get all the way up to some ish concepts in React Native, but you'll walk out with a functioning app on your phone or simulator. So you kind of get to show that off if you want. And if you don't know where you fit in this, check out the website. There's that we put together Justin Huskey over here at Infinite Red and I kind of work together on a flow. If you're not sure which workshop to sign up for,
Robin Heinze:
I just checked it out. It's really cool. It's like one of those, the quizzes that you take on the like, oh, what foundation is right for you? Or
Mazen Chami:
You could literally pick a workshop with as little as two clicks.
Robin Heinze:
Nice. They counted.
Mazen Chami:
Or I think the maximum flow is four. So we kept it very short to the point.
Robin Heinze:
It's not a five minute questionnaire.
Mazen Chami:
We didn't want you to sit there and have to do a five minute quiz. And I think another piece to highlight for Chain React, that's not workshop related, but please submit CFPs if you're interested in speaking. Yes. The nice thing about this community and this conference is we get a lot of first time speakers and I can say from experience and just kind of being in the crowd and now working for Infinite Red, everyone is very friendly and nice. Even if it's your first time, the crowd will pump you up, help you out and all that. And hey, you might also get to be speaking before or after Robin Hinz, so you never know what.
Robin Heinze:
That's right. I will be speaking at Chain React this year about Ignite. So come join me on the stage and submit your CFP. We're really focusing on technical talks this year, and so we want your React native focused talks. So submit that CFP, we'll put that in the show notes as well. And to wrap up, my favorite little piece of news, this is really close to my heart, if you've ever used NASA's spot, the station app. So if the Space station orbits the earth all the time and it does this weird orbit pattern where it's crossing over a different part of the earth pretty much every day and they have this app so you know where the station is at any given time, if you want to look up in the sky and find it. And their app is using not only React Native but Ignite, which we were super heartworm to hear that. And we're actually going to have someone from NASA on the show,
Mazen Chami:
an astronaut
Robin Heinze:
coming up soon to talk about it. So that was a fun little,
Mazen Chami:
is he an astronaut Robin?
Robin Heinze:
News. So that's it for this episode. We really enjoyed going through all these fun developments in the reactive world. We will see you all next time. Bye.
Jed Bartausky:
As always, thanks to our production team with editor Todd Werth, our assistant editor and episode release coordinator. Yours truly, Jed Bartausky, our director of marketing, Justin Huskey and our guest coordinator Derek Greenberg. Our producer and host is Jamon Holmgren and executive producers and hosts are Robin Hines and Mazen Chami. Thanks to our sponsor, infinite Red. Check us out at Infinite Red slash react native. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio wherever you get your podcasts.