Video details

The Hidden Features from V8 to Boost Your React Native Apps | Kudo Chien | App.js Conf 2022

React Native

Benefiting from JSI abstraction, nowadays, we can have different JavaScript runtimes by developers' choices. Many references recommend using Hermes for TTI (Time-To-Interactive) performance gain. On the other hand, V8, another famous JavaScript runtime you probably would use daily from Google Chrome or Microsoft Edge browsers, has many powerful features. This talk would go through some V8 features like JIT, inspector, WebAssembly, and bytecode caching to help React Native apps. These weapons will give developers more choices to develop good apps. Other than that, with Expo config plugins, V8 adoption in an Expo-managed project has never been easier.
Make sure to follow us on Twitter not to miss any news on the next edition of App.js Conf!


Good morning everyone. Hammond Kudoshin and things like Bartech introduced more detail than me. Just to give a lot of detail from me. Right now I'm working on expert and really excited to work on export. Because I used to love Renative. Pretty much export my first full time job to dedicate to have development in reality in daily life. And before that I used to have some browser stuff in my job. So I kind of familiar with the open source project under the Google Chrome browser. So let's kind of have two side project. One is another rendering engine. So we can support new platforms such as Linux or maybe we can use devices in the future. The other one is VA is using the VA drop engine for Renative apps today. I'm very excited to attend today's conference. So we are going to be talking about the engine for apps. Before that I will probably have a demo. So since we are talking about the engine, I have an app to compare different engine there. So we have Bajor and Hermes is just interpreter here. So we can have some for example for example one plus one. So we can also try to use different the wording is too small to me. Maybe I'll change another solution to using the video better. One plus one. Okay, another one. I tried to use the internal property for the engine. This one is the V Eight one. So you can see the VA engine version and internal memory footprints. And right hand side we can test the internal Hermes properties, like internal time properties, so we can see the Hermes. Another experiment to test the internal properties. So supposedly every engine would have these kind of properties. But how it's been? Only VA have this internal property. What's going on? So we are going back to the interesting question. Later we are going to talk about some stories. How is Renative VA born? Back to 2018? When I doing a project to integrate with C Plus, we try to to use the CX module. So we don't have to wrap another thing between Java JNI under the hood. But at that time our project is written, it's incompatible. So I try to propose some PR to make claim building happen. Including the new core engines which enjoy to be native. And then a problem Samsung devices. But I cannot reproduce, developer cannot produce. Just a lot of crash reporting here. We cannot do anything. So at that time I'm thinking try to use VA to Renative because I think JavaScript is not officially supported by the unenjoyed and not officially tested by Airport or Webkeeping. After one month Hermes being released. I just think if I know Hermes will be released next month, I will probably not have this project. But I'm very lucky because these things happen. I can have here to introduce V eight. Actually, I'm not the first guy to do the VA engine. Microsoft did during the 58 they already have this kind of call, but not many people knowing that probably I tried to do something different to my BMG to try to keep it easy to install and I also want to learn some from JSI. That's why I'm trying to do it myself. Talking about installation, when you install the VA engine to Renative, you need to install two packages. One is Renative VA, the other one is VA Android with different variants and VA Android is kind of just the VA engine and Renative VA is runtime implementation and we also have different kind of VA and Joy variant with just enabled or with light mode more which don't have it or supporting WebAssembly with international support with kind of different size in Justin I also want to talk about actually VA and iOS is also supported, but I don't think it's not very useful because they don't have GD label, they don't support WebAssembly. In the meantime, to install VA project, you kind of need a lot of stuff to install packages, to change your gradle file, to change your Java file and gradle property files. But if you are running an excellent project, you just need a single command. Just install these three different properties. So I'm according to the keynote from Evan and Tomorrow yesterday so we are trying to do some fancy stuff to make the library installation easier. So if you are trying to know what's going on talking about features, what features VA offering? Number one, you probably know the remote debugging. But remote debugging has an issue for JSI support. So you cannot use JSI for remote debugging and people will say you can use the Flipper to do it. So VA also support the Flip debugging. You can see that actually the VA engine and you can use the VA internal properties under the hood. Another way to install job street long time if you have export and expose your installed, we have a special feature that you can press the single key and we can open the inspector from your desktop, google Chrome or Microsoft Edge. So you don't necessarily install Liberty or any other Electron if you want, since it's a Chrome browser. If you want to use an inspector to inspect your inspector, it's also possible. Okay, we are going to talk about the answer why the internal property is not available in the demo. Okay, try to make sure you are in a dream or in a real world insection movie. And actually the demo is WebAssembly. Luckily the Drop Street core and Hermes could be built from WebAssembly. So in this demo, the Juice Core not actually a true job suite engine. The true drop street engine is just a VA. People tend to open issues, feature request issues to harm to support WebAssembly. And I always wondering how is it necessary because you can build native call under the hood. Maybe it's not necessary, but maybe it's funny or phone support. You don't have another slide I'm not pretty sure put anywhere. And somebody would like to use the Hermes because the bike hole is kind of secure to protect your bundle. And your just rebuild will not be plain text. But it's not true because Cycle could be decompiled just like Java engine. And there's one tool like that to decompile your home bundle to somewhere you can see in plain text. So I would say security. Then we talked about more about comparison for benchmarking. Because we want to compare different engine, we should use the profile first. So I have another project called Native Z benchmark that's inspired by the open source project. And I think the benchmark should be multidimensional. So it's not just about memory, CPU or just active. Also I think the Compute team power is also a key to bench for profiling or benchmark. So, benchmark number one is a render component throughput it's actually a score view with a lot of children view. And we try to add one child view. And after this child view the mounted, we will try to add another child view. So in different intervals we compare which JavaScript engine will have probably more children view. So the more children view, I think the engine will be more powerful in Joshua computing power. Okay, so let's result. We compare four variants about Georgia core VA with Jeep enabled, VA without Jeep and also Hermes. So we can take a look which one is the best one. I think the more the number of super is the best one. VA which sheet enabled is probably the best one. And the blue one is the Hermes. So VA which will probably faster two times two, three times faster than Hermes. So I think that's good for her. For V eight, the benchmark is talking about memories slightly different to the benchmark we mentioned previously. There's also school view, but we stopped at a specific kind of children view and we do memory footprint at that time. So we start at 100 children, 1000 children and so on. So in this benchmark, okay, not so kind of difference there. Benchmark number three, we use existing profiling infrastructure to benchmark the TTI time. So we try to use we try to generate a factor bundle to different size. For example, three megabytes bundle, ten megabytes bundle and 15 megabytes bundle to differentiate in this kind of different bundle size. And which jobs engine will have the lower lease TTI. So that's the result. Okay, I think lower this one is better. So we can back the result later. So it's not so different between the right hand two right hand side. Benchmark number four is large size. Everything comes to the cost. I'm talking about TDI time more for the result that I do some experiment to try to make VA TTI time to compete with Hermes. So I did some experiment here talking about the VA Joshua compiler pipeline and when the day one VA released people will say recommend that you can use some technology from VA to speed up the startup time. Number one is Bico catching, another one is Nature. So we are talking about these two technologies. First one is snapshot. Snapshot you can probably easy to see in the chrome binary layer VA context beam file. It's actually the snapshot file. Snapshot file it's just a memory state you can see right from file to memory. And some building VA functions are actually a snapshot. For example on the right hand side you can see there's a lot of building functions loading by the snapshot. So if we can use snapshot, they will probably faster than micro catching and even interpret expression. So I'm going to try snatch up to reduce the TTI. If possible. We can also try to use the snapshot to custom snapshot offering a tool you can create your own snapshot. So in the case you can use the snapshot to generate some snapshots with moment where typically less size in your bundle. And in the example we can reduce percentage time which is regret. And I tried to use for Renative bundles and immediately it just crashed. The reason is that Renative has different stuff flow like typically browser before evaluating the bundle relatively will install some internal properties through this and this internal property missing from the time you excuse from the max. So it just access to undefined properties and exception and crash. So I think natural is not available to renew. So we are going to try another technology which is the Bicocing. With Bicoc I also have some kind three different experiment here. Number one is the simplest one bike catching to use the API which is really simple, you just pass the original content or if you have a catch content you just pass to APS to compile. And here is the result. I try to put the purple ones the latest one. So the left hand side is the original TTI and the purple is one enabled backing. And the blue ones Hermes. So in this case I think a little improvement but not compatible with Hermes. So try to look more about the problem. You can see at that time you pass both. So it's not ideal, it's a double loading layer. So I'm trying to think can we pass empty original content and just use the catch content here like AOT ahead of time technology. Just like Hermes compiled to build her Bico before your runtime. And we can actually get some information from the Bico catching which VA is necessary to know. So here's the flow we have left hand side, right hand side. At that time we use tool to generate. And at that time we also wipe out your drop ship bundle to be some very small size bundle layer. At one time. Right hand side you just use the bundle and through the cocaine to interpret the draw screen. The purple one is the result of this experiment. So it's kind of compatible to Hermes. And even from 15 megabytes, the catching technology is not so platform independent. So you have to support different kind of architecture. Another downside, for example on Android you should create four different kinds of bundles for cycle catching there, so it will increase your APK size there. So I'm going to try the experiment number three. Experiment number three, we have time. So it's the first time to run your app. So it's typically you have an original bundle and you generate under the hood. When second time to run your app, you just use the back of catching to vain. Thankfully also have this kind of technology. You can use a different bundle. So we checked when the purple one is not so good as a pre built catching, but I think it's somehow good enough. But just one downside a little bit. I think we can overcome this problem in the future. Because right now we are hacking to the VA engine. So if you have a job exception and you have a stack trash and because you just pass the bundle layer, VA cannot provide correct for your job session. For this question, I think VA supportion technology so you can interpret your source position lazy. I think we can come across this. We can overcome this problem in the future. Okay, so conclusion. So what is going to choose your driver engine? I would say in most of case Hermes is still good compared to the APK size and with good TDI. But if your app needs highly JavaScript computing power, for example, you have much more reanimated work late under the hood animation. Or if you need some fancy feature from WebAssembly. Because I think VA is right now the first engine to support WebAssembly, I would recommend you use the VA especially for Jeep enabled. I don't think the line is not so compatible to Jeep. And who use VA the hood? I would say some popular famous crypto apps using when you can try to do that to find who actually use VA in production. So I think that's pretty much my journey to make VA to fast and performance and to UK and using the production environment. That's all my talk from today. Thanks everyone.