With React Native, some of your applications core functionalities, that would previously be written in native code, are now implemented in JavaScript. And that's great! Now you can use things like Hot Module Reloading and ship updates to your app whenever you want. But what about performance and User Experience? Is JavaScript fast enough to replace native code? I'm going to talk about some of the challenges we are working on at the React Native Performance team.

1. JAVASCRIPT, REACT NATIVE &
Performance
@tadeuzagallo

2. ABOUT ME
@tadeuzagallo

3. React Native Startup
OVERVIEW
@tadeuzagallo

4. @tadeuzagallo

5. React Native's
GOALS
@tadeuzagallo

6. Hybrid APPS
@tadeuzagallo

7. Performance Goals
▸ Reduce Memory Usage
▸ Reduce Startup Overhead
@tadeuzagallo

8. Native
OPTIMISATIONS
@tadeuzagallo

9. MULTI-THREADED
Initialisation
@tadeuzagallo

10. @tadeuzagallo

11. @tadeuzagallo

12. LAZY
Module Initialisation
@tadeuzagallo

13. @tadeuzagallo

14. Smarter
BATCHING
@tadeuzagallo

15. @tadeuzagallo

16. @tadeuzagallo

17. @tadeuzagallo

18. JavaScript
OPTIMISATIONS
@tadeuzagallo

19. INLINE/LAZY
Requires
@tadeuzagallo

20. var alert = require('alert');
// ...
<TouchableHighlight onPress={() => alert('Touched')}>
// ...
</Touchable>
@tadeuzagallo

21. // ...
<TouchableHighlight onPress={() => require('alert')('Touched')}>
// ...
</Touchable>
@tadeuzagallo

22. DEAD CODE ELIMINATION
@tadeuzagallo

23. if (__DEV__) {
require('DebugOnlyModule');
}
const Alert = Platform.OS == 'ios' ?
require('AlertIOS') :
require('AlertAndroid');
@tadeuzagallo

24. // dev=false&minify=true
// platform=ios
const Alert = require('AlertIOS');
// platform=android
const Alert = require('AlertAndroid');
@tadeuzagallo

25. AND MORE...Optimise polyfills, extract babel helpers, ...
@tadeuzagallo

26. @tadeuzagallo

27. @tadeuzagallo

28. What next?
@tadeuzagallo

29. @tadeuzagallo

30. We shape our code
IN TERMS OF THE VM
@tadeuzagallo

31. @tadeuzagallo

32. VM
ARCHITECTURE
@tadeuzagallo

33. @tadeuzagallo

34. @tadeuzagallo

35. @tadeuzagallo

36. @tadeuzagallo

37. @tadeuzagallo

38. But on iOS...
@tadeuzagallo

39. @tadeuzagallo

40. @tadeuzagallo

41. TL;DR
THIRD-PARTY APPS CAN'T JIT ON iOS
@tadeuzagallo

42. @tadeuzagallo

43. WHAT ABOUT
Android?
@tadeuzagallo

44. WE CAN JIT ON Android!
@tadeuzagallo

45. ...BUT IT'S SLOWER*...
@tadeuzagallo

46. ANDROID SETUP
@tadeuzagallo

47. Profile, profile and profile
@tadeuzagallo

48. @tadeuzagallo

49. Parsing is
EXPENSIVE
@tadeuzagallo

50. @tadeuzagallo

51. var hello = "Hello, World!";
var HelloWorld = function() {
return React.createElement('div', null, hello);
};
ReactDOM.render(
React.createElement(HelloWorld),
document.body);
@tadeuzagallo

52. /* */ var hello = "Hello, World!";
/* */
/* */ var HelloWorld = function() {
/* */ return React.createElement('div', null, hello);
/* */ };
/* */
/* */ ReactDOM.render(
/* */ React.createElement(HelloWorld),
/* */ document.body);
@tadeuzagallo

53. /* ==> */ var hello = "Hello, World!";
/* */
/* */ var HelloWorld = function() {
/* */ return React.createElement('div', null, hello);
/* */ };
/* */
/* */ ReactDOM.render(
/* */ React.createElement(HelloWorld),
/* */ document.body);
@tadeuzagallo

54. /* */ var hello = "Hello, World!";
/* */
/* ==> */ var HelloWorld = function() {
/* */ return React.createElement('div', null, hello);
/* */ };
/* */
/* */ ReactDOM.render(
/* */ React.createElement(HelloWorld),
/* */ document.body);
@tadeuzagallo

55. /* */ var hello = "Hello, World!";
/* */
/* */ var HelloWorld = function() {
/* ==> */ return React.createElement('div', null, hello);
/* */ };
/* */
/* */ ReactDOM.render(
/* */ React.createElement(HelloWorld),
/* */ document.body);
@tadeuzagallo

56. /* */ var hello = "Hello, World!";
/* */
/* */ var HelloWorld = function() {
/* */ return React.createElement('div', null, hello);
/* */ };
/* */
/* ==> */ ReactDOM.render(
/* */ React.createElement(HelloWorld),
/* */ document.body);
@tadeuzagallo

57. /* */ var hello = "Hello, World!";
/* */
/* */ var HelloWorld = function() {
/* ==> */ return React.createElement('div', null, hello);
/* */ };
/* */
/* */ ReactDOM.render(
/* */ React.createElement(HelloWorld),
/* */ document.body);
@tadeuzagallo

58. Pre-parse
CACHE
@tadeuzagallo

59. @tadeuzagallo

60. @tadeuzagallo

61. @tadeuzagallo

62. Bytecode
CACHE
@tadeuzagallo

63. @tadeuzagallo

64. @tadeuzagallo

65. @tadeuzagallo

66. @tadeuzagallo

67. @tadeuzagallo

68. @tadeuzagallo

69. Random Access Bundle
@tadeuzagallo

70. import React, { Component } from 'react';
import { Text, AppRegistry } from 'react-native';
var HelloWorld = () => (
<Text>Hello, World!</Text>
);
AppRegistry.registerComponent('SampleApp', () => HelloWorld);
@tadeuzagallo

71. __d('ReactComponent', function (global, require, module, exports) { /* ... */ });
__d('react', function (global, require, module, exports) { /* ... */ });
__d('AppRegistry', function (global, require, module, exports) { /* ... */ });
__d('Text', function (global, require, module, exports) { /* ... */ });
__d('react-native', function (global, require, module, exports) { /* ... */ });
__d('SampleApp.js', function (global, require, module, exports) { /* ... */ });
@tadeuzagallo

72. __d(0, function (global, require, module, exports) { /* ... */ });
__d(1, function (global, require, module, exports) { /* ... */ });
__d(2, function (global, require, module, exports) { /* ... */ });
__d(3, function (global, require, module, exports) { /* ... */ });
__d(4, function (global, require, module, exports) { /* ... */ });
__d(5, function (global, require, module, exports) { /* ... */ });
@tadeuzagallo

73. {
0: { offset: 139, size: 202 },
1: { offset: 342, size: 255 },
2: { offset: 598, size: 115 },
3: { offset: 714, size: 107 },
4: { offset: 827, size: 131 },
5: { offset: 959, size: 382 }
}
/* global code */0
__d(0, function (global, require, module, exports) { /* ... */ });0
__d(1, function (global, require, module, exports) { /* ... */ });0
__d(2, function (global, require, module, exports) { /* ... */ });0
__d(3, function (global, require, module, exports) { /* ... */ });0
__d(4, function (global, require, module, exports) { /* ... */ });0
__d(5, function (global, require, module, exports) { /* ... */ });0
@tadeuzagallo

74. // JavaScript
function require(module) {
if (cached[module]) {
return cached[module];
}
if (!factories[module]) {
nativeRequire(module);
}
cached[module] = factories[module]();
}
// Native
void nativeRequire(module) {
evaluate(RandomAccessBundle + offsets[module]);
}
@tadeuzagallo

75. react-native bundle --entry-file index.ios.js ...
@tadeuzagallo

76. react-native unbundle --entry-file index.ios.js ...
@tadeuzagallo

77. Thank you!
@tadeuzagallo