What Happens When You Build Your App

Rate this content
Bookmark
Slides

How do you start your app on your simulator in the morning? Do you always run react-native run-ios? If so, you might be wasting a lot of time. Let’s check out together what a React Native app looks like under the hood. It will help us to be more efficient on a daily basis. We’ll identify the shortest steps to execute daily actions, like starting our apps as fast as possible (no more unnecessary compilations of native modules!), or dealing with pesky red errors that metro throws at us.

This talk has been presented at React Advanced 2022, check out the latest edition of this React Conference.

FAQ

Charlotte is a React Native Tech Lead at BAM.

The main topic was diving deep inside React Native applications to understand what happens when you build them and how to be more efficient on a daily basis.

Charlotte used to kill everything, including her app, simulator, and Metro server, before relaunching everything from scratch, which wasted a lot of time.

React Native core components are used instead of HTML elements. For example, instead of using divs and spans, React Native uses components like buttons and text, which are then translated into native Android and iOS components.

Metro is a JavaScript bundler for React Native, similar to Webpack. It bundles JavaScript into a single file called the bundle, which React Native then uses.

The bridge is a queue where JavaScript and native code exchange JSON messages, allowing them to communicate with each other.

Instead of running 'React Native Run iOS' every day, you should start a Metro server by running 'react native start', launch your simulator, and then click on your app in the simulator to launch it.

It's important to run 'React Native Run iOS' occasionally to ensure that your app builds correctly and to avoid spending hours debugging when you need to deliver a new version to the stores.

You can test your app on a different simulator without recompiling the native code by using 'ADB install' on Android or 'Run Without Building' in Xcode for iOS.

If you encounter a red error screen related to a missing library, you should run 'yarn install' to install the JavaScript part and 'pod install' followed by 'React Native run iOS' to install and compile the native part.

Charlotte Isambert
Charlotte Isambert
20 min
24 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk dives deep into React Native development, exploring the development process, JavaScript-native communication, and app deployment. It highlights the app building process, the React Native Run iOS command, and development gestures for efficient execution. The Talk also emphasizes the recommended process for starting and testing your app, as well as handling the 'red screen of death' error by installing missing libraries and understanding the role of the UI manager in creating native views.

1. Introduction to React Native Development

Short description:

Hi everyone, I'm Charlotte, a React Native Tech Lead at BAM. Today, we'll dive deep into your application, understand what happens when you build it, and learn how to be more efficient. Let me share a story. One day, I encountered a big error and didn't know how to solve it. I used to kill everything and start from scratch, wasting time. My colleague advised me to understand what's happening inside the black box. That's what we'll do today. A quick reminder: React Native uses core components instead of HTML elements. Let's start!

Hi everyone, I'm super excited to be talking to you at React Advanced London. I'm Charlotte, I'm a React Native Tech Lead at BAM, and today we'll dive deep inside your application. We will study the inside of your app and what happens when you build it. And then we will see how we can use this information to be more efficient on a daily basis. But let me tell you a short story before.

One day I was working at my desk and one big red error appeared on my screen. The kind of error that I didn't understand and I didn't know how to solve. This day I did what I used to do every time back then to fix it. I killed everything. My app, my simulator, maybe even my metro server. And after that second step, I relaunched everything from scratch, brand new. I ran Yang install, Pod install. I rebuilt my whole app. I didn't understand what was happening inside my simulator. So I wasn't able to identify what piece of the puzzle was failing. So I started everything again. And it worked. But it was wasting a lot of time. And this day, one of my colleagues passed by and saw me killing everything without any pity. And she advised me to try to understand what was happening inside this black box. So that's what I did. And that's what we are going to do today.

One quick reminder before we start. For the ones of you who are working on the web, what you need to know about React Native is that instead of using HTML elements like divs and spans, we are going to use React Native core components, like buttons and text. And from those components, React Native is going to ask the native to create the associated Android and iOS native components. Okay. Let's start. This is a view of a React Native application in our development environment. There are two parts in this schema, a JavaScript part and a native part. On the JavaScript side, we have some code.

2. React Native Development Process

Short description:

We have JS, JSX, and TypeScript code, which will be transferred into JavaScript by Babel. Mitro, the JavaScript bundler, will bundle the JavaScript into a single file called the bundle. On the Native side, we have Swift and Objective-C on iOS, and Java and Kotlin on Android. The Native code needs to be compiled, producing an executable IPA on iOS and APK on Android. A React Native application is a native application that instantiates a JavaScript engine to compile and execute the JavaScript bundle, allowing communication between the JavaScript and native worlds.

We have JS, JSX, but also TypeScript code. This code will be transferred into JavaScript by Babel. The JSX will be transferred into JS and the JS will be transferred into an older JS without any of the new features old machines can't understand. Then we have Mitro. Mitro is a JavaScript bundler, the mobile equivalent of Webpack. It will bundle the JavaScript into a single file that's called the bundle. And React Native will only deal with this single file. If you make some changes in your JavaScript code, Mitro will aggregate those changes to the bundle and refresh your application on the fly. That's about it for the JS.

Now, let's take a look at the Native part. On the Native side, we have some Native code, either Swift and Objective-C on iOS, and Java and Kotlin on Android. If you open your app in your IDE, you will see an Android and an iOS folder. And in this iOS directory, you've got everything you need to create an iOS application. If you are building one in Swift, you would, in fact, be working within this directory.

Now, this Native code needs to be compiled, and this compilation process is going to produce an executable, an application, IPA on iOS, APK on Android. These are native applications that we will be able to install on our phone. Those two applications, the bundle and the IPA, will allow us to build our React Native application. Let's take a closer look at them. This is the inside of a React Native application. It's actually built from the IPA that was executed. A React Native application, it's really just a native application that will instantiate a JavaScript engine which will compile and execute the JavaScript bundle. The JavaScript world will be able to communicate with the native world. This goes a little bit like this. Imagine that we have this simple component rendering a button with a special title. First, the JavaScript will render his button on the screen. To do this, he will be giving instructions to the native to render the equivalent native component. So he goes, please native, could you render this button for me? And the native goes, of course. Oh, here you go. The user just pressed it. Maybe you should trigger this on press callback of yours.