React Native EU 2021 was fully online and we watched every talk! Jamon, Robin, and Mazen talk about what piqued their interest and what you should know about this React Native focused conference. Also: Jamon shows off his sound bite editing skill….
React Native EU 2021 was fully online and we watched every talk! Jamon, Robin, and Mazen talk about what piqued their interest and what you should know about this React Native focused conference. Also: Jamon shows off his sound bite editing skill….
This episode 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.
Connect With Us!
Todd Werth:
Welcome back to React Native Radio Podcast, brought to you by Tres Comas, the tequila for billionaires. Episode 212, React Native EU roundup.
Jamon Holmgren:
So I have to tell you this funny story about my brother. So my brother is not a professional developer. He does WordPress websites. This is my brother Lucas, by the way.
Robin Heinze:
WordPress developers are about to come for you on Twitter for calling them not real developers.
Jamon Holmgren:
Oh man. Well, if they're listening to this, kudos.
Robin Heinze:
I don't know how many we have in the audience.
Jamon Holmgren:
I was a WordPress developer at one point. I'm not casting shade, but it's not his main job, right? He's in marketing mainly, and he does some other things, but for some reason he listens to React Native Radio. So, hi Lucas.
Robin Heinze:
For some reason? It's not like his brother's the host or anything.
Jamon Holmgren:
I appreciate the support. I mean, that's pretty good. But I was talking to him on the phone the other day, which is weird, right? Do you talk to your siblings on the phone?
Robin Heinze:
Never.
Jamon Holmgren:
Never. See, Lucas is like an old soul. He prefers to talk on the phone. He doesn't like to text and he just turned 31. I'm almost 40 and I'm different, I guess. But yeah, that's just how he is. So he calls me up and we're talking and then he's like, yeah, I've been listening to React Native Radio, talking about it a little bit.
Jamon Holmgren:
And then he said, you know though, I saw that one come up, the we react to news thing and I'm like, man, I get enough news and politics elsewhere. I don't want to hear the hosts of React Native Radio telling me about it. That's why I'm like-
Robin Heinze:
I think maybe we need to clarify.
Jamon Holmgren:
I think we need a different name for that. It's not-
Robin Heinze:
Not that kind of news.
Jamon Holmgren:
... World news.
Robin Heinze:
React Native news.
Jamon Holmgren:
React Native news, yes. We're not going to get into politics and events and whatnot. Anyway, I thought that was a funny little interaction there.
Robin Heinze:
Yeah, right Well, we'll have to come up with a new title.
Jamon Holmgren:
I mean, I don't know how much more relevant it will be to him.
Robin Heinze:
We'll take suggestion. If you have suggestions, hit us up on Twitter.
Jamon Holmgren:
That's true, yeah. At React Native RDIO is the handle. Oh, I guess I should do intros. I'm Jamon Holmgren. I'm your friendly host, CTO of Infinite Red. I don't know, do I need to introduce myself more? I guess maybe some people, this is their first time listening, but that's okay. I'll move right along.
Jamon Holmgren:
I am joined by my dazzling co-hosts Robin and Mazen. Robin is a senior software engineer located in Portland, Oregon, works at Infinite Red, specializes in React Native. How's it going Robin?
Robin Heinze:
Oh, it's going pretty good. I don't feel very dazzling. What is this? Dancing With the Stars? Should I be in a sequin gown?
Jamon Holmgren:
Okay, we better not go that direction because I'm horrible at dancing.
Robin Heinze:
I'm also, for the record, a million months pregnant. So probably wouldn't want to wear a sequin gown and also don't feel very dazzling.
Jamon Holmgren:
This could be your last one for a while.
Robin Heinze:
It could be. It could be my last show.
Jamon Holmgren:
For a while.
Robin Heinze:
For a while, yeah.
Mazen Chami:
You can make a guest appearance.
Robin Heinze:
Not forever.
Jamon Holmgren:
Not forever. We'll miss you when you're gone Robin. And also we have Mazen Chami who is... I've been calling you a guest co-host but at this point we might as well just induct you in and say you're a co-host. Mazen lives in Durham, North Carolina. He's a former pro soccer player and coach and is a... Actually you're coaching, well not pro soccer right now, but you're coaching right now, right?
Mazen Chami:
Correct, yeah. I have under 13 girls youth soccer team here in North Carolina.
Robin Heinze:
They get paid with ice cream?
Mazen Chami:
Yeah.
Jamon Holmgren:
Yeah, orange slices?
Mazen Chami:
Yeah.
Jamon Holmgren:
Mazen is also a senior React Native engineer in his kind of spare time between soccer practice and works here at Infinite Red. This episode, by the way, speaking of Infinite Red is sponsored by... And don't skip forward. I know some of you do this. I can see it on the statistics that some of you're skipping through this and you're not supposed to skip through this.
Jamon Holmgren:
In fact, I'm going to bring this up later when you least expect it and you can't skip it. This episode is sponsored by Infinite Red. Infinite Red is a premier React Native design and development agency located fully remote in the US and Canada. And if I had a huge giveaway, like $1 million, I would put it right here so that the people who actually listen to the sponsorship would have heard all about it.
Jamon Holmgren:
Now, I've lost my spot. If you're looking for React Native expertise on your next React Native project, hit us up. You can learn more on our website, infinite.red/reactnative. And don't forget to mention that you heard about us through the React Native Radio Podcast.
Robin Heinze:
We have a party every time.
Jamon Holmgren:
We do.
Robin Heinze:
Every time someone says they heard about us on the podcast, we have a party.
Jamon Holmgren:
You should see all the slack reactions, it's awesome. And also imagine working with this dazzling team, who wouldn't want to work with Robin and Mazen? I mean, you have to work with me, but that's more than enough to offset. If you are a senior level React Native engineer located in the US or Canada, go to careers.infinite.red. Okay, let's get into our topic for today and welcome back all of you who skipped the previous 30 seconds.
Mazen Chami:
You may have missed something. So probably go back.
Robin Heinze:
You never know.
Jamon Holmgren:
So this is the React Native EU 2021 Roundup and React Native EU was completely online this year, just as it was last year. It was put on by our friends over at Call Stack. Call Stack did amazing job. I mean, I'm not normally a big fan of online conferences, to be honest. There's a reason why we didn't do it with chain react. We just didn't feel like we could kind of have that chain react feel. But as far as online conferences go, our-
Robin Heinze:
This one was very good.
Jamon Holmgren:
They did a great job. The graphics that they did, the intros, all kinds of cool stuff around this, Call Stack really killed it. So big kudos out to Mike and Anna and the crew over there at Call Stack for React Native EU. We watched all the talks by the way so you don't have to, but we're not going to cover every talk. So if you want an exhaustive coverage, you're going to have to go back and review all the footage.
Robin Heinze:
We'll make sure to put the links to the full conference in the show notes.
Jamon Holmgren:
Yeah, you'll be able to check all that out. I'm sure they're coming out on YouTube, maybe edited down whatnot. But we have put together some highlights. We even have sound bites. We are getting professional here. We have some sound bites.
Robin Heinze:
Wow, Jamon learned how to use loop back just for this.
Jamon Holmgren:
All right, let's start with day one. Mark from Expo, and by the way, I wanted to say his last name. I think it's Mark Ralsavi. I could totally have butchered that. The problem was Mike from Call Stack, just said Mark from Expo. And then when mark started, he just said, hi, I'm Mark. So I don't know how to say his last name.
Robin Heinze:
Apologies to Mark if you Jamon just butchered it.
Jamon Holmgren:
Yeah, Marc Rousavy from Expo. So Mark was talking about JSI. His talk was how JSI powers the most advanced camera library. JSI essentially is like a replacement for the bridge. You could actually call directly into native code from JavaScript. I've been doing by the way, a little pitch, I've been doing some Twitch streaming lately, twitch.tv/jamonholmgren.
Jamon Holmgren:
React Native live is what I'm calling the series. And I'll probably go into JSI at some point and start hacking on some stuff. But let's actually listen to the first sound bite here.
Marc Rousavy:
So that's why the React Native bridge was invented. It provided a [inaudible 00:07:56] to send messages between JavaScript. If you wanted to find out the IP address, you have to send a message, like get IP address to the native word. The native word receives the message, finds out the actual IP address and then sends back another message with the IP address in it. JavaScript receives the message.
Mark Ralsavi:
And now JavaScript is the value which contains the IP address, which is a strength. This is of course not an ideal solution since the original chooses a batching system. And the message is not immediately sent, but rather batched with other messages. At some later point in time, all of the messages are sent to native. Also there's a lot of serialization going on here, which is done in adjacent format.
Mark Ralsavi:
So you cannot send a number to the native function. It has to be converted to a string JSI first. As you can imagine, that's really slow. Okay, so what's the solution? Well, since our JavaScript ground times, JavaScript core, Hermes, V8 are written C or C++, some very smart people have invent a C++ API called JSI. JSI is an abstraction layer over virtually any JavaScript runtime.
Mark Ralsavi:
It works the same for JavaScript core for Hermes, for V8, and any other runtime that might implement JSI. So if you know objects that run into programming, you can think of it like an interface, which is exactly what it is. It's functions defined, which [inaudible 00:09:11]
Jamon Holmgren:
Okay, so sorry about that. It's a little bit longer of a sound bite. Most of ours are shorter, but I thought that it was important to include the whole thing. And Mark kind of talks about the bridge to start with and sort of its limitations there as well as what's the solution, which is JSI.
Jamon Holmgren:
Let's talk directly between JavaScript and the native layer Java or objective C. He went into quite a bit of detail and he actually showed how to do this, which I thought was pretty interesting. It was hard to follow though. I mean, definitely very technical.
Robin Heinze:
This is as advanced as it gets for React Native. This is the core of how React Native works.
Jamon Holmgren:
Right, exactly.
Robin Heinze:
Most people don't even have to think about this kind of stuff.
Mazen Chami:
Yeah, most people who don't go into native code will never have to think about this, but it's also nice to see how it works to kind of know and understand what's actually happening in the background. So it's like the backend for front end sort of thing.
Jamon Holmgren:
Yeah, the backend for front end.
Robin Heinze:
I like being aware of it.
Jamon Holmgren:
Yeah, and I have a note here. We were taking notes as we went through this and I have a note that says, it's cool that it's possible, but it really needs some sort of DSL or sugar. I'm not afraid of native code necessarily. I'm happy to dive into it and stuff. But at a certain point when you're wiring up many, many lines of code just to have a simple ad from function, which is kind of what he did, you're sort of like, well, is there an easier way? Is there a way that we can-
Robin Heinze:
That was my first thought. I was like, that's a lot of code for an ad function, wow.
Jamon Holmgren:
Yeah, and it was C++ too, which adds another language you need to learn. And C++ has a vast surface area. So I've been around C++. It was actually the second language I ever learned.
Robin Heinze:
In fact, I took a C++ class in college and I still have the textbook and it's like two inches thick.
Jamon Holmgren:
And despite that you became a programmer.
Robin Heinze:
Yeah.
Mazen Chami:
C++ was the first language I learned too in college. I started off engineering and that was the first language, and then eventually switched in Java.
Robin Heinze:
We mostly wrote like leaper programs.
Jamon Holmgren:
Oh, I tried to do that in Java script on Twitter the other day while laying in bed. Just on a tweet, do a leaper function. It was such a disaster. I deleted the whole thread and then pretending it never happened.
Robin Heinze:
I didn't know you deleted it. I remember when you did that.
Jamon Holmgren:
I deleted it. It was so embarrassingly bad. I mean, the code looked cool, but it didn't work. So whatever, the best code is, no code. After Mark's talk, Joshua Gross then talked. I think he works for Facebook. And his talk was the new React Native bringing the fabric renderer to the Facebook app. I think the biggest takeaway from this was how hard it's been, right?
Mazen Chami:
Yeah.
Robin Heinze:
Yeah. I mean, for me, A, one of the takeaways is that the Facebook app is enormous and it's very complex and large. But the other takeaway that I thought was really helpful was that he said their initial estimate was like six months for doing the whole app. And then it took them something like three years.
Jamon Holmgren:
Sounds about right.
Robin Heinze:
So like 5X estimate growth. So don't feel if your estimates are wrong sometimes because...
Jamon Holmgren:
Oh, man, estimates are-
Robin Heinze:
It happens at Facebook.
Jamon Holmgren:
We should do an episode on estimating sometime.
Robin Heinze:
Oh yeah, we definitely should.
Jamon Holmgren:
I estimate we'll do that in the next month or two. Also one interesting that came out of that was that most apps won't have to do any work to upgrade to fabric, right? It's kind under the hood.
Robin Heinze:
Yeah, I think part of it is because they worked out a lot of the kinks doing this whole process at Facebook and part of it's because the average app will not have anything complex enough that the renderer change will require anything for you to do. So don't stress too much about it.
Jamon Holmgren:
Yeah. And for those of you who don't know what fabric is and kind of what the benefits bring, we're going to do episodes on it once it starts coming out.
Robin Heinze:
Definitely.
Jamon Holmgren:
I mean, episodes, it's not just going to be one. We're going to be deep diving a little more. This is something that's very interesting to me, and it's something I want to cover were more in depth, but.
Robin Heinze:
Well, and the fabric render and JSI mentioned in Mark's talk, they're all sort of part of this new React Native architecture, right? Which has a bunch of different components that hasn't been rolled out yet, but will be soon.
Jamon Holmgren:
Turbo modules, all that. After that talk, Khalef Hosany gave a talk on unlocking the next generation of desktop apps with React Native, which that's something that's kind of near and dear to our heart. I guess, sort of if there's a technical slogan for 2021 for Infinite Red, it's been React Native all platforms. And so this is very interesting topic for us
Robin Heinze:
Yeah. Is React Natives supposed to replace electron for super easy desktop apps now?
Jamon Holmgren:
I think it's literally replacing in some cases.
Mazen Chami:
Yeah, that was part of his demo. He showed two different companies out there that are using React Native for windows and Mac OS and creating specific apps. One of them was Nomadics, which is a, a digital online learning tool, fully built in React Native. And with the pandemic and everyone going online, that's a great example of it.
Mazen Chami:
They had smart label and smart paper, which were their two things where you can sketch and a teacher can kind of see your process as you were doing the math equation or something like that. And also some major banks in the UAE are using React Native for their platform, which is pretty cool.
Jamon Holmgren:
Yeah, and I know that Facebook messenger is being rewritten in React Native for desktop. I'm talking the desktop app. And I believe it's electron right now. So that is sort of a switcharo. Maybe eventually we'll rewrite React to Tron in React Native for desktop. That'd be really cool.
Robin Heinze:
Yeah, that would be really meta. That would be very appropriate. I personally think this is a great direction that things are heading in. I'm always really excited when my favorite mobile app has a desktop version. Especially if it's something I use at work, because I'd much rather have a desktop app open in the background on my laptop than have to run something on my phone simultaneously. I'm talking to you Pandora.
Jamon Holmgren:
I use Pandora too. It seems to be like the old person-
Robin Heinze:
No one uses it anymore. Everyone's on Spotify. Spotify is great, but there was something about the Pandora algorithm that just had my music taste just dialed in.
Jamon Holmgren:
That's what it is for me too. I try other ones. I do like YouTube Music and I try some others and I always end up going back. I don't know why.
Robin Heinze:
But year, if Pandora could make a React Native desktop app, hey, maybe we can build it for you. Pandora, if you're listening.
Jamon Holmgren:
Robin, when she's back from maternity leave will-
Robin Heinze:
I want to build your React Native desktop app.
Jamon Holmgren:
Well, lead your project. By the way, that is a huge... if I was Pandora, I'd be like, yeah, I'm taking you up on that. All right, so Satyajit Sahoo who works for Call Stack, did a talk on React navigation six called react navigation six, fresh from the oven.
Jamon Holmgren:
And I guess essentially react navigation six is mostly building on the react navigation five API. It's not a complete overhaul like four to five was. Wasn't it four to five that was a giant change? I think so.
Robin Heinze:
Yeah, I think so.
Jamon Holmgren:
They also announced react navigation elements, which is a component library that contains the UI elements and helpers used in react navigation, which is mostly useful if you're building your own navigator or want to reuse some of the default functionality in your own app.
Mazen Chami:
One to thing he also mentioned was with six it's basically built upon five, but also you can mix and match what functions you use. So if you have some specific functions that are specific to five, you can still use them in six, which I think is pretty good. So you can kind of take your time as you're refactoring the app and get it up to speed with six, which is pretty cool. And I don't think a lot of packages are that backward compatible.
Robin Heinze:
Yeah. Well, it takes a lot of work on the part of the package maintainers to have that kind of inclusive upgrade path, but with the number of users using react navigation, I think it's a really good thing.
Jamon Holmgren:
Yeah, sort of the blessing and curse of having a popular, open source library.
Robin Heinze:
It's almost become the navigation library and it has the blessing of a lot of core React Native maintainers.
Jamon Holmgren:
We use it.
Robin Heinze:
And Expo, which is Expo is so integrated with React Native core at this point that they have a lot of muscle behind maintaining it.
Jamon Holmgren:
And they've really done a great job continuing to push it forward. They put a lot of work into it and we all appreciate it. It's pretty awesome.
Robin Heinze:
It really feels like they listen to feedback, the things that people are complaining about, which it can be hard as an maintainer to hear people complain about your library. But they really take it into consideration, and there's been... It's a completely different library and it's so nice to use now.
Jamon Holmgren:
We have a sound bite. So this is sound bite two. I'm going to play it here.
Satyajit Sahoo:
They did not read the documentation, even if it was mentioned.
Jamon Holmgren:
Okay, this one was a lot shorter.
Robin Heinze:
Yeah, I noticed-
Jamon Holmgren:
They did not read the documentation.
Robin Heinze:
Yeah, some frustration there at people who complain about something not working, even though it's spelled out in the documentation. So they just added a little bit more sugar on top, a little bit more of all in one solution. So it's a little bit easier. I enjoyed that little bit of shade.
Jamon Holmgren:
Yeah, that's funny.
Mazen Chami:
So read the documentation people.
Robin Heinze:
Read the documentation.
Jamon Holmgren:
Honestly, if you go read the documentation all of it, and then come back to your team, you're going to look like the expert in the whole team because nobody else has. So you're going to be the one who knows everything about it. But it is really cool to see all the stuff that they've added, more flexibility, tab bar style. Styles can be per screen. What else?
Robin Heinze:
I really liked the navigator. Oh, not navigator, stack.group, which is purely for organization and sharing of configuration. But I always love anything that makes my code more organized.
Mazen Chami:
They did some type script improvements. Everyone's doing that these days, which is great and helps you as you're coding to auto fill. And by default now underneath the hood, it's using React Native screens. And I believe-
Jamon Holmgren:
The native.
Mazen Chami:
Yeah. But Jim, you brought that up in the favorite packages, if I'm not mistaken.
Jamon Holmgren:
Yeah, I love that one. It's great. It's so cool that you can actually have native navigation powering something that is controlled by React Native.
Mazen Chami:
Yeah. The project Robin and I are on, we use react navigation five. And it's been great. I haven't had any issues with it. So I only imagine the improvements that they're talking about in six, how much better that would be.
Jamon Holmgren:
And there's type script improvements as well. Type script of course, is eating the JavaScript world right now. Then our good buddy Sanket Sahu from Geeky Ants in India, he gave a really good talk, building accessibility hooks for React Native and web. I really liked this talk. Sanket did an amazing job.
Jamon Holmgren:
So I would recommend that everybody go watch this one, for sure. I mean, you can watch all of the ones we talk about for sure. But this one stood out to me. Accessibility is one of those things that I think in the past, and I tweeted about this or maybe I just slacked about it, but in the past it felt like a lot of accessibility talks were sort of saying, you need to be doing this.
Jamon Holmgren:
You should be thinking about this. You're bad if you don't do this, stuff like that. And it felt like with Sankit, he just was like, hey, here's how to do it and it's not that hard. Here's some practical advice.
Robin Heinze:
I really how specific he was about like, okay, here are the things, if you're trying to make your app accessible, here are the things you need to think about. And it's not just like screen readers, which is what a lot of people think about when they think of accessibility. But it's like, it's screen readers.
Robin Heinze:
It's contrast rations. Its responsiveness, which is one that a lot of people don't think about for accessibility. But if you turn your tech size up in order to be able to see it, you need your app to be responsive. And being able to navigate websites with the keyboard instead of the mouse. Yeah, I found that really helpful.
Mazen Chami:
I think a lot of devs think this is hard to do, but Sanket did a good job of just showing you can start very simple by just putting in your aria dash star, whatever it is, disabled or label. And it pretty much does most of the things for you that Robin just mentioned. And it's not that much overhead to do. If you have your custom components, you just add your aria labels to that, and essentially translates across the board.
Robin Heinze:
And he was specifically talking about React Aria and Geeky Ant's package, React Native Aria for accessibility, which is a third party solution. There are accessibility props that come with React Native by default too.
Jamon Holmgren:
Their package supports, React Native web, which is great as well. Sankit also had a really cool moment where he showed the screen reader working. So I'm going to play a soundbite about that.
Sanket Sahu:
And the same thing works for screen readers on different platforms. So this is an example of Android. Let's see that. I hope you can hear it.
Screen Reader:
Tapped, new options menu button, pop up window, menu item ariel, menu item to home disabled, menu item Roboto.
Jamon Holmgren:
I think that is really cool because you can hear how the screen reader is working. Obviously it was reading off the menu items that he was tapping on, but also it told him that one was disabled. It told him what it was and then it told him this is disabled. You can't click it, which is really cool. I thought some of those moments in his talk were pretty neat.
Robin Heinze:
Yeah, and I think we're probably going to have an accessibility episode in the next little bit. So we'll come back to this topic and go into it a little more on in depth because it's really important and really cool.
Jamon Holmgren:
Biggest question is how do we work around your maternity leave Robin?
Robin Heinze:
I might have to miss that one.
Jamon Holmgren:
You'd have to sneak it in or we do it afterward. I don't know.
Robin Heinze:
Or maybe there'll be a baby cohost. We'll see.
Jamon Holmgren:
We'll have some sound bites from the baby. Then Milica Aleksic gave a talk, react developers in a wild world of native apps. So this is something that I think a lot people coming to React Native will identify with. She was a React JS web developer and came into React Native.
Jamon Holmgren:
And we even did an episode recently with John Major where we talked about that transition, which was good. We have a sound bite from her talk. So I'll go ahead and roll the tape on that. Tape, that sounds really old, but...
Robin Heinze:
What is this? The 80s?
Jamon Holmgren:
The 80s, yeah.
Milica Aleksic:
JS library, and that is style components. Style components allows you to write an actual CSS code style components. And benefits of using style components are that you will have CSS [inaudible 00:25:05]. You can dynamic styling, you can use teaming.
Milica Aleksic:
And with style components, you can also support more complex styles like transform, which is really great. So if you're familiar with style components and if you used it on the web before, my advice is to go for it.
Robin Heinze:
That clip stood out to me because as we've talked with web programmers moving to React Native, one of the biggest changes is building the UI and how diff... I mean, because otherwise it's React, but then the UI layer is what's different.
Robin Heinze:
And so not having CSS can be kind of jarring. So style components is a really, really great option. If you've used it on the web, you can use it on React Native as well and still use CSS, which can really help ease the transition, I think.
Jamon Holmgren:
Yeah, I think that's a big thing. Being able to draw parallels between, and kind of like have analogs basically between the thing you know versus the thing that you're learning is always a really helpful thing when you're transitioning into a new technology.
Jamon Holmgren:
So for me, when I learned native code, I initially learned it using Ruby Motion, which allowed me to use Ruby stuff that I knew to learn Coco touch APIs on iOS. And then later learning objective C was just learning the syntax. I already knew the APIs.
Jamon Holmgren:
So it gave me kind of like analogs to kind of move into easier. With React JS, to react Native, there's stuff like this. And Milica did a good job of kind of presenting that.
Mazen Chami:
I think the React Native ecosystem or React ecosystem in general is really doing a good job of letting developers work in both environments very easily. We won't go into the div that Jamon likes so much and get to views and stuff like that. Other than that piece, I think they do a good job and there's a lot of different packages similar to this one that make it real easy to kind of flip back and forth and have engineers and developers be in both environments.
Jamon Holmgren:
So we're getting toward the end of day one. Jon Samp gave a talk, how to iterate on your app faster with Expo. I actually ended up missing this talk, but I know that both of you said that it was a really good talk and I'm going to go back and re-watch it, or watch it for the first time later. But what did you find cool about this one?
Robin Heinze:
This was just a really, really great overview of the entire Expo ecosystem and how powerful it is now and how much they've grown and how it really is the default way to build React Native apps now. He focused on iteration. Expo has really, really integrated over the air updates now, which can help make changes faster and get them out to your users.
Jamon Holmgren:
I feel like that sort of fast feedback loop and whatnot is just so valuable for developers. Whenever you have this long rebuild cycle, it's never fun. We do have a sound bite on this one. So I'm going to go ahead and roll the eight track on this.
Jon Samp:
One awesome change that we've come up with this year with EAS is that you can build an app with any native code. You can add native modules like Bluetooth, or you can also add in-app purchases or things like a blur hash module that will allow you to add in a native module that blurs out your images as placeholders. There's tons of these. You can add codes like this and we will still build your app for you, and that is now possible.
Jamon Holmgren:
That's awesome. Yeah, native code with Expo, how long have we been saying that the reason we can't use Expo because we can't integrate custom native code? But that's no longer going to be the case. And I think we talked about this a little bit with...
Robin Heinze:
Brent.
Jamon Holmgren:
When we were kind of going over what's latest with Expo in a previous episode of React Native Radio.
Mazen Chami:
Now you don't have an excuse to eject from Expo essentially.
Robin Heinze:
Well, literally, while I was watching this talk, we had slack threads going at Infinite Red, just chatting about the talks as they were happening. And I said, wow, we really just don't have any good reasons not to be using Expo for all of our projects now. It's come so far.
Jamon Holmgren:
Yeah, I really do feel like we should be probably starting with Expo, and obviously if we run into something that's just untenable, then we can certainly move away from it. But Ignite supports Expo for this reason because we see it coming. And I've said since I think probably 2017-ish, that Expo to me is the future of where React Native is going.
Jamon Holmgren:
And we're seeing that happen before our eyes, which is awesome. So that does it for day one. We're going to move into day two. We're probably not going to cover quite as many of day two's talks unfortunately. I wish we had more time, but we're already pretty deep into the podcast. So let's move along.
Jamon Holmgren:
Paweł Trysła talked about code splitting in React Native. Code splitting is kind of a web concept generally. Obviously, like the tooling in React Native is mostly built around having one big bundle, but sometimes it can be advantageous to split your code into multiple bundles. And so he talked about that.
Robin Heinze:
I enjoyed this talk mostly, because I didn't really know what code splitting was before and now I feel like I know a little bit better.
Jamon Holmgren:
Because you were a back end developer before you moved to React Native, so you never really had that front end experience.
Robin Heinze:
Yes, I never really did front end web, so yeah, I didn't really have that experience. So, yeah, this was really interesting about why you might want to code split and how Webpac is the ultimate code splitter.
Jamon Holmgren:
Did he talk about how Hermes will affect this? Because Hermes does some kind of on demand loading stuff with its bike code.
Mazen Chami:
I don't remember. I do remember him saying something about Hermes, but... Yeah.
Jamon Holmgren:
Maybe we'll have to have him on and talk about some of the stuff, but they have a solution there at Call Stack called Repack and I've watched some of their YouTube videos about it. It's based on Webpac.
Robin Heinze:
Yeah, it's basically Webpac for React Native.
Jamon Holmgren:
Yeah, exactly. And the only thing that is a little, I'm not sure about with Repack is that it sort of brings Webpac's sort of like it's power, but also it's complexity. And I think they even say that. If you don't need this, it's fine to use Metro.
Robin Heinze:
Yeah, he definitely acknowledged that Webpac is high power, high burden of entry. The configuration options for Webpac are extremely numerous and powerful and you can do pretty much anything you need to do, but it's very hard to understand sometimes. Use Metro for most of your use cases.
Jamon Holmgren:
Exactly. So there are a couple of animation talks one by Grant Sander and one by Alexander Kuttig. So we'll talk about those both kind of... They were back to back right after each other. Both were very good. And actually I'm going to play the sound bite first which is the only sound bite we have from day two. Going to rotate the record here.
Alexander Kuttig:
When working with animations, at least when we work with animations in our company, for us there are three ways to deal with animations. First one is the internal React Native animated API which does a good job for simple animations. And we like to work with it a lot. Second one is the great Lottie Framework.
Alexander Kuttig:
There are SDKs for native integration, but also React Native Lottie SDK. So it's very simple to use and I like it a lot. So if you have never heard of it you will be really surprised how easy it is to integrate animations, smooth animations running at 60 FPS in React Native and third of all it's the awesome reanimated framework, which recently was released in a second version. I love to work with it.
Alexander Kuttig:
If you have never worked it, you should definitely have a look at it. I think I read in a block post lately it's the gold standard of animation and I couldn't agree more. It's really awesome.
Jamon Holmgren:
So in this clip, he's essentially kind of contrasting the three options. One of which is built right into React Native, that's the animated library built into React Native and then talking about Lottie and an Reanimated 2.
Jamon Holmgren:
Those are kind of the three main animation libraries and they all kind of have different... There's some overlap for sure, but they have different purposes. And I would say generally speaking, you wouldn't use the built-in animated and Reanimated 2. You would choose one or the other, but you certainly could use Lottie and one of the other two.
Mazen Chami:
Yeah, absolutely. And lottiefiles.com has a lot of different animations that are there. I think some are open source and some you have to pay, but it's very cheap if I'm not mistaken. And you can make your app a little more user friendly, I guess is the word to say.
Mazen Chami:
So instead of loading usual loading indicator, you can have something pretty fancy and without a high burden, essentially. It's super complex to set it up, I believe, but not more than any other library out there that requires linking.
Jamon Holmgren:
I should mention that that sound clip was Alexander there, but obvious say Grant also talked about this and he went into depth more with reanimated too, right?
Robin Heinze:
Yes.
Mazen Chami:
If you didn't listen to Grant's talk, I recommend it. It was very helpful to see reanimated power, I guess is the word here. I've used React Native's animated that comes with it already in addition to Lottie. But I feel like seeing all the different hooks and capabilities of Reanimated 2 makes me want to transition everything that I've done in animated to Reanimated 2, because it makes it so much easier.
Mazen Chami:
The one that stuck out to me was use animated scroll handler. A lot of times we're using some complex functions to handle scrolling, but Reanimated does a really good job of having that pretty much done for you.
Robin Heinze:
I love how many libraries are utilizing hooks and how there's so much complex stuff being boiled down to use something, something, something, and it just works.
Jamon Holmgren:
We're doing an SDK for a big company that we can't currently, but we'll be able to in the future, mention, and we are building a React Native SDK for them and we are shipping it with... The normal way to do some listeners and stuff like that is sort of your normal way of adding event listeners and stuff in JavaScript.
Jamon Holmgren:
But we are shipping it with some hooks alternatives as well. So you can just use blank, blank thing and it just works. It pulls it right in and does a use effect and sets up the dependencies and everything. So yeah, I'm a big fan of... But yeah, these animation one are very cool. At some point we may want to look at bringing reanimated two into ignite and show some examples maybe in one of the demo screens of how to use it and just have it as part of our default stack.
Jamon Holmgren:
I guess that's something that as we get more projects that we've used with reanimated two, and more know, familiar and comfortable with it, we can make that decision. Also have to kind of look at sort of the cost that it brings in terms of bundle size and whatnot. But just two more talks to talk about.
Jamon Holmgren:
One was Thor Schaeff, and he talked about, show me the money, securely accepting payments in React Native apps. And this was from Stripe. Stripe just released Stripe React Native. And so I think we got some good reviews on this talk as well. It was very interesting.
Mazen Chami:
I really enjoyed it. I've used Stripe on the web before and their components were really nice and they're animated too. And they brought that into React Native and it's just like you would use it in web and secure, for those people that are thinking about security. It's PCI compliant, and I forget what the European compliance is. It's also compliant with that.
Robin Heinze:
Yeah, he made it clear that the reason you want to use the Stripe SDK as opposed to just connecting to Stripe APIs directly is because the SDK ensures PCI compliance and make sure all that's taken care of for you. So yeah, this is a way to get those Stripe SDKs into your React Native app.
Jamon Holmgren:
And it looks like Expo also supports it since their SDK 42, which is awesome.
Robin Heinze:
Does Stripe support Stripe Connect?
Jamon Holmgren:
It does. I actually went and looked into that because Stripe Connect was something we had to do some kind of janky workarounds with webs and stuff before, but now totally supportive.
Robin Heinze:
Now the two factors that made us have to do that are now fixed, because that was because we were using Expo.
Jamon Holmgren:
That's true, yeah. Because we were using Expo we couldn't use their normalized like IOS and Android SDK. So very good news over there. Last talk that we're going to about is Lars Thorup. And that talk was about sub-second integration test for React Native app in Bluetooth device.
Jamon Holmgren:
And I specifically wanted to kind of bring this one up because I know Mazen has had a lot of Bluetooth experience. So he talked a lot about react-native-ble-plx.. Mazen, you've used that before, right?
Mazen Chami:
Yes, it's actually also in production in a app that I did. He kind of goes through all the testing of it. I did the testing part and it worked great. My main part of this was Chain React 2019. I attended that. And one of my main purposes being there was to kind of connect with Vlad who was giving a talk about this package.
Mazen Chami:
And afterwards I kind of spoke to him and he showed me what was going on with react-native-ble-plx. And on my flight back home, I ended up rewriting the app using this library and kind of by the time I got home, it was all done and set and ended up releasing that to the store.
Mazen Chami:
I didn't do the testing part on the flight, but I got the major functionality down. Then I did the testing part and it worked out great. It's in production and it's communicating via Bluetooth to the device and yeah, it was a great experience. Their documentation too is very good.
Jamon Holmgren:
Yeah, that's awesome. I think we may have some Bluetooth stuff coming up at some Infinite Red internal projects. So when that happens, I'll definitely be picking your brain Mazen or putting you on the project, I guess, depending on how this goes. Very cool. Well, it was a great conference. Lot of really good information packed in.
Jamon Holmgren:
Like I said, our friends over at Call Stack did a great job with this. So nice job Mike and Anna and the rest. This of course will be published probably in a couple weeks afterwards. So hopefully all of the talks will have been kind of edited and pushed out. If not, they do have the live streams that you can kind of skip through and listen to the talks there and yeah, very cool.
Jamon Holmgren:
I really obviously wish that we could do in-person conferences. I went to React Native 2019, which was the last in-person one and it was awesome. Loved it, it was a lot of fun. Hopefully it'll be back next year. And of course, Chain React, our conference, will hopefully be back next year as well. We'll see.
Robin Heinze:
Yeah, during the conference breaks, they showed some of the ads or the promo trailer things for React Native EU 2019. And it made me really sad. Like, oh, that's what it used to be like. That was fun. So next year.
Jamon Holmgren:
Did any one of those have a picture of me in it? Someone caught it. I think Mazen got a screenshot.
Mazen Chami:
Yes, in the agenda.
Jamon Holmgren:
I was there. I can prove it.
Robin Heinze:
So, yeah, we're excited to get back to them next year.
Jamon Holmgren:
You can find us on Twitter at React Native RDIO. You can find Robin at Robin_heinze with an E. You can find Mazen at Mazen Chami and me at Jamon Holmgren. Thank you both for all of your... That was actually quite a bit of work to bring all these notes in and help me cut these sound bites and stuff. Maybe we should do those sound bites more often.
Jamon Holmgren:
It's fun. And of course as always thanks to our producer and editor, Todd Werth, our assistant editor and episode release coordinator, Jed Bartausky, our social media coordinator, Missy Warren, and our designer, Justin Huskey. Thanks to our sponsor Infinite Red. Check us out infinite.red/reactnative.
Jamon Holmgren:
Special thanks to all of you listening today. Make sure to subscribe, send this episode to a friend and all those things. Reminder, we are hiring React Native engineers. Go to careers.infinite.red, and we'll see you all next time.
Robin Heinze:
Bye.