React Native Radio

RNR 202 - React.js to React Native

Episode Summary

What’s it like to go from React.js to React Native development? Jon Major Condon joins Jamon and Robin to talk about the transition from React for web to React for native.

Episode Notes

What’s it like to go from React.js to React Native development? Jon Major Condon joins Jamon and Robin to talk about the transition from React for web to React for native.

 

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.

Helpful Links:

  1. RNR 182: React Native on the Web with Simon Sturmer 
  2. Boiling React Down to a Few Lines of jQuery
  3. Tweet about React Native Stripe Beta Release

Connect With Us!

  1. React Native Radio: @ReactNativeRdio
  2. Jamon - @jamonholmgren
  3. Jon Major - @jonmajorc
  4. Robin - @robin_heinze

Episode Transcription

Todd Werth:
Welcome back to React Native Radio podcast brought to you by Internet Memes, the best way to make fun of your boss. Episode 202 React JS to React Native. 

Jamon Holmgren:
Hey, React Native Radio friends. Welcome back. This is the React Native Radio podcast. I'm Jamon Holmgren, your host, and I'm joined today by two adventurous co-hosts. Robin is with me, and also today we're joined by a guest host, Jon Major Condon. I will intro Jon Major in a bit, uh, but Robin, I, I just got a chance to listen to episode 198, where you were the primary host and you interviewed Gant about machine learning. I, I kinda feel like you should be the one doing this intro right now.

Robin Heinze:
I'm gonna go ahead and say no, thanks. 

Jamon Holmgren:
You did a great job though. 

Jamon Holmgren:
Like I, I'm, I was like, I think I'm out of a job when I, uh, when I heard that one.

Jamon Holmgren:
That was, that was really good. I, I, I was very impressed. So great job with that. And I'm sure it was all from like, just right from the hip, right? 

Robin Heinze:
Totally live.

Robin Heinze:
Didn't have any, any notes or anything. 

Jamon Holmgren:
Yes, totally 100% extemporaneous, uh, you, you never, you never, uh,-

Robin Heinze:
That's-

Jamon Holmgren:
... have to take notes.

Robin Heinze:
... that totally matches my personality

Jamon Holmgren:
Uh, Robin of course, is a senior software engineer located near Portland, Oregon at Infinite Red, specializes in React Native as well. And our guest host today is Jon Major Condon. Jon is, Jon major is a senior software engineer located in Southern Wisconsin. And you'll be able to tell that by his thick Wisconsin accent, right?

Jon Major Condon:
Wisconsin

Jon Major Condon:
Wisconsin.

Robin Heinze:
Wisconsin. 

Jamon Holmgren:
I honestly can't, I don't know if I've ever noticed anything, but you know what, I'm actually around a lot of people from the Midwest. 

Jon Major Condon:
Mm-hmm.

Jamon Holmgren:
There's a lot of people in kind of the Pacific Northwest that, that came from, from the Midwest. So maybe I just, it's just kind of steeped around me.

Jon Major Condon:
So well, supposedly I, I had an accent back in the day 'cause I was from Indiana.

Jamon Holmgren:
Hmm.

Jon Major Condon:
But I wasn't raised there, I was born there. My parents had the accent, so yeah.

Robin Heinze:
Oh.

Jamon Holmgren:
Is that right? Okay. 

Jon Major Condon:
Yeah. Yeah. 

Robin Heinze:
SO you had an accent according to people from Wisconsin.

Jon Major Condon:
Yes. Yup. 

Robin Heinze:
Okay.

Jamon Holmgren:
Well, there's a little bit of that happens kind of in my world because I'm Finnish American and there's a lot of sort of Finnish Americanisms that slip into-

Jon Major Condon:
Mm-hmm.

Robin Heinze:
Interesting.

Jamon Holmgren:
My-

Robin Heinze:
Now I wanna know what they are. 'Cause you just sound like Jamon to me.

Jamon Holmgren:
Well, you know, I mean like the most obvious one is, is everybody says sauna incorrectly. Everybody says sauna. And-

Jon Major Condon:
Wait wait-

Jamon Holmgren:
... like, it's not-

Jon Major Condon:
... for real? 

Jamon Holmgren:
Yeah, for real. So like there's one Finnish word that everybody in the world knows and they all pronounce it wrong. Like you go to, uh, to, to Finland, they're gonna say sauna.

Jon Major Condon:
Sauna.

Jamon Holmgren:
That's, that's a, that's a like the Finnish way to say sauna. 'Cause actually kind of like a-

Robin Heinze:
All I think, all I think about-

Jamon Holmgren:
... 'u' in there.

Robin Heinze:
... all I can think about is the, is the scene from Frozen. Where she, she comes up to the trading post. She's like, ooh, trading posts and sauna. 

Jamon Holmgren:
Hey, you know what? 

Jon Major Condon:
Mm-hm.

Jamon Holmgren:
I'm also half Norwegian. And the fact that they included lutefisk-

Robin Heinze:
Right?

Jamon Holmgren:
in Frozen?

Robin Heinze:
For good feelings.

Jamon Holmgren:
Forgives anything that they, anything else they do. I mean, I, I, I kid you not, we have, lutefisk like almost every Christmas because my dad buys it and forces us to eat it. 

Robin Heinze:
Does it really give you good feelings? 

Jamon Holmgren:
Well, I mean, depends like if I don't have to be eating it, yes. 

Jon Major Condon:
So it's not good. 

Jamon Holmgren:
You have to try it.

Robin Heinze:
It's fermented-

Jamon Holmgren:
You'll have to try it some day.

Robin Heinze:
It's like fermented fish, right? 

Jamon Holmgren:
It's, it's cod, it's not really, I don't know if it's fermented. It's, it's cod, raw cod soaked in lye.

Robin Heinze:
Oh, it's sucked in lie. It doesn't sound very appetizing. 

Jamon Holmgren:
I mean, I don't know.

Robin Heinze:
It's a cultural thing.

Jamon Holmgren:
When you describe it that way, I guess.

Jamon Holmgren:
It was, I guess the way that they preserved fish over the winter and uh, yeah, it's expensive though. It's extremely expensive around here. So Jon major, you've never had lutefisk even though we live in, uh, in Wisconsin around a lot of Nordic people?

Jon Major Condon:
Not at all, I'm actually not a big fan of seafood. (laughs) Um, so, um, I do have a lot of friends who do love seafood and I try to steer them a different direction, always. 

Jon Major Condon:
Get me a burger. 

Jamon Holmgren:
I think you'll be even less of a fan of seafood after you've had lutefisk.

Jamon Holmgren:
But we will move on. We will move on. Uh, Jon Major did just join Infinite Red this year. Th- uh, welcome by the way, Jon Major. 

Jon Major Condon:
Thank you. 

Jamon Holmgren:
And he's also taken over the React Native Newsletter as editor in chief, so that's pretty cool. Uh, we, we had a little bit of a, uh, an opening happening there and, and, uh, so you've stepped into those shoes and you've done a great job so far. And we'll talk a little bit more about that later. Tell us a little bit about your coding background. 

Jon Major Condon:
Sure. Um, so 2013, um, actually before 2013, it was 2012. Uh, I was working at a factory and I decided that was not for me. And so I went to the library one day and I picked up a Java book thinking that I could learn it and uh it was terrible. Um, I got very discouraged 

Jon Major Condon:
And since then I went on to, uh, go to school at the University of Wisconsin-Milwaukee. And I was there from 2013 to 2015. Uh, I studied information science technology, so it's not computer science, but it is a hybrid between the two uh majors, computer science and business. Um, honestly a lot was, I'd say more business. And then there was still computer science in there. Oh, and a lot of databases. Um, so, and then 2015, I graduated, went on to start at a Kohl's Corporation as a software engineer and, and, uh, yeah, been, been, uh, at a, at a corporate and then I've been at a startup, uh, consultancy. So I've been in many different roles.

Jamon Holmgren:
Mm-hmm. So-

Robin Heinze:
Is that Kohl's, like, like the department store, Kohl's?

Jon Major Condon:
Yeah. Yup.

Robin Heinze:
Nice.

Jamon Holmgren:
So you can tell a lot about our-

Jon Major Condon:
Discounts

Jamon Holmgren:
So you can tell a lot about our interview process. The fact that I actually didn't know that Jon Major had a CS degree that's, uh, or CS-like degree until now. 

Jamon Holmgren:
We just, I don't know. It's just not something that we really think about because, uh, I guess of the three owners, only one of us has a CS degree and, or a degree at all, to be honest, and I'm not one of them. So I don't really think of it in terms of, you know, being a requirement for working at Infinite Red. So congrats on, uh, on your degree, Jon Major.

Jon Major Condon:
Thanks.

Robin Heinze:
Uh, I would just like to point out that it took Jamon four years to convince me to do anything remotely scary, like being on a podcast. And Jon Major's been here for what two months?

Jon Major Condon:
Uh, just about.

Robin Heinze:
And you're already the chief, the editor in chief of the newsletter and are on the podcast. So kudos.

Jamon Holmgren:
It's amazing what you can get people to do when you make it a condition of their employment.

Jamon Holmgren:
I'm just joking. I'm just joking.

Robin Heinze:
But not really. 

Jamon Holmgren:
I did not do that. Now, Jon has been doing a lot of cool stuff around here and, uh, hopefully we'll have you on the podcast more regularly.

Jon Major Condon:
Yeah, sure.

Jamon Holmgren:
I'd love to have, have some more help like that. So, very cool. 

Jamon Holmgren:
Um, I should mention that, uh, this episode is sponsored by Infinite Red, that big surprise. Uh, we are a premier React Native design and development agency located fully remotely in the USA and a little bit in Canada and also Wisconsin, which is uh a kind of its own little thing, right? 

Jamon Holmgren:
Uh, with years of React Native experience, uh deep roots in the React Native community, we are the hosts of Chain React, and we publish the React Native newsletter, as already mentioned, to over- how many subscribers do we have now, Jon Major? Is it, it's over 12,000, right? 

Jon Major Condon:
Yes. Um, it's over 12,000 and then just under active, I guess, readers. 

Jamon Holmgren:
Like honestly, we get an incredible amount of active readers on that, on that newsletter. We're going to talk about that in a little bit. But infinite Red is the best choice for your next React Native app. Hit us up. hello@infinite.red, email me directly Jamon@infinite.red. Do not email Robin. She will ignore your email. As she ignores mine.

Robin Heinze:
I'll just forward it to Jamon. 

Robin Heinze:
That's really just what happened. 

Jamon Holmgren:
It's true, actually. I don't think that's actually ever happened, but, uh, it will, I'm sure, at some point. You can learn more on our website, infinite.red. Don't forget to mention that you heard about us through the React Native Radio Podcast. It's very important to say that. And, uh, also we are hiring React Native engineers. If you are a senior level React Native engineer located in the US or Canada, go to careers.infinite.read, and fill out the form. Jon Major did that earlier this year, and now he's on the podcast. So...

Jon Major Condon:
It works.

Jamon Holmgren:
It could be you.

Robin Heinze:
That could be you.

Jamon Holmgren:
All right, let's get into our topic for today. Our topic is moving from React.js to React Native. And what's kind of interesting about this topic and I'm glad Jon Major's here because, Robin, you didn't, you didn't actually do ReactJS before you came to Infinite Red and started doing React Native, right?

Robin Heinze:
I did not. I learned, I was doing backend rails and then immediately learned React Native from there. So I had no ReactJS experience at all. 

Jamon Holmgren:
And I had a bunch of web experience. I did, you know, a lot of different technologies over the years and I had done things like Ember, but we were actually doing Ember when we decided to move to React Native, which is kind of a weird transition. And so for both Robin and myself, we sort of backed into ReactJS. It was kind of like we did React Native and they were like, "well, I suppose we should learn ReactJS too, 'cause that's sort of the underlying thing. Jon Major you at the other direction though, right? 

Jon Major Condon:
Yes. Correct. 

Jamon Holmgren:
So you were doing ReactJS before you had experience working with it. And then when you came to Infinite Red, now you're in the process of really kind of moving into React Native and, and working on that. You're already on a project, you're already contributing. Uh, so we're going to be talking to you over the course of this, uh, and asking questions, but I can also, so you recently started on a React Native project this year, when we hired you, a few months ago. And so you're going to have a different perspective because you did go from ReactJS to React Native. We went sort of the other direction. I still think there's probably some things we can bring to the table for this discussion. So we'll be, we'll be hitting on some of that. 

Jamon Holmgren:
One of the cool things about React is that React Native's sort of a, it's almost like a by-product of making UI a function of state, as, as people like to say. There's a great article, I'll link to it in the show notes, where the author describes the idea of React using jQuery. You know, we were doing a lot of jQuery back in the day and that was, you know, extremely popular, but he, he kinda like remade React using jQuery, like a few lines of jQuery, And it was super, super, that was like, when it clicked for me like, "oh, this totally makes sense now." Like I totally get it. 

Jamon Holmgren:
And really what it does, it takes this sort of like spaghetti of events and, um, effects and things like that and makes them all focus in on one central point, which is state. It's like, okay, any event is going to update the state and it goes to the UI from there. So the, the, the UI, just, just sort of like a, it's a by-product of state that when you change state, then the UI changes. When you change anything in state and it could change any part of the UI. It's really, really cool, but that wasn't the only thing. It also allowed you to then have a really easy translation layer between the state and the UI. So for React Web that's ReactDOM. ReactDOM takes the state and says, now I'm going to update the DOM, which is of course the web version of, of the UI. 

Jamon Holmgren:
And so once you have ReactDOM, now you can do something different. And so the, the brilliant folks at React, and so the brilliant folks at Facebook that came up with React Native were like, "well, let's just build a new ReactDOM, but for Android and for iOS". And that's what they did to build that. That's a great idea in theory, but ReactJS itself is still coupled to Web a bit because you still have divs, you still have spans, you're still using anchor tags for links. I think there was like a, a period of time where it was like, it's sort of going as far that way as it can, but it still wanted to retain a lot of the familiar things that HTML web developers were, were used to. 

Jon Major Condon:
So from my perspective, um, going from ReactJS to React Native, uh, I found that the, the spans, the 'a' tags, the divs, just about every single tag that you can mention, Um, well actually, yes, every single tag that you can mention in HTML is gone. Uh, and so now there's just, um, React Native components that are there for you. And so that was a little bit trippy, um, to start. Being someone who, um, you know, wants to throw a div around, um, you know, items to say flex it or display it in, in some different way, um...

Robin Heinze:
Now you just do a view. 

Jon Major Condon:
Yeah. So yeah, now you just do view, but what I found is the views also have its limitations too. So if you're doing a view and if you're styling that view, you don't have that, like that luxury of cascading, say CSS color property down to a text element, versus in HTML, if you wanted to, um, style like a span within a div, you could hypothetically on the div, just say, color is uh green. And then that span should inherit that color. Uh, but that doesn't exist in React Native. So I find like, like, you, you have to do a lot more styling...

Robin Heinze:
Mm-hmm.

Jon Major Condon:
..in different spots to achieve what you want. 

Robin Heinze:
It's very explicit styling.

Jon Major Condon:
Yes.

Robin Heinze:
Like declarative, which, like, it, some people have actually said is easier. Like I, I'm working with a developer on a client project right now who just started doing React Native, coming from a web background. And he's like, "I love these React Native styles because it's a lot easier to keep track of what's, what's styled with what properties".

Jon Major Condon:
That is true.

Robin Heinze:
Because it's just like, you have to give it directly to the element, tell it exactly what it's style is going to be, and there's not any sort of 'inherited' from somewhere magical. 

Jamon Holmgren:
Yeah, I feel like web developers who kind of came in as web developers, sort of look at CSS as the, the way to style anything, but it's really kind of just a take it's a w, it's a particular opinionated way to do it. There are definitely other ways to style, you know, the colored boxes that we put on screens...

Jamon Holmgren:
For our work.

Robin Heinze:
Which is really what it comes down to, we're...

Jamon Holmgren:
Yeah, that's pretty much what we're doing.

Robin Heinze:
We're making colored boxes on the screen. 

Jon Major Condon:
That's what matters.

Jamon Holmgren:
Exactly.

Jamon Holmgren:
We, we try to make it sound more dramatic, but that's honestly it.

Robin Heinze:
Yeah. It's really, it's really interesting seeing people come from CSS, which is the way to style the web and has been..

Jon Major Condon:
Mm-hmm.

Robin Heinze:
..for ever, uh, and learning how we, how to style in React Native versus someone like me, who I didn't do, pretty much, I didn't do any front end web at all. I was all backend web. And so I had really never worked with CSS. And then I learned React Native styles. And I was like, yeah, that makes sense.

Robin Heinze:
And I still don't know CSS. Because React native is all I've ever known. 

Jon Major Condon:
Yeah, I feel like for, for someone who comes from ReactJS to React Native, one may think that that person should be okay with the CSS and JS, which I am, but part of me still is just like, "yeah, I really do like CSS or Sass". Um, but still, uh, even with like just the CSS and JS that, that React Native provides, I do think you're right, Robin, is like, it's super explicit. You can find where the styles exist because that style tag is more than likely going to exist on the component that it reflects.

Robin Heinze:
Mm-hmm.

Jon Major Condon:
Um, so totally. 

Robin Heinze:
Yeah. I think it bothers people who like the efficiency of CSS. Like people who are really good at CSS and can use just like a couple of lines of CSS code and like style, like a whole bunch of different parts of their app really love that efficiency. And then there's people like me who like, just get lost. I'm like, where is the style coming from? I don't know. And like really love the sort of explicitness of React Native styles. 

Jamon Holmgren:
We talked about this in our styling episode a little bit. And I feel like, yeah, there, there, the explicitness, it almost, it almost reminds me a lot of, sort of the argument between inheritance and composition, because you can certainly spread your styles around just by composing them. You can be like, "Hey, I have this style. I'm going to export it as a constant. Then I'm just going to spread it, you know, dot, dot, dot my style into any, any elements that need that". And then it explicitly says this style is coming from over here. And that's one of the problems I have with CSS that I've always had with CSS is like, how do I know where the style came from now? Now, I will say, modern browsers and specifically like the inspectors are incredible about tracking down where does this style come from? So you have tools a web developer listeners..

Robin Heinze:
But you need tools.

Jamon Holmgren:
..ell, yeah, I always knew how to work. But you do need the tools. 

Robin Heinze:
The code, the code is, doesn't do a good job of explaining itself.

Jamon Holmgren:
Expressing it.

Robin Heinze:
Yeah.

Jon Major Condon:
Yeah. Not at all. And like someone like myself who lives in like browser dev tools or anything like CSS styling, it's so helpful to do all your CSS styling there and then just copy paste into your CSS. Um, unfortunately, you know, it's, it's not gonna translate exactly the same..

Jamon Holmgren:
Yeah.

Jon Major Condon:
..because it's going to need to be camel case, uh, in JavaScript. But even at that, it does help a lot. And I find that as a limitation in React Native, that I didn't even think to myself would be a problem. Uh, 'cause there is no like real dev tools that you can actually, um, change like the CSS..

Robin Heinze:
Right.

Jon Major Condon:
..and, and do all those things right there and get immediate feedback to then take and run with it. You, you just have to, you know, do it in the code, save it and 

Robin Heinze:
hot reload.

Jamon Holmgren:
Yup.

Jon Major Condon:
Hot, hot reload, and then get right back to it, rinse and repeat. 

Robin Heinze:
Yup.

Jamon Holmgren:
Yeah. That's, that's definitely a big difference between ReactJS. I mean that, a ReactJS developer coming into React Native is going to notice that the tooling is different at best and worse, more likely.

Robin Heinze:
More likely worse.

Jamon Holmgren:
There are some cool things like Reactotron is fantastic, but Reactotron's also available on the web. You know, it works on the web. So there's a lot of, kind of, we're in a little bit of a niche here. And because of that, we're going to be a little underserved with the, with the tooling that is available. 

Robin Heinze:
Yeah.

Jamon Holmgren:
And, you know, we work around that and we deal with that, but it certainly has been, I'm sure, I'm sure there's tooling on the way it's, you know, React Native is getting more and more popular every single year. And I'm sure that as Microsoft invests so much and Facebook invests so much that the tooling will get better. And we've seen that with like Flipper, for example, Flipper getting better and Reactotron now works with Flipper. I think that it will continue to get better, but it will always lag behind web because web is just the, the gigantic, you know, massive, the biggest pool of developers out there.

Robin Heinze:
Definitely. I think after, after a certain amount of time, like I've developed sort of instincts about the React Native styles and like I can write, I can style a few components before I even like reload the app and they pretty much do what I kind of expect, but it took a long time..

Jon Major Condon:
Mm-hmm.

Robin Heinze:
..to get there. Uh, but hot reload is, is really key for those, like "try it and see what happens"..

Jamon Holmgren:
Yeah.

Robin Heinze:
..kind of kind of moments. 

Jamon Holmgren:
Yeah, we had that in the previous native coding system that we used and we had developed that, actually Todd Werth and I, Todd the editor of this podcast and my business partner. He, uh, he and I came up with a live reload system that worked pretty similarly to what you use in React Native. And it was, it was pretty awesome, but with Native code. Uh, the biggest problem with it that we were still trying to work on when we ended up, you know, kind of ditching that and moving toward React Native was if you made a syntax error it would crash your app, like right in the middle of it, just boom. You know, I guess that kind of still happens. Like if you make a syntax error, you're going to get a red screen.

Robin Heinze:
A red screen. And then you have to, you have to reload. 

Jamon Holmgren:
So, I guess they haven't solved that either. Uh, that was, that was definitely a thing that we were kind of working through, but it was the, I remember the, the cycle with native code was like, you had to rebuild..

Robin Heinze:
Yeah, which takes forever. 

Jamon Holmgren:
..and then navigate back to where you were. It was so slow, so annoying. And this was like, you save and it changes you save and it changes. And it like blew everybody away at that time. Now everybody kind of expects it 'cause it's been around for a while. But at that time back in, I think it was 2014 or 15, it was a big deal.

Jon Major Condon:
Back in 2013, I started as a, uh, I think you would call it a, maybe an intern or a student developer. I think I would say student developer. So I started as a student developer at a company, um, at uh University of Wisconsin-Milwaukee, where we were doing mobile application development and I was there for a couple years. Um, but when I first started, uh, mind you, I, I had basically no knowledge of software development at all, 'cause this is 2013 when I first started college. But when I started there, we were using Titanium Appcelerator.

Jamon Holmgren:
Oh, yes.

Jon Major Condon:
I'm not too sure if, okay, so you've heard of it. 

Jamon Holmgren:
I've heard of it.

Jon Major Condon:
Okay, cool. So we use that and it was, uh, we, we, we tried Ionic in that time too, but Titanium Appcelerator was very slow and there was no hot reloading. It was just jQuery, HTML and CSS, but it, it was more comfortable in that regard. 

Jamon Holmgren:
Mm-hmm. Yeah. Yeah. And on the web, uh, I think people are kind of, they expect, you know, these tools, they expect hot reloading. They expect all of these things because there are such amazing systems out there now for web. So there's a lot of changes. Now you can use a lot of the same things you can use Redux, you can use, um, of course MobX State Tree. You can use Lodash, you can use Rambda, you can use a lot of the same tools that you would use on, on web. And so I'm sure a lot of that stuff is, is familiar for people who are coming from ReactJS to React Native. And I think what we've found with, um, with our new developers coming on, as we hire, is that they can be productive if they know ReactJS, they can be productive in about a week. I mean, not very much time. It's just learning like, "okay, you're going to do views. You're not going to do divs and spans. You're going to do views. You're going to, you know, these are the ways that we kind of, um, you know, you have screens and you know, not pages, you don't have URLs. Um, we have navigation".

Robin Heinze:
Yeah, navigation is a huge, is a huge difference. 

Jamon Holmgren:
It's quite a bit different. Yeah. Uh, 'cause he, instead of having a routing library, you have a navigation library and you're, you're moving from screen to screen. There really isn't a concept of, of URLs in React Native.

Jon Major Condon:
Right.

Jamon Holmgren:
I guess, I guess React Navigation sorta brings that back a little bit, but...

Jon Major Condon:
Yeah, because there's params, um. 

Jamon Holmgren:
Mm-hmm.

Jon Major Condon:
So, that, that was to my experience doing ReactJS, I didn't really feel React Navigation was difficult. Um, my thing was learning a new state management library.

Jamon Holmgren:
Mm-hmm.

Jon Major Condon:
Which is MobX.

Jamon Holmgren:
Yeah. Which if you, which if you had already known that it wouldn't have been a big transition, but obviously changing from the web paradigm to native and also learning that is..

Jon Major Condon:
Right. 

Jamon Holmgren:
..a challenge. One big thing also is the native side because it's React Native and we have native code. And so in React Native, you have the ability or sometimes the necessity to drop into native code, Objective C, Swift, Kotlin, Java. I'm sure that uh Java course that you took, Jon Major, will come in extremely handy. (laughs)

Jon Major Condon:
Actually it was C#. 

Jamon Holmgren:
Was it C#? Okay, yeah.

Jon Major Condon:
It was C#.

Jamon Holmgren:
I mean, you know, it is what it is. Uh, but what's sort of the equivalent in web, like what would be the equivalent of dropping in a native if you're on a web context using React, or you know, JS. 

Robin Heinze:
Is there?

Jon Major Condon:
Yeah, yeah, I don't think there..

Robin Heinze:
Is there?

Jamon Holmgren:
I, so it's a leading question. Uh, cause I do have an answer for that. I, I look at it as sort of like when you just start writing JavaScript, maybe you're using jQuery or something else to just mess with the DOM, change things, you're just writing something that is, you know, like the native side of a browser, maybe you're accessing browser DOM or browser, maybe you're accessing browser APIs that are browser specific. 

Robin Heinze:
Just turns out that the native side of ReactJS is still JavaScript. 

Jamon Holmgren:
That's right. Yeah. It's still JavaScript, exactly.

Robin Heinze:
It's the same language, but there is a native equivalent, which is..

Jamon Holmgren:
So it's harder to tell..

Robin Heinze:
..your peer JavaScript.

Jamon Holmgren:
..when you're, when you're doing that, where when you drop from JavaScript into Objective C, you kinda know. 

Robin Heinze:
Yeah. That's a much, it's a much bigger, bigger difference.

Jon Major Condon:
I'd say building uh Chrome plugins would be like as..

Jamon Holmgren:
Mm-hmm. Yeah.

Jon Major Condon:
..native as I have gotten. But yeah, I mean, at that point it still is JavaScript, as we said. Um, but yes, they, they only work in Chrome, as far as I know. 

Jamon Holmgren:
Yeah. And, and so like you do have to, and, and obviously I would say, like Robin, you haven't dropped into native all that often in the four years, five years that you've been doing React Native, right? 

Robin Heinze:
Yeah, I've done five, five or six client apps. And it's still really rare..

Jamon Holmgren:
Yeah.

Robin Heinze:
..if ever because the, the ecosystem of third-party libraries is so robust at this point, that pretty much anything you need to do in the native layer, someone has already written a package for that. 

Jon Major Condon:
And you just have to link it.

Robin Heinze:
Yup.

Jon Major Condon:
Which has been (laughs)..

Jon Major Condon:
..a problem. 

Robin Heinze:
Link it

Robin Heinze:
Yeah. Linking, auto linking was a really welcome..

Jamon Holmgren:
What do you mean? You just write an anchor and you pointed to it with an href, right?

Jamon Holmgren:
Like, that's...

Robin Heinze:
That, that's what you mean by 'linking', right?

Jon Major Condon:
Href with a bang and it just navigates nowhere. Just errors.

Jamon Holmgren:
Href with a bang. I love that.

Jon Major Condon:
Um, no I've found, uh, setting up like, like the linking stuff for React Native with the native dependency to be a lot of work. Um, in, in some cases. I just was linking a package called "background geolocation" from Transistorsoft, not sponsored.

Jon Major Condon:
But I was linking that package, and it was just so many, uh, intrinsic details about, you know, what you have to do in iOS then what you have to do in Android. And then, you know, cross your fingers that it works in both spots and you don't want to get too far ahead in like one or the other, um, you know, playing around with it because then you'll forget that you have to go back to, uh, fixing like the linking issues so you can test on that other device. Um, so that's another big thing is to, now you have two devices usually that you're testing on and not just, I mean, I'll be honest. I'm not the only one here, I would hope you just opened up Chrome and you test only in Chrome.

Robin Heinze:
It works? Cool. Ship it.

Jon Major Condon:
Cross your fingers. It works, yup, exactly. Ship it. Unless it's someone says, "Hey, Firefox or Internet Explorer doesn't work". 

Jamon Holmgren:
Yeah. And not only do you have two devices, you're sending it to, but you also have three package managers. You have your package.json with Yarn or NPM. You also have CocoaPods on the iOS side and you have Gradle on the Android side. And those all have their own idiosyncrasies, they have their different languages. I think, uh, you know, of course, package.json is, is written and JSON, which is a JavaScript subset. And you have Ruby on CocoaPods. 

Robin Heinze:
I always found that super random.

Jamon Holmgren:
Isn't that random? Yeah.

Robin Heinze:
Super random. But...

Jamon Holmgren:
Ruby for the, well, but like MacOS came with Ruby..

Robin Heinze:
Mm-hmm.

Jon Major Condon:
Mm-hmm.

Jamon Holmgren:
..built in. So that kind of makes sense. I don't know if it still does, but I think they're removing it.

Robin Heinze:
It still does. I do not recommend using system Ruby though.

Jamon Holmgren:
Right. That's, yeah.

Robin Heinze:
Get yourself a Ru- a Ruby version manager. 

Jamon Holmgren:
A real ruby? 

Jamon Holmgren:
And then on the Gradle side, it's written in Groovy. 

Jon Major Condon:
Yes. 

Jamon Holmgren:
Like not even in Java, not even in Kotlin, but in Groovy.

Robin Heinze:
Groovy.

Jamon Holmgren:
Of all things. And so you're having several more languages to learn more kind of runtimes that you're dealing with. And so, yeah, that's, that's a, that's another fun part of, of this linking can be, now, I mean, it's been getting better. When we started with React Native, we had to manually link everything. Now there's a lot of auto linking happening, which is really, really nice. And so…

Robin Heinze:
I was just looking at that package that you mentioned, Jon Major, and it, it does support auto linking, but then there's a bunch of stuff you have to do..

Jon Major Condon:
Yes.

Robin Heinze:
..beyond the auto linking because location, location is so permissions intensive because of Apple's privacy rules, which is fair. 

Jamon Holmgren:
And you have to deal with Xcode and Android studio too. So I mean like that in and of itself brings a whole nother dimension. 

Robin Heinze:
Yeah. I would say going from going from React Native and learning ReactJS had a huge advantage because all of the quote, unquote like "hard stuff" about the native environment, like, like you said, Android Studio and Xcode and native modules and linking and certain, like not to mention like certificates and code signing and app store releases and all that. Um, I heard, we already knew all of that and ReactJS you, going to ReactJS. There's fewer differences to learn, I think.

Jamon Holmgren:
You're like "is this all? I must be missing something. Is this all there is?"

Jamon Holmgren:
Now I would say mixing native developers with web developers has led to a lot of interesting collisions. I would say mostly positive collisions. There's some, been some, you know, kind of culture clash kind of things that happen. But it's really interesting. There's this kind of huge influx of web developers into the native world. And they bring certain assumptions, like, why can't we have this? Why, why don't we have this? You know, why don't we have this and the native side, uh, you know, they bring their own kind of take on things. And I think they're very critical to this, as well.

Robin Heinze:
Like, "hey, get out of our playground". Like what?

Jamon Holmgren:
There was some of that.

Jon Major Condon:
It's my sand.

Jamon Holmgren:
Yeah.

Robin Heinze:
This is, this is my sandbox.

Jamon Holmgren:
You see some of that. And, and, but, you know, like there are, I know some people that did native development for many years and knew Xcode inside and out that switched over to, uh, in fact, actually we had Orta on our, on React Native Radio, uh, several episodes ago. And, uh, he told me that they, they decided to use React Native even when they were only using it for iOS. And this is like a company that, Artsy, that just was absolute, you know, geniuses at iOS development. And yet they still decided to use React Native because it was a better developer experience. So they, they brought a lot to the table. Artsy did. And I think that, uh, other native developers as well, these collisions have led to better tooling, better software, better techniques. 

Jon Major Condon:
Coinbase, um, is also another example of focusing on one platform, uh, at least initially. So they focused on Android initially getting the development all done with React Native and then transitioning to the iOS side later. Um, they also just recently did this and the cool thing about this is they tried to do it as a brownfield project, and then they realized that it wasn't the best way of doing it, and so they went greenfield. And so the problem that they ran into like doing brownfield, which is basically taking something that exists today and then trying to take a different technology and shove it into the current platform that's there, they realized that the React Native developers and then the ReactJS developers were basically butting heads because there was the issue with React Native code being there that the ReactJS developers could handle. And then there was the native code there that only the native developers could handle. And so it just caused a lot of problems between two different, you know, types of developers, which made more sense to go greenfield. Which is act, which is actually one of the posts that I published, um, in the React Native newsletter, uh, this time around. So...

Jamon Holmgren:
That's a great lead into our next section. So we are going to kind of wrap up our main topic there. And by the way, I am working on, a little sneak peek, I am working on getting the, some of the Coinbase developers on the program. So when we get a chance to do that, hopefully we'll be able to release said episode in the next few months, but good lead into the next section, News from the Newsletter. I'm, that's a working title.

Jamon Holmgren:
I don't have a great title for this yet, but News from the Newsletter, while we have the editor in chief of the React Native newsletter here, Jon Major.

Jon Major Condon:
Mm-hmm.

Jamon Holmgren:
Let's do that new section and uh, what has caught your eye lately? I guess you already led into it, the, the Coinbase thing.

Jon Major Condon:
Yes. Yeah. Coinboy. Coinboy. Coinbase successfully transitioning to React Native was definitely one of them. And then Stripe had officially released a public beta to their Stripe native library. 

Jamon Holmgren:
Oh, that's very cool. Uh, I did see that and that's going to be, I, we could have used that actually last year, there was a big project we did where we could have used the, the features of the Stripe Connect. So very cool. If you want to check that out, go to ReactNativeNewsletter.com, subscribe to that. You're going to be, uh, seeing some great articles come through. Jon Major does a good job of summarizing them in the little sections and, uh, it's a fantastic way to stay up-to-date about React Native. Very cool. So that's a new section that when Jon Major's on, we're going to have him talk about something cool that he has caught his eye in the React Native newsletter. 

Jamon Holmgren:
We also have another section that we do, sometimes, when we have time: Weird Bugs. Robin, do you have a weird bug today? 

Robin Heinze:
I do. I do. I have a, uh, a really fun bug that we encountered the other day. Well, fun. I dunno if fun is the right word. Uh, but it's one of those things that just reminds me how huge the React Native API is and how I, there's still lots of stuff I don't know about it. Um, but our lovely QA team informed me that we, uh, we had this complex screen that has a scroll view and then a bunch of smaller scroll views within it. And it looks beautiful on iOS, uh, but he realized that the inner scroll views, the, the smaller ones were not scrolling on Android. And I was like, oh no, oh no. I love those Android-only bugs that usually take me days to figure out, uh, but I did some Googling and apparently there's a prop for that. Who knew?

Jamon Holmgren:
There's a prop for that.

Robin Heinze:
There's a prop for that.

Robin Heinze:
"Nested scroll enabled" is a property on React Native scroll view that lets you do nested scroll views. And it's only on Android and it defaults to false..

Jamon Holmgren:
Why?

Robin Heinze:
..for whatever reason, uh, React Native core team. Tell me on Twitter, why is this defaulting to false? Uh, is there a perf- maybe there's a performance implication for it? I'm not sure. 

Jamon Holmgren:
Probably because they didn't want to break existing behavior.

Robin Heinze:
Could be.

Jamon Holmgren:
Even though it was already broken.

Robin Heinze:
Even though it was already broken. Uh, so if you need to nest scroll views within each other on Android, make sure you've set nested scroll enabled to true, at least on the child scroll view. I did it on both for good measure, but..

Jamon Holmgren:
Okay. So it worked when you did it on both?

Robin Heinze:
Yeah.

Jamon Holmgren:
Speaking of "there's a prop for that", I'm one of the maintainers of React Native Web View, and I'm pretty sure there's a prop for that, for just about anything. That is a huge API and I'm sorry, but it just is. 

Robin Heinze:
It's, well, and it's changing all the time. Cause it kind of, it changes along with the native API. So this is something that was added in the Android API 21. So your, your app does have to have a minimum SDK version of 21. Um, but so every time the sort of native API has changed, there'll be props added to React Native eventually. So it's, it's always changing. I recommend read, maybe check the docs out. If you haven't looked at them in a while, there may be something that surprises you. 

Jamon Holmgren:
Robin added that to our new internal Wiki. She's been kind of leading the team, putting together an engineering Wiki for us and she added it as a TIL.

Robin Heinze:
Love me a good Wiki. 

Jamon Holmgren:
Absolutely. 

Jamon Holmgren:
Very cool. Well, thanks so much to both of you. Where can people find you? Jon Major, where are you at on Twitter? 

Jon Major Condon:
Uh, JonMajorC. Um, I'm JonMajorC everywhere. 

Jamon Holmgren:
Okay. 

Robin Heinze:
So satisfying when you can get an internet handle that you have like, everywhere.

Jon Major Condon:
Yes, but don't get any ideas, people, that's mine. 

Robin Heinze:
My problem is my problem is I got married again, in the middle of my internet life, and yeah, now...

Jamon Holmgren:
Some stuff is still your, your...

Robin Heinze:
Some stuff is still my old name. 

Jon Major Condon:
Yeah. 

Jamon Holmgren:
Gotcha. Yeah. Well I'm, as far as I know, the only Jamon Holmgren in the world, so.. 

Robin Heinze:
I have never met another Jamon, let alone another Holmgren, so...

Jamon Holmgren:
I've met other Jamons. There's other Jamons, for sure. Uh, but yeah, I mean, it's uh, it's a, it's a rare name combination, there. Uh, Robin, you are at Robin_Heinze, with an 'e' at the end. And I am @JamonHolmgren, of course. Uh, React Native Radio is ReactNativeRDIO. We dropped the 'a' at the end for characters reasons. 

Jamon Holmgren:
Uh, so yes, thanks again to our guest host, Jon Major, for joining us today. As always thanks to our producer and editor, Todd Werth our transcript and release coordinator, Jed Bartausky, and our social media coordinator, Missy Warren. Thanks to our sponsor, Infinite Red, check us out. Infinite.red/ReactNative. Special thanks to all of you listening today. Make sure to subscribe, send this to someone who may be thinking about going from ReactJS to React Native, might give them a little bit of an insight into what that takes. Reminder: Infinite Red is hiring React Native engineers. If you're a senior level React Native engineer located in the US or Canada, I think in Canada, they have to say "developer", right?

Robin Heinze:
Yeah.

Jamon Holmgren:
They can't say "engineer" in Canada-

Robin Heinze:
They can't say "engineer" because.. 

Jamon Holmgren:
Okay. 

Robin Heinze:
..you need a certification for that. 

Jamon Holmgren:
If you're a React Native developer, eh? Did that work? That didn't work. It didn't work.

Robin Heinze:
I thought it was funny.

Jamon Holmgren:
I tried to do the Canadian thing. 

Jon Major Condon:
Don't worry. 

Jamon Holmgren:
Yeah.

Jon Major Condon:
I can't do it either. 

Jamon Holmgren:
All right, I'm, I'm just a hoser. I don't know. This is bad. Okay. I'm just going to move on. If you're a senior level React Native developer located in the US or Canada, go to careers.ifinite.red and hit us up. We'll see you all next time. 

Robin Heinze:
Bye. 

Jon Major Condon:
Bye.