WEBVTT 1 00:00:05.320 --> 00:00:08.800 Hey, welcome to React Round Up, the podcast where we 2 00:00:08.880 --> 00:00:09.800 keep you updated on. 3 00:00:09.800 --> 00:00:11.160 All things React related. 4 00:00:11.599 --> 00:00:14.839 This show is sponsored by Raygun and produced by Top 5 00:00:14.880 --> 00:00:17.640 and Doves and onboard. Top and Doves is very great 6 00:00:17.719 --> 00:00:19.960 Top and Doves, so get top and pay and recognition. 7 00:00:20.039 --> 00:00:24.039 We're working on interesting problems and making meaningful community contributions. 8 00:00:24.079 --> 00:00:27.800 And Onvoid, which promotes which provides remote design and software 9 00:00:27.800 --> 00:00:31.120 development services on a task basis, so clients only pay 10 00:00:31.120 --> 00:00:35.799 when tests are delivered and approved. In today's episode, we 11 00:00:35.920 --> 00:00:38.640 have a very special guest so that we can talk 12 00:00:38.679 --> 00:00:44.920 about React Native versus capacity just as an even larger 13 00:00:44.960 --> 00:00:46.759 interro for those of you that may not know what 14 00:00:46.799 --> 00:00:49.920 the pastor is is yet another technology that allows you 15 00:00:50.039 --> 00:00:53.960 to transform your web code so that it can run 16 00:00:54.039 --> 00:00:58.119 all mobile as well, similar to how React Native does 17 00:00:58.119 --> 00:01:00.640 it like in terms of the final product, but they. 18 00:01:00.520 --> 00:01:02.039 Do it in a very different ways. 19 00:01:02.200 --> 00:01:04.879 So today we're going to talk about those two technologies, 20 00:01:05.879 --> 00:01:08.400 what are the differences between them, and when to use 21 00:01:08.439 --> 00:01:11.959 each depending on your context and the context of your 22 00:01:12.120 --> 00:01:16.920 team and your company. My name is Lucas Spaganinia. I'm 23 00:01:16.959 --> 00:01:19.280 your host in a podcast, and joining me in today's 24 00:01:19.280 --> 00:01:27.359 episode is also the host Peter Osa. I agree, and 25 00:01:27.959 --> 00:01:33.319 our very special guests coming back for another for another episode. 26 00:01:33.840 --> 00:01:35.599 Jamn Homegram. 27 00:01:36.599 --> 00:01:38.719 Yeah, nice to be on again. Really nice to see 28 00:01:38.760 --> 00:01:39.280 you guys again. 29 00:01:40.239 --> 00:01:41.159 It's great having you. 30 00:01:41.560 --> 00:01:44.840 For those of you that may have that may have 31 00:01:45.000 --> 00:01:49.760 not listened to the previous episode where Jamen was, I 32 00:01:49.799 --> 00:01:53.200 think it was like four or five episodes ago, something 33 00:01:53.280 --> 00:01:57.959 like that, but it was an episode completely focused. 34 00:01:57.599 --> 00:01:58.640 On React Native. 35 00:01:59.040 --> 00:02:02.280 So if you want to deeper into that, just go 36 00:02:02.439 --> 00:02:04.359 to the history of the show and then you go 37 00:02:04.439 --> 00:02:07.040 back a few episodes and you will see it. This 38 00:02:07.120 --> 00:02:10.479 as a recap. Jamen is the CEO and co founder 39 00:02:10.520 --> 00:02:16.520 of Infinite Red, which is a company specialized in building 40 00:02:17.879 --> 00:02:20.719 either from scratch or just taking a project in the 41 00:02:20.759 --> 00:02:25.400 middle and completing it in React Native. So this is 42 00:02:25.439 --> 00:02:28.319 what he does for a living. He's the perfect person 43 00:02:28.400 --> 00:02:31.120 to tell us the difference between those two technologies. 44 00:02:31.520 --> 00:02:34.039 That is a great pitch. I should hire you to 45 00:02:34.080 --> 00:02:35.719 do all of our promos. That's perfect. 46 00:02:35.719 --> 00:02:44.400 We can do that happily. Accept Yeah, all right, so Jamin, 47 00:02:44.639 --> 00:02:49.039 let's get into it. Do you mind giving the audience 48 00:02:49.120 --> 00:02:52.800 a quick pitch if you feel as necessary, because I 49 00:02:52.800 --> 00:02:56.280 think I kind of introduced the goal of Capacitor, But 50 00:02:56.319 --> 00:02:58.759 if you feel there's anything else necessary before we get 51 00:02:58.759 --> 00:03:00.560 into the differences between them. 52 00:03:00.840 --> 00:03:04.319 Now, yeah, I think you know, most of the time, 53 00:03:04.800 --> 00:03:07.520 Capacitor is connected to Ionic, and a lot of people 54 00:03:07.560 --> 00:03:11.560 are probably familiar with Ionic, which is I would say 55 00:03:11.599 --> 00:03:15.759 like more of a full featured framework, and Capacitor is 56 00:03:15.919 --> 00:03:20.759 more of like a cross platform native run time a lot, 57 00:03:20.800 --> 00:03:24.280 you know, and we'll talk about the similarities and differences 58 00:03:24.280 --> 00:03:27.479 between that and React Native and it leans on the 59 00:03:27.520 --> 00:03:31.360 web technologies, but just like Reacnative, it has a lot 60 00:03:31.400 --> 00:03:34.759 of the same you know, kind of goals and features 61 00:03:34.759 --> 00:03:39.120 and whatnot. Now, I do want to tell the audience 62 00:03:39.840 --> 00:03:41.960 I've been doing React Native for eight and a half years. 63 00:03:42.360 --> 00:03:46.919 I the last Capacitor or Ionic project, I should say 64 00:03:47.360 --> 00:03:50.960 that I've done was about that long ago. So what 65 00:03:51.120 --> 00:03:55.439 I know about Ionic and Capacitor has been from a 66 00:03:55.479 --> 00:03:58.520 distance or spinning up a little like play apps. I 67 00:03:58.560 --> 00:04:01.840 haven't built apps in Capacitor that are that are like 68 00:04:02.360 --> 00:04:05.199 really significant, so I always have to put that caveat 69 00:04:05.199 --> 00:04:07.800 out there like that this is, you know, like this 70 00:04:07.840 --> 00:04:09.719 is something that I want to make sure that I 71 00:04:09.759 --> 00:04:12.199 that I do a good job of comparing the two 72 00:04:12.439 --> 00:04:16.000 and and don't just lean on my own like experience 73 00:04:16.240 --> 00:04:20.600 and and and even my own what my company specializes 74 00:04:20.639 --> 00:04:24.720 in and that sort of thing. With that said, in 75 00:04:24.839 --> 00:04:29.560 order to like prep for this episode, I actually reached 76 00:04:29.600 --> 00:04:34.600 out to my friend Jessica Sachs, who used to work 77 00:04:34.600 --> 00:04:37.759 for Ionic, and I went and I actually chatted with 78 00:04:37.839 --> 00:04:40.920 her and I said, hey, look, I really want to 79 00:04:40.959 --> 00:04:43.360 make sure I've got this right, and and we talked 80 00:04:43.399 --> 00:04:47.279 for a while about what, you know, what Ionic and 81 00:04:47.360 --> 00:04:50.680 Capacitor really like, what the state of the art is 82 00:04:50.720 --> 00:04:54.000 in twenty twenty four. And I think, I, uh, you know, 83 00:04:54.040 --> 00:04:56.360 I I think I'm I think I'm well well armed 84 00:04:56.399 --> 00:04:58.360 for this. I think I can probably do a pretty 85 00:04:58.360 --> 00:05:01.759 decent job where she won't be like cringing hopefully if 86 00:05:01.759 --> 00:05:03.199 she listens to this episode. 87 00:05:03.600 --> 00:05:06.519 Awesome, So you basically did a podcast to prepare for 88 00:05:06.600 --> 00:05:07.680 the podcast. 89 00:05:08.000 --> 00:05:10.759 I should have This is just a Twitter DM discussion, 90 00:05:10.800 --> 00:05:13.800 but I should I should have done I should have 91 00:05:13.800 --> 00:05:16.319 brought her on my my podcast reacting of radio. That 92 00:05:16.360 --> 00:05:18.920 would have been really fun. Yeah, we could make that happen. 93 00:05:20.519 --> 00:05:23.879 Definitely, definitely Okay, Awesome, We're we're also going to try 94 00:05:23.920 --> 00:05:24.600 to bring her here. 95 00:05:24.639 --> 00:05:27.120 I think it's that's that could be really interesting. 96 00:05:27.199 --> 00:05:30.839 Yeah. Absolutely, If she was, I'll just volunteer her. She 97 00:05:30.920 --> 00:05:32.439 has no knowledge of this, but. 98 00:05:35.079 --> 00:05:37.160 Thank you Jessica for me up for this. 99 00:05:37.519 --> 00:05:41.120 Wow. Yeah yeah. 100 00:05:41.759 --> 00:05:47.560 So one interesting thing to clarify through the audience is that, 101 00:05:48.360 --> 00:05:50.639 as far as I'm aware of and I'm not, i 102 00:05:50.680 --> 00:05:54.040 am no Ionic expert myself as well. But maybe you 103 00:05:54.040 --> 00:05:56.360 can clarify this to me since you talked to someone that. 104 00:05:56.680 --> 00:05:57.639 Words at Ionic. 105 00:05:59.079 --> 00:06:01.959 For the first time that I saw Ionic, it was 106 00:06:02.040 --> 00:06:04.879 like three years ago or so, and. 107 00:06:06.199 --> 00:06:09.680 I thought it was a framework, but then. 108 00:06:09.600 --> 00:06:13.319 It was presented to me in an online course as 109 00:06:13.399 --> 00:06:19.040 actually a UY library that compiled to the native components, 110 00:06:19.639 --> 00:06:21.680 and then that was my understanding at the time. And 111 00:06:21.720 --> 00:06:27.079 then recently I was trying to look up Ionic and 112 00:06:27.240 --> 00:06:32.000 I realized that currently Ionic itself is the company. So 113 00:06:32.319 --> 00:06:38.399 they named the company as Ionic, and then they have Capacitor, 114 00:06:38.480 --> 00:06:42.199 which is one of the products of the company called Ionic, 115 00:06:42.759 --> 00:06:48.560 and they have the UY library of components, which is 116 00:06:48.600 --> 00:06:55.360 the Ionic framework. So is that correct? Like Ionic? Just 117 00:06:55.399 --> 00:07:00.160 Ionic is the company. Ionic Framework are the UI components 118 00:07:00.240 --> 00:07:04.399 that also come along with Capacitor because they depend on capasitor, 119 00:07:04.600 --> 00:07:08.639 And then Capacitor itself is just the the build pool 120 00:07:08.839 --> 00:07:12.879 that can transform your web code into mobile applications, but 121 00:07:13.000 --> 00:07:18.399 it doesn't come with the pre done UI components that 122 00:07:18.439 --> 00:07:19.800 translate to the native forms. 123 00:07:19.879 --> 00:07:20.279 Is that it. 124 00:07:20.959 --> 00:07:22.800 I think you did a good job, and I'm going 125 00:07:22.839 --> 00:07:25.240 to start bumping up against the because this stuff it 126 00:07:25.240 --> 00:07:28.199 can be kind of fuzzy, you know, like because I 127 00:07:28.240 --> 00:07:32.120 mean even Ionic, Like if you go to ionicframework dot com, 128 00:07:32.800 --> 00:07:36.160 they call it Ionic, like they say introduction to Ionic. 129 00:07:36.279 --> 00:07:39.680 Ionic is an open source UI toolkit, you know. So 130 00:07:40.439 --> 00:07:43.040 but I think you're right because ultimately I think that 131 00:07:43.160 --> 00:07:46.639 the framework itself is Ionic. There is a company Ionic, 132 00:07:47.519 --> 00:07:51.079 which is you know, of course maintaining it and kind 133 00:07:51.120 --> 00:07:54.160 of like building a business around it. And then Capacitor 134 00:07:54.240 --> 00:07:58.800 is really the technology that they created in order to 135 00:07:59.439 --> 00:08:04.160 have per performant like as performance and capable as possible 136 00:08:05.759 --> 00:08:08.920 bridge over to the native side. So yeah, I think 137 00:08:08.920 --> 00:08:09.600 you did a good job. 138 00:08:09.600 --> 00:08:18.680 Though. Cool And they have another interesting product called app flow, 139 00:08:19.600 --> 00:08:22.439 and they also have live updates, which I thought was 140 00:08:22.480 --> 00:08:26.279 really interesting. And I don't know if we're even going 141 00:08:26.360 --> 00:08:28.920 to get into it, because I think perhaps we would 142 00:08:28.959 --> 00:08:31.480 need a deeper understanding of the rest of the ecosystem 143 00:08:31.600 --> 00:08:34.200 to even talk about that, but I was really curious 144 00:08:34.240 --> 00:08:40.000 to understand if app flow and their live deployment picture 145 00:08:40.320 --> 00:08:44.440 only work with Capacitor or Ionic, or if it actually 146 00:08:44.559 --> 00:08:48.559 worked or React Native as well, because from their website, 147 00:08:48.639 --> 00:08:52.840 I see that they have logos of other pools. So 148 00:08:53.000 --> 00:08:55.480 if you go to their website for app flow, which 149 00:08:55.559 --> 00:08:58.919 is a product of the Ionic company, then it has 150 00:08:58.960 --> 00:09:00.960 a logo for a capacitor are you, but also for 151 00:09:01.039 --> 00:09:06.639 React Native and Cordora, So I thought that was interesting. 152 00:09:07.320 --> 00:09:10.600 Yeah, Ionic interestingly, and I've chatted with some of the 153 00:09:10.639 --> 00:09:15.759 other Ionic folks as well, and they really have have 154 00:09:15.919 --> 00:09:19.639 started to branch out, and like in some ways, they're 155 00:09:19.639 --> 00:09:23.080 sort of like the Expo of capacitor, you know, like 156 00:09:23.120 --> 00:09:26.679 they have all the other tools on top of capacitor. 157 00:09:27.799 --> 00:09:30.000 That's kind of how you it's not a perfect technology, 158 00:09:30.120 --> 00:09:32.759 but like it's it's sort of like building on top 159 00:09:32.799 --> 00:09:36.759 of this technology. But unlike Expo, which is double down 160 00:09:36.799 --> 00:09:42.399 and React Native, they are they seem to be adopting 161 00:09:42.440 --> 00:09:46.200 other technologies and providing solutions across the board, so they 162 00:09:46.200 --> 00:09:51.120 seem to have a wider I guess umbrella across you know, 163 00:09:51.200 --> 00:09:55.159 React Native and and their technologies and and whatnot. They 164 00:09:55.200 --> 00:09:58.080 do provide things like, yeah, the c CV service and 165 00:09:58.080 --> 00:10:02.639 and and more. So, Yeah, it's it's an interesting company 166 00:10:02.679 --> 00:10:05.320 for sure, And I've liked all the people that I've 167 00:10:05.320 --> 00:10:09.120 talked to there. They're good engineers. They seem to understand, 168 00:10:09.200 --> 00:10:13.320 you know, what us developers go through and whatnot. 169 00:10:14.639 --> 00:10:14.919 Cool. 170 00:10:15.240 --> 00:10:18.840 Have you yourself ever used some of those tools that 171 00:10:18.919 --> 00:10:22.919 allow you to have real time updates. 172 00:10:22.360 --> 00:10:25.480 On the React Native side. I have not, you know, 173 00:10:25.559 --> 00:10:27.840 not so much on the Ionic side, but for sure 174 00:10:27.919 --> 00:10:29.799 on the React Native side, we've used them all, like 175 00:10:29.919 --> 00:10:33.159 on multiple projects, including rolling our own. We've had to 176 00:10:33.159 --> 00:10:36.519 build our own because sometimes clients will come to us 177 00:10:36.519 --> 00:10:38.159 and say, I want to React Native app. I want 178 00:10:38.200 --> 00:10:40.279 over the air updates, but nope, I can't use Expo 179 00:10:40.399 --> 00:10:42.039 and nope, I can't use app Center, and nope, I 180 00:10:42.080 --> 00:10:44.759 can't use you know, any of the other options that 181 00:10:44.759 --> 00:10:47.879 are out there. So we build our own, and we 182 00:10:47.919 --> 00:10:51.360 build something in house and then use that. It's not 183 00:10:51.480 --> 00:10:55.200 actually that difficult, I would say, especially when we've done 184 00:10:55.200 --> 00:10:58.159 it a few times. But of course, building all the 185 00:10:58.200 --> 00:11:01.039 features out that you might expect from an over there 186 00:11:01.240 --> 00:11:07.039 update perspective, that's where it, you know, where like you 187 00:11:07.039 --> 00:11:10.120 get into it's like a deep rabbit hole there. 188 00:11:10.399 --> 00:11:12.080 And I know that this is a bit off topic, 189 00:11:12.120 --> 00:11:15.440 but in the last episode we were discussing that when 190 00:11:15.440 --> 00:11:17.759 you're dealing with native apps, you have to support the 191 00:11:17.879 --> 00:11:21.120 users that are in old versions or you need to 192 00:11:21.200 --> 00:11:23.720 like literally just block them and say, hey, if you 193 00:11:23.759 --> 00:11:26.960 want to use the app, you need to update. And 194 00:11:27.200 --> 00:11:29.559 that's completely different from what we have on the web, 195 00:11:29.600 --> 00:11:31.840 where we just assume that all users are in the 196 00:11:31.879 --> 00:11:35.679 latest versions, but those over the air updates they fix 197 00:11:35.799 --> 00:11:41.360 this problem, right, But the complexity comes from the bureaucracy 198 00:11:41.360 --> 00:11:46.279 of getting approval from the play Store and the App 199 00:11:46.279 --> 00:11:50.440 store from Apple because from what I understand, the thing 200 00:11:50.480 --> 00:11:55.120 that they are trying to prevent is companies pushing code 201 00:11:55.120 --> 00:11:59.279 that didn't went through their official review process, right, So 202 00:11:59.320 --> 00:12:02.080 how do you make this all out? 203 00:12:02.720 --> 00:12:06.759 Yeah? Absolutely, well, I mean this is a this is 204 00:12:06.799 --> 00:12:09.200 a very deep subject. Of course, there's there's a lot 205 00:12:09.240 --> 00:12:15.000 of different factors here. One might ask, what what right 206 00:12:15.039 --> 00:12:18.120 do Google and Apple have to you know, review this 207 00:12:18.200 --> 00:12:20.759 in the first place, right, Like, and that's big, it's 208 00:12:20.759 --> 00:12:24.840 a big discussion. They're they're kind of gatekeeping this and 209 00:12:25.080 --> 00:12:28.320 can be very arbitrary and and they've even gotten in 210 00:12:28.360 --> 00:12:32.279 trouble for some of their practices around this. The other 211 00:12:32.320 --> 00:12:35.440 thing you could say is, well, okay, so this isn't 212 00:12:35.519 --> 00:12:38.519 native code. This is just like JavaScript that's getting uploaded. 213 00:12:38.559 --> 00:12:42.720 So it's really no different than in a browser loading 214 00:12:42.720 --> 00:12:45.000 a new website, right, like you can just jump to 215 00:12:45.039 --> 00:12:47.320 a new website. But Apple and Google seem to have 216 00:12:47.360 --> 00:12:53.240 different rules around browsers versus other apps, like they seem 217 00:12:53.279 --> 00:12:55.919 to really kind of differentiate between the two, and certainly 218 00:12:55.960 --> 00:13:00.840 they have a financial a vested financial interest in disallowing 219 00:13:00.879 --> 00:13:04.399 things that act like other app stores and Epic has 220 00:13:04.679 --> 00:13:08.480 like had these massive battles with Apple around we should 221 00:13:08.480 --> 00:13:10.600 be able to provide our own app store the inside 222 00:13:10.600 --> 00:13:15.639 of the iOS eco system, and so you just kind 223 00:13:15.639 --> 00:13:20.879 of keep going down this rabbit hole for now where 224 00:13:20.879 --> 00:13:22.720 we are is they allow it as long as you 225 00:13:22.759 --> 00:13:27.480 don't change the significantly change the like core functionality of 226 00:13:27.519 --> 00:13:32.360 the app, or introduce things that you know, like you know, 227 00:13:32.399 --> 00:13:38.159 get around the app store and rules. And the problem 228 00:13:38.399 --> 00:13:41.559 is that there's really not a lot preventing people from 229 00:13:41.600 --> 00:13:47.320 abusing this. So when it gets abused, not if, but 230 00:13:47.480 --> 00:13:50.480 when it gets abused in that kind of high profile 231 00:13:50.559 --> 00:13:54.440 way where someone ships over the air and update that 232 00:13:55.039 --> 00:14:00.679 like brings in something that Apple would consider egregious. Then 233 00:14:00.679 --> 00:14:03.159 there's probably gonna be a battle around this and they're 234 00:14:03.200 --> 00:14:07.080 gonna start saying you can't do this. So it's something 235 00:14:07.120 --> 00:14:11.240 that I'm keeping a very close eye on. It's like 236 00:14:11.759 --> 00:14:15.679 Evan Bacon from Expo correctly says that over there updates 237 00:14:15.759 --> 00:14:19.600 is one of reac Native's killer features. It's also, by 238 00:14:19.600 --> 00:14:23.440 the way, Ionic capacitors killer feature too, because you can 239 00:14:23.480 --> 00:14:28.919 do the same thing there. But we're always a little 240 00:14:28.960 --> 00:14:32.000 bit leery of like like over selling that just because 241 00:14:32.039 --> 00:14:34.799 Apple could come in and put the hammer down. If 242 00:14:34.799 --> 00:14:36.399 that happens, they're going to have a battle on their 243 00:14:36.440 --> 00:14:39.200 hand though, and they're already fighting some battles you know, 244 00:14:39.279 --> 00:14:43.360 in the EU and other places including the US. And 245 00:14:44.639 --> 00:14:47.679 so this is a whole podcast episode topic. I could 246 00:14:47.720 --> 00:14:49.600 go on forever about it, but it is. There's a 247 00:14:49.639 --> 00:14:54.080 lot more to this story, but it basically is like, yes, 248 00:14:54.200 --> 00:14:57.720 it's awesome, we use it. We try not to do 249 00:14:57.759 --> 00:15:00.399 it in such a way that like if Apple came in, 250 00:15:00.440 --> 00:15:03.480 they would get really mad at us, just because they 251 00:15:03.799 --> 00:15:08.000 unfortunately are the gatekeepers here and you know, don't don't 252 00:15:08.000 --> 00:15:11.120 rely on it forever, Like that could be problematic. Now 253 00:15:11.120 --> 00:15:13.759 there is obviously the other way for submitting updates, and 254 00:15:13.799 --> 00:15:16.279 we can always send in a new new build and then, 255 00:15:16.720 --> 00:15:20.279 you know, two weeks later, get a rejection that gives 256 00:15:20.279 --> 00:15:23.000 you no information about why it's rejected, and then have 257 00:15:23.000 --> 00:15:25.080 to guess on how to fix it. I'm not bitter 258 00:15:25.159 --> 00:15:26.879 at all. I'm sure you can't tell. 259 00:15:27.159 --> 00:15:29.639 No, not at all. I can I can see that 260 00:15:31.200 --> 00:15:32.360 I'm bitter for you, dude. 261 00:15:34.200 --> 00:15:37.480 I've been dealing with this for oh man, it's almost 262 00:15:37.559 --> 00:15:38.759 twenty twelve years now. 263 00:15:38.879 --> 00:15:48.360 So yeah, Well, although this was somewhat off topic, it's 264 00:15:48.360 --> 00:15:50.519 still on topic, right because. 265 00:15:50.240 --> 00:15:52.559 Since we're discussing differences between. 266 00:15:52.159 --> 00:15:54.639 Capacitor and React Native, one of the things that we 267 00:15:54.679 --> 00:15:58.080 could discuss is this over their functionality, and it seems 268 00:15:58.120 --> 00:16:03.600 that it's not unique feature of either of both. Right, 269 00:16:03.679 --> 00:16:06.519 you can have this with React Native. You could have 270 00:16:06.600 --> 00:16:08.320 this with Capasitor as well. 271 00:16:10.720 --> 00:16:12.240 I'm sorry, can you ask that question again? 272 00:16:13.039 --> 00:16:16.720 Yeah, the over the air updates, they could be done 273 00:16:16.879 --> 00:16:20.639 either with React Native or Capacitor. So this is one 274 00:16:20.639 --> 00:16:23.600 of the things that is not really a difference between them. 275 00:16:23.720 --> 00:16:25.960 Maybe the way that it's done can be different, but 276 00:16:26.159 --> 00:16:27.519 they both supported. 277 00:16:27.759 --> 00:16:30.600 Yeah, yeah, exactly, and this is the benefit of both 278 00:16:30.639 --> 00:16:34.039 of them using a JavaScript bundle because you can just 279 00:16:34.039 --> 00:16:38.320 ship a new JavaScript bundle. Now today most React native 280 00:16:38.320 --> 00:16:43.879 apps actually ship Hermes bytecode bundle, which is I mean, 281 00:16:43.919 --> 00:16:47.559 you've probably heard of like web assembly and web assembly has. 282 00:16:49.200 --> 00:16:52.399 You know, you can like basically ship what would be 283 00:16:52.559 --> 00:16:58.120 sort of JavaScript, but it's in a bite byte code format. Similar. 284 00:16:58.200 --> 00:17:02.679 I guess if In from the Hermes team was listening 285 00:17:02.679 --> 00:17:04.319 to this, he would cringe because he knows all the 286 00:17:04.359 --> 00:17:07.920 reasons that that's wrong. But that's basically how I think 287 00:17:07.960 --> 00:17:10.599 about it is that it's in those terms, but it's 288 00:17:10.640 --> 00:17:13.079 still kind of JavaScript under the hood, you know, it 289 00:17:13.160 --> 00:17:16.359 still has the same kind of characteristics and whatnot. Under 290 00:17:16.359 --> 00:17:20.200 the hood, it's just been compiled from JavaScript. So it's 291 00:17:20.240 --> 00:17:22.200 a bundle, it's a file. It's a single file. Like 292 00:17:22.680 --> 00:17:24.960 in most cases and the vast majority cases, it's a 293 00:17:24.960 --> 00:17:27.559 one file. You literally just put it up on an endpoint, 294 00:17:27.559 --> 00:17:29.680 and your app downloads it just like it would download 295 00:17:29.720 --> 00:17:32.559 any file, replaces it or puts it in a certain spot, 296 00:17:32.759 --> 00:17:35.680 and then starts using that bundle reloads, you know, like 297 00:17:36.039 --> 00:17:40.160 it starts using that bundle instead. So that's essentially how 298 00:17:40.160 --> 00:17:42.240 it works. 299 00:17:44.160 --> 00:17:49.839 Gotcha, Okay, So let's go into some of the differences 300 00:17:49.839 --> 00:17:54.720 between it. What would you say, especially after your talk 301 00:17:54.839 --> 00:17:59.200 with someone from the Ionic company, what would you say 302 00:17:59.240 --> 00:18:03.839 are the most interesting differences between you React Native and 303 00:18:04.920 --> 00:18:08.039 Capacitor or just the entire ironic framework. 304 00:18:09.200 --> 00:18:12.960 What I like to do in these situations is really 305 00:18:13.079 --> 00:18:16.279 kind of help the audience understand at what level we 306 00:18:16.359 --> 00:18:19.680 are comparing them, because if we're simply comparing them from 307 00:18:19.720 --> 00:18:25.000 a technical standpoint, like what you can achieve standpoint, then 308 00:18:25.039 --> 00:18:28.079 you might go one direction. But I like to look 309 00:18:28.119 --> 00:18:32.559 at technologies holistically. There's a lot more to a technology 310 00:18:32.599 --> 00:18:36.599 than just what can you achieve with what ease with 311 00:18:36.640 --> 00:18:39.359 what developer experience. Certainly, those are a big part of it, 312 00:18:39.519 --> 00:18:43.480 and you know that's something I've searched for my entire careers, 313 00:18:43.720 --> 00:18:49.000 better solutions for doing those things. However, these apps are 314 00:18:49.240 --> 00:18:54.440 usually for businesses, and these businesses have constraints, and these 315 00:18:54.440 --> 00:18:59.960 constraints matter. So when you look at things like Native 316 00:19:00.319 --> 00:19:07.039 versus React Native, or PWA's versus Mobile at All, these 317 00:19:07.240 --> 00:19:10.200 all have these questions wrapped up in them around the 318 00:19:10.200 --> 00:19:15.119 business parts of it, and Ionic and React Native both 319 00:19:16.079 --> 00:19:20.759 approach this problem very pragmatically. They come at it like, hey, look, 320 00:19:21.519 --> 00:19:25.880 we all want good experiences, but we also understand that 321 00:19:25.920 --> 00:19:27.839 we have constraints and we want to be able to 322 00:19:27.839 --> 00:19:32.839 ship quickly with technologies that we all know and that 323 00:19:32.880 --> 00:19:37.880 we can share across multiple teams. We want to enable 324 00:19:38.599 --> 00:19:43.240 the biggest cohort of developers, which is web to build 325 00:19:43.359 --> 00:19:47.039 and deploy mobile apps. So they both really approach that 326 00:19:47.960 --> 00:19:51.960 from that standpoint. Now where they differ is where they 327 00:19:51.960 --> 00:19:54.720 make these trade offs and what they're willing to trade off. 328 00:19:55.319 --> 00:19:58.880 So I would see it in some ways as there's 329 00:19:58.920 --> 00:20:02.960 different levels of of abstraction here. So obviously you can 330 00:20:03.240 --> 00:20:06.160 build a native app. You can even go lower and 331 00:20:06.200 --> 00:20:09.599 than a native app like like you know, you're you're 332 00:20:09.640 --> 00:20:12.559 you're just like writing like super low level like c 333 00:20:12.799 --> 00:20:15.119 or whatever. But you can you can write what you 334 00:20:15.160 --> 00:20:18.599 know Swift in Cotland, you can build in the native SDKs, 335 00:20:19.680 --> 00:20:24.799 and that gives you some benefits of like being able 336 00:20:24.880 --> 00:20:29.640 to customize and really fine tune at that level your apps. 337 00:20:30.079 --> 00:20:33.759 But the business problem is that your web developers are 338 00:20:33.759 --> 00:20:37.359 a little bit intimidated by like hey, like like hey, 339 00:20:37.759 --> 00:20:41.279 build me, build me a mobile app. In both Swift 340 00:20:41.319 --> 00:20:45.519 and Cotland by the way. You know, this isn't like 341 00:20:45.559 --> 00:20:48.599 a React developer who's just done JavaScript, you know, and Typeescript, 342 00:20:48.880 --> 00:20:50.480 Like they're going to have to learn a lot of 343 00:20:50.519 --> 00:20:53.880 stuff to do that. Additionally, if you want to be like, Okay, 344 00:20:53.920 --> 00:20:56.839 I'm going to build out my team of iOS developers 345 00:20:56.839 --> 00:20:58.839 and I'm going to build up my team of Android developers. 346 00:20:59.279 --> 00:21:04.200 Now now you have three teams, three different subcultures will emerge. 347 00:21:04.240 --> 00:21:08.200 I've seen it every time, like they're working together all 348 00:21:08.240 --> 00:21:11.119 the time. And anytime that you have teams, I mean 349 00:21:11.200 --> 00:21:13.519 my own team, like you know, we're thirty some people. 350 00:21:13.559 --> 00:21:15.720 We now only do React Native, but at the time 351 00:21:16.160 --> 00:21:20.000 when we started, we did Elixir, we did React Web, 352 00:21:20.519 --> 00:21:23.680 React Native, we did a few other things too, And 353 00:21:24.880 --> 00:21:28.319 those subcultures would emerge. They would hang out together, they 354 00:21:28.359 --> 00:21:30.960 would talk together, they would like share knowledge together, but 355 00:21:30.960 --> 00:21:34.279 they wouldn't do it across their teams. So now you 356 00:21:34.319 --> 00:21:37.799 have three different I remember talking to Square Space for example, 357 00:21:37.799 --> 00:21:41.200 and Square Space had like in their office they had 358 00:21:41.240 --> 00:21:43.960 I think in New York, they had like a pod 359 00:21:44.359 --> 00:21:46.519 for their Android developers. They had a pod for their 360 00:21:46.519 --> 00:21:49.440 iOS developers, they had a pod, huge pod for their 361 00:21:49.640 --> 00:21:53.519 Web developers. When they went to React Native, and this 362 00:21:53.559 --> 00:21:55.359 would have been the same if they went to Capacitor. 363 00:21:55.759 --> 00:22:00.000 They were able to re architect their literally their office, 364 00:22:00.160 --> 00:22:02.920 like like remodel their office, to combine those into a 365 00:22:03.000 --> 00:22:05.640 single team that was divided up in different ways, and 366 00:22:05.680 --> 00:22:08.000 they could all talk together, they can all help each other, 367 00:22:08.039 --> 00:22:12.680 et cetera. And so when you're talking about the trade 368 00:22:12.680 --> 00:22:15.640 offs that we're talking that we're making here, this is 369 00:22:15.680 --> 00:22:20.480 like one of the key things about Ionic. And I'm 370 00:22:20.480 --> 00:22:23.680 gonna say, whenever I say Ionic and Capacitor, just assume 371 00:22:23.680 --> 00:22:26.480 I'm talking about the whole thing. I don't want to 372 00:22:26.519 --> 00:22:28.880 have to I'll just say Capacitor. I'll just I'll say capastor, 373 00:22:28.880 --> 00:22:30.720 even though that's like one chunk of it. All right, 374 00:22:30.799 --> 00:22:35.480 So anytime you're talking about Capacitor and reac natives, that's 375 00:22:35.599 --> 00:22:39.319 the major benefit. You bring in all the knowledge of 376 00:22:39.359 --> 00:22:42.640 your web developers, all the a lot of the tooling, 377 00:22:42.759 --> 00:22:44.240 not all of it, but you bring in a lot 378 00:22:44.240 --> 00:22:47.240 of the tooling. You bring You can share code, like 379 00:22:47.319 --> 00:22:52.119 if you have a validation function you know, something like that, 380 00:22:52.279 --> 00:22:54.559 or even just a library that you use you can 381 00:22:54.640 --> 00:22:57.640 use across the board. You can share types if you 382 00:22:57.720 --> 00:23:01.319 use Typescript, like you can say, Okay, you know I 383 00:23:01.359 --> 00:23:04.920 want to use I'm consuming this API and it has 384 00:23:04.960 --> 00:23:07.720 this type. Okay, well, our iOS app, our Android app, 385 00:23:07.720 --> 00:23:12.119 and our web app all share the same types, and 386 00:23:12.160 --> 00:23:14.519 you can kind of go from there. And every time 387 00:23:14.559 --> 00:23:20.400 I see this happening at any company, it's incredibly striking 388 00:23:20.640 --> 00:23:26.039 how compelling that story is. It's the business case of it, 389 00:23:26.119 --> 00:23:29.240 and it's the organization, it's the human element that really 390 00:23:29.279 --> 00:23:33.680 really changes there. And then there's a speed element as well, 391 00:23:33.759 --> 00:23:40.559 because you're building two to three sometimes plus platforms at 392 00:23:40.559 --> 00:23:42.519 a time rather than rebuilding it over and over. And 393 00:23:42.559 --> 00:23:44.640 I've done the rebuilding over and over. I've done the web, 394 00:23:44.680 --> 00:23:46.319 and then now we have to build an iOS app. 395 00:23:46.359 --> 00:23:49.319 And now turns out people actually want androids. Okay, we 396 00:23:49.359 --> 00:23:52.240 want Android, let's put it. And you're having to build 397 00:23:52.240 --> 00:23:54.119 it over and over and over and solve the same 398 00:23:54.160 --> 00:23:57.599 problems over and over and over, and it just feels 399 00:23:57.640 --> 00:23:59.079 like a waste of time, Like why are we doing 400 00:23:59.119 --> 00:24:02.160 this over and over? Like build it once or at 401 00:24:02.200 --> 00:24:05.319