The Value of Building Real-World Apps in React Native

[00:00 - 00:08] Broadly speaking, apps are categorized into three types. First comes are very familiar in the most popular two, what we like to call the native apps.

[00:09 - 00:23] Now as the name suggests, these apps are built on native platforms like Java or Kotlin for Android, and Objective-C or Swift for iOS. The SDKs and the IDs for developing on these platforms are freely available from the OEMs themselves.

[00:24 - 00:30] Apple has Xcode and Android has built on Android Studio by Google. One comes are PWA's or the Progressive web apps.

[00:31 - 00:38] Not typically these are websites that can be bookmarked to home screens of the respective platforms. They are made responsive to Kated to the mobile device resolutions.

[00:39 - 00:43] And finally comes our hybrid types. Now frankly there are multiple options here.

[00:44 - 00:51] One option is to build a web application and run it inside a web view container . These are built on web technologies like HTML, CSS and JavaScript.

[00:52 - 00:59] And they render on web views. I only can Cordova are examples of such platforms.

[01:00 - 01:14] Another category is that of applications that render on the native views providing some kind of a technology bridge that enables developers to do that without writing any native code. These are generally written in a common language like JavaScript or Dust.

[01:15 - 01:31] So when finally compiled and packed as apps, these run on native views providing a first-class native experience and are also deployable to multiple platforms, mostly promoted as write once deploy multiple times platforms. Reactive falls under this hybrid category of apps.

[01:32 - 01:36] So how does it differ from these other platforms? Now this is the important part.

[01:37 - 01:44] Reactive renders everything on the UI thread of the app in native while handling the interactions on the JavaScript thread. So what does that mean?

[01:45 - 01:56] It means a reactive app will be responsive and deliver a native-like performance only if the JavaScript thread is well optimized. That is, in simple terms, kept free as much as possible for rendering.

[01:57 - 02:19] If that is confusing to you, don't worry about it just yet. This may sound like a lot, but as you go through the modules of this course, you will see that if you can just follow some thumb rules and best practices along with an app architecture that clearly segregates responsibility, you will be amazed to the content of the app complexity of apps that you can build with React Native.

[02:20 - 02:28] Now the question that comes a lot across many forums too is that is it worth investing in React Native? After all, this is a wrapper above the native and can never be as fast, right?

[02:29 - 02:36] Well, I do not agree with that. I like to approach this question differently and the answer as usual is not straightforward.

[02:37 - 02:55] The answer for me depends upon what are you looking to build for. If for a moment you could keep this perspective out of the head that React Native apps have performance issues and I believe they are mostly because they are poorly written, will it then make sense to build apps in React Native or Flutter or maybe even Xam arin?

[02:56 - 03:06] Remember, React Native renders everything in Native so it is not like a web view. The experience that end users of your app get is that of a first-class citizen.

[03:07 - 03:18] Let us do one small exercise which can help clear some of the bias towards not just React Native but also towards other cross-platform tools like it. Let us look at these apps, some of which are in React Native obviously.

[03:19 - 03:27] Feel free to download these apps, use them for a minute and then try guessing as to which category to the fall out of the above three. So let us start with Discord.

[03:28 - 03:35] That is a pretty decent load time. Let us start loading more messages.

[03:36 - 03:48] A little more, as you can see the transition between loading the messages and displaying them is not jerky. So let us scroll really fast.

[03:49 - 03:56] Seems to be doing a pretty good job. Let us go to the side menu.

[03:57 - 04:14] It is a list and we have tabs at the bottom. It seems to be performing pretty well, right?

[04:15 - 04:20] So next up is this cost 24 app. It is an app that allows you to buy and sell second-hand used cards.

[04:21 - 04:26] So as we saw the loading time was pretty good, right? Let me just kill this whole thing and then start again.

[04:27 - 04:32] Yeah, pretty decent. It has a gallery to start with.

[04:33 - 04:43] It seems to be doing well. Okay, let me just log in to this and come back to the app.

[04:44 - 04:50] So it has a nice little animation going on right here, recent OTP. Login.

[04:51 - 04:53] Let us connect WhatsApp. Okay, later.

[04:54 - 04:56] That was a pop-up. And it displays cards like this.

[04:57 - 05:07] So it is trying to render how many O5 images and the UI seems to be pretty heavy. That is a lot of cards.

[05:08 - 05:16] Let us try and load more cards to it and see how it performs. Hmm, it seems to be pretty smooth.

[05:17 - 05:22] It has tabs at the bottom. We will look at it in a few seconds.

[05:23 - 05:34] But let us look at how does it perform when we scroll really fast. Yeah, it seems to be doing a good job.

[05:35 - 05:50] Okay, so these are the other tabs and there seems to be another list here. It is 29,000 at the top.

[05:51 - 05:55] So overall, seems to be doing a good job. I am not going to try Facebook.

[05:56 - 05:59] I think we have all used that. So let us move on to Amazon.

[06:00 - 06:06] Okay, that is a pretty decent load time. We have all used Amazon too, I suppose.

[06:07 - 06:15] It has a home page of pretty fixed length. But it seems to be doing pretty well.

[06:16 - 06:17] Scroll really fast. That is good.

[06:18 - 06:24] Let us move on to some other tab. And yeah.

[06:25 - 06:36] So Amazon is a very widely used app. Although the UI does not really feel like native, but what do you say?

[06:37 - 06:39] Is it a native app? Is it a hybrid app?

[06:40 - 06:43] Is it a web view? What do you think?

[06:44 - 06:56] The transitions definitely seem native, but I will let you guys decide. Okay, and at last, let us see Airbnb.

[06:57 - 07:07] That is a pretty decent launch time. Airbnb, I think, has one of the best user experiences, really nice transitions.

[07:08 - 07:13] Let us try and search for some place to go. I am trying to be adventurers.

[07:14 - 07:18] See Iceland, what are you looking for? That was a really great transition, right?

[07:19 - 07:24] Finding a place to stay. Calendars, let us do next.

[07:25 - 07:36] Adults to search. So it has a map at the top and list of properties at the bottom.

[07:37 - 07:41] Let us try and load a lot of properties and see how it performs. Wow.

[07:42 - 07:48] It seems to be doing really good, right? That is nice.

[07:49 - 07:55] So let us move to the map view. I am just trying to zoom in, zoom out.

[07:56 - 08:04] Let us see what happens when you tap on these. That was again a really nice transition.

[08:05 - 08:10] Airbnb does a really good job with that app, right? Here are the other tabs.

[08:11 - 08:20] I think the Explore tab is one of the heaviest ones. Doing a lot of work.

[08:21 - 08:35] Okay. There are a couple more that I have mentioned in the course, like the Walmart Cross-3 and Tableau that I have not really tried here because they are not really available and you need accounts to do that.

[08:36 - 08:47] So feel free to download those and try it yourself. And if you are ready, let us look at the answers.

[08:48 - 08:51] Did that list surprise you? Airbnb, Facebook and native apps.

[08:52 - 09:06] Amazon is a hybrid app and the rest of the apps that you saw are even tried like Discord, Walmart, Cross-3, Cast24, Shopify, Tableau, all of them are React Native Apps. A disclaimer, Discord iOS is only on React Native.

[09:07 - 09:15] Discord Android is native. Facebook is native, although I think the Marketplace tab is on React Native.

[09:16 - 09:27] Amazon is a hybrid app. I do my best to understand what they do is they launch web views and they use the native transitions to make it feel more like an app.

[09:28 - 09:40] So I hope that helps create some of the bias around performance. It all depends on how could you write the app, how well the app is structured and how you do really design the user experience of the app.

[09:41 - 09:53] Now since we are at it, let's also talk about the elephant in the room, the Airbnb articles. There were a series of articles by Airbnb that became quite unpopular where they had called out on sunsetting React Native for the app.

[09:54 - 10:07] They had even published a detailed analysis in what was a five-part series about the pros, cons and their experience with it. Now I would recommend reading those articles yourself and I would also recommend the readers take those with a pinch of salt.

[10:08 - 10:19] Firstly it was still 2016 when they started off with React Native. Also they had not built the app on React Native but were using it to build only parts of it like a brownfield approach.

[10:20 - 10:33] So they relied heavily on the bridge for communicating and creating, which is I wouldn't say the weakest but comparatively the slowest link in React Native World. And to be fair, React Native was itself quite new at the time and had a very frequent update.

[10:34 - 10:55] React has come a long way since then and React Native 2 has had some major upgrades, especially with the lean core, firmness support and the all new one-stop debugger Flipper. There is also a major re-architecture happening to how React Native interacts with native modules, where they are doing away with the bridge and substituting it with a new component called JSI or the JavaScript interface.

[10:56 - 11:06] This element will also serve as an enabler for new fabric and turbo modules. With this new architecture, developers will be able to use any JavaScript engine and not bound to JavaScript core.

[11:07 - 11:25] We will have direct control over native modules and the application will use them only when required instead of starting all of them at the start. Then there is Fabric which is a re-architecture of the UI manager and is expected to transform the rendering layer by eliminating the need in bridges.

[11:26 - 11:37] These are mostly under the hood transformations that are happening. Moving towards the end of the series of the Airbnb articles, part 4, it also mentions some interesting observations of an internal survey of its developers.

[11:38 - 11:53] 60% would describe their experience as amazing and 63% of the engineers would have chosen React Native again given a chance and 74% would consider React Native for a new project. I hope this little exercise helps clear some of the bias in the mind.

[11:54 - 12:04] The idea is not to sell React Native but I want the readers to approach this course with an open mind so that they can learn React Native the right way and we will see that React Native can deliver what we want to build with it.