So there are just three bottoms.

I'll use my finger and I just press space bar s o Our Facebook on market placed him and I mostly focused on performance recently Before joining marketplace in Seattle.

I worked in Facebook UK, and I worked on young package manager.

Anyone loves packages.

And before that, I worked on react native.

So I'm a little bit biased towards what framework to choose when you build a mobile app.

So today I'm going to talk.

What I have been working on for the last year actually making marketplace load faster just before we start.

Anyone is familiar with react Nice.

Ah, how about react native?

Much less so.

This talk is I made it so that you could actually take it home.

Some ideas how to make your application faster, specifically react native, but it's also a place to react.

And actually, if you think about it, it applies to any other application.

So first of all, what is marketplace?

Uh, anyone used market place before, so it's a platform.

It's actually a tab inside Facebook application.

Anyone knows about Facebook, so it's a social network and there are tabs in it, and marketplace is one of the tabs.

It's a place where you can buy and sell things to people in your community.

So Marketplace started in 2016 and the two cast to build to build the first version for us just six months, and actually we tested it in Hawaii, so it means that the stock sort of brings it back home.

Then it took us just two months to build the Android version, and this is actually quite rare for applications off this size in company off this thing size because it's usually like six months for us, then another six months android.

But because we're used JavaScript and 90% of the code was reused, we were able to do just in two months.

So what officially launched in October 2016 to mainland U.

S.

And some other countries, and now it's global and there are more than 800 million people using this application every month, and marketplace is more than just buying and selling items to people around you.

It's also bowled by in a car finding a place to live are some daily deals, some business opportunities.

Quite a lot.

The team is quite large.

It's more than 100 engineers working on the same react native code base.

So market when it plays, grew from 0 to 800 million in just about two years and the two team group as well.

So we need to hire more people, and we need to make the application nice to work with and react.

Native played a big role in how to make a good, ah developer experience so anyone is familiar with hot reloading.

Anyone knows the difference between live reloading and hot reloading.

All right, not everyone so lively.

Loaded is when you develop a website, you change your code.

Type something, save it, and then your browser or application refreshes with the latest code, and you see the changes.

Hot reloading is when you make your changes on your laptop like here, I make some cold, some co changes to my react component.

I press save, and then it goes to the device, and only the components that actually changed get rear ended.

As usual, React re renders components at its pleasure, and this situation is quite fast because I'm just changing called little bit.

And here we go.

And another thing that you probably don't know at Facebook.

We don't like building the Facebook application.

Well, love the application, but building it is not fun because it takes 30 minutes to have a new binary on your device because we have millions of files, something good about react.

Native.

As I mentioned, 90% of the code or even more is written in JavaScript, and we don't need to change the native coat that often.

So what we can do is we can grab the latest binary from a build server, install it on the device and then build the JavaScript file from the source code.

A semester effect.

We have integration with our I.

D.

That just grabs this binary and does everything with just one single click.

Another big deal is hiring people.

As I told you, Marketplace team has grown a lot to build a lot of features.

And at Facebook we have a joke that it's really hard to find andro developers because we already hired every under a developer who wanted to work for us.

So we need we need.

Ah, hi, Incidently.

There are more JavaScript developers around Still hard toe.

Hire them but possible.

Less than 5% of people working on marketplace are actually specializing in native platforms.

It doesn't mean that we don't use their skills.

We just leverage their ability to work on something complex, platform specific.

All the other people are quite quick toe adopt to the JavaScript code base and become quite proficient.

Building features rectum wrecked natives are also very popular.

If you can't get help stars, which I do periodically, there it probably in top 10 frameworks on get up by star count.

Of course, it doesn't matter.

But if you look at the number of contributors individual people who contribute to the core base react native is one of the top projects and also it built a community around it.

What I'm saying is that when we hire people from outside the work on marketplace, those people are very likely already familiar with our technology technology, and it means step.

They can be productive straightaway.

So I just described wreck native JavaScript frameworks that allowed us to grow the team fost But what about jealous crypt and being building an application that works fast.

JavaScript has a lot of things that people, people say, that it's not good for performance.

It's garbage collected.

Anyone else has ideas.

Yes, dynamic typing.

I'm just kidding actually have.

It's freezing here.

It has model system that's not really mature enough.

We have a different model system.

It's single thread it.

How do you build a U ie when single thread it, But thankfully, we actually have a synchronous Gordon Co.

Routines.

But anyway, a lot of people are are biased about JavaScript on.

There are reasons.

So Facebook occasionally surveys people who are using their applications.

And there is a direct correlation between how fast the application loads and how satisfied are people with the application and performance work that we did.

A marketplace in the last year shows that people engage more with application if it loads faster for every 100 milliseconds, there is a certain percent off improvement off how people engage with marketplace.

And I'm not talking about just looking at the screen and I'm going away.

I'm actually go.

I'm actually meaning that it sticks to people if something loads fast.

So Facebook Application leadership spent some time researching how fussed application should be for people to feel comfortable with it.

And in the last 40 years there have been a lot off researchers, and the consensus is that if the application, if a computer system refreshes the screen within one second, then people perceive that it's fast.

So that was the goal for all the tabs of Facebook.

How do we make them fast, as in load within one second?

And on a slow device like this?

Samsung J five Prime, which is not the nicest device that around, but surprisingly, it's one of the most popular devices in the world.

So we started with 3.5 seconds for 75% off people loaded marketplace.

And when we heard about the goal, we thought, Well, it's a bit humorous.

70% improvement.

Are you serious?

A year bossed and turns out they believed in us and they were serious.

So we're getting closer.

So what I'm going to talk next about.

It's how we achieve that.

And they tried to focus on things that you people working on, react and react native could actually bring it home and reuse it.

And even though many people hold JavaScript as a liability off react native.

I think it's on the contrary.

We have many years of experience optimizing websites.

And if you haven't seen this talk from Ilia Grigor IQ from six years ago, pretty much everything applies to optimize and react native so similar to optimizing websites or any other application, we start with measuring all different substance.

How thinks are loading.

Then we find the slow things and we make a decision.

It is something that we really need at the start up that we call the critical path.

Or is it something?

And if it's not, let's just do it later.

And if it is, let's do it in parallel with something else.

So what's another cool thing about JavaScript and ability to debug your applications?

Is that jealous crap can run on, menu thinks, And there is a feature called the Bug JavaScript remotely on React native and not a lot of people realize that it's actually sending the JavaScript application off.

React native to the browser, it executes their full application, builds the component tree and then sends a signal to the device telling what needs to be rendered in the native code so full JavaScript is for real running in the browser, and it means that we have access to the development tools that are common with browsers.

For example, in chrome I can click performance tab, I can click record and get some samples, and then it has a very good integration with react and wreck.

Native is running ragged, Jess inside it so we actually have a very nice flame chart off all the components that are loading, and we can see which components are slow or which components are unnecessary.

And we can make some assumptions like Let's let's not have this component all that.

Let's optimize that first.

Now you have to take this with a grain of salt because we're running this on the desktop browser on your powerful MacBook.

Probably, uh, and it's a V eight JavaScript engine on the rial device.

It will be a Java script corps that's runs on Android on us, and it's completely different picture.

But if you really want to have the same flame chart, there is a tool called sis trays that just collects the traces, and it integrates with react native and you can see how your components work on the real device.

So measuring performance is actually an art We could be talking.

Have a separate talk about how to measure performance on a group of people on a large group of people.

How about the distributions between different people?

What kindof category of devices?

Success.

But I think the 1st 2 tools that I showed you could be a good start.

How to start improving your performance.

So now that's actually look at what thinks helped us to improve.

React native.

So this one is nobody s one.

I'm pretty sure everyone who is running a mobile application should be running their network request in parallel.

When thinks a loading Because you're doing stuff on the server and stuff on the client, they shouldn't be interconnected.

However, there is a cave it.

I know some people are using graphical here.

Who likes craft you?

Yeah.

So with mobile and graft girl and javascript, there is a cave it because usually people using react native, they use JavaScript.

Implementation of graft.

For those who don't know what draft bill is, it's It's a concept that allows your components to define what they need and It means that the query for the data is based on the components.

So you need a graphical engine that would inspect the components, build a query, and then send this query.

And if it isn't JavaScript, you see the blue line.

We need to start up trouble.

Script am.

We need to start up.

React native.

We need to start the bundle.

We need to find the Graff, kill JavaScript implementation and then send the request.

What we should be doing is running it in parallel.

So if you're using a rag native or a very similar framework and the graft trail, you should be questioning How can I make the request in parallel at Facebook, we have a very thin layer implemented in native coat that is capable of sending the request from Java or from objective.

That's how we achieve that.

Also, I brought you some good news.

If you update two latest react native, you will know that it has the latest JavaScript core engine.

For those who don't know javascript, core is the JavaScript engine that react native is using.

The problem is that it hasn't been updated for two years, and it has been 32 bits, and now we have the latest one that's 64 bids.

It's not only good for library compatibility, but also it comes with two years off optimization, sze and performance twigs.

It's one of the easiest things that that you can actually do to improve your egg native performance.

Oh, this one is really cool, but Legal Department didn't allow me to mention anything about it.

Just imagine unicorns exploding with jelly beans moving up.

Now let's talk about what I can do to the jealous kid bundle.

But default all react.

Native surfaces in our application are compelled in one Java script file.

This is a very common technique.

Anyone using the Web back pretty much everyone.

So it compiles all the JavaScript in one JavaScript file.

It gets zipped and sent over the network to the device.

With Jack Native, it's a little bit different.

We want to optimize it differently.

The problem is that this JavaScript on the rag native is actually part of the application, and if we want to load any react native screen, we need to read this file.

And if it's large, like sex, six megabytes or maybe 20 megabytes it's quite heavy for Yo.

It will take time to load.

So ideally, we want to split it into two like weapon can do.

You can have a very small JavaScript bundle for the your initial screen, and then you can load other things later.

For example, on click.

Or maybe it's a different surface.

Now the trick is that, actually for react native, we don't need to do that.

There is a feature called Ram Bundles.

Its offensive name means random access memory, but what it actually does, it compels every JavaScript model.