A quick walkthrough designing an OTA system from first principles, and how to host your own react native JS bundle from your servers.

1. Host your own
Over-the-air update service

2. Roadmap
Buggy Valley App
Glorified cURLing App
Designing an OTA Service
Hosting Your Own Service
OTA Assets
Announcements

3. Pillar Valley

4. Pillar Valley

5. Pillar Valley

6. My Awesome App

7. Standing on the shoulders
of giants

8. Pillar Valley

9. Buggy Valley

10. Buggy Valley
$
p = 0.5
$$
Nothingp = 0.5

11. Buggy Valley
p = 0.5
p = 0.5

12. Android Java Implementation
String redScreenPath = “file:///red-screen.js”;
String pillarValleyPath = “file:///pillar-valley.js”;

13. Android Java Implementation
String redScreenPath = “file:///red-screen.js”;
String pillarValleyPath = “file:///pillar-valley.js”;
int randNum = getRandom();
if (isEven(randNum)){
loadApp(redScreenPath);
} else {
loadApp(pillarValleyPath);
}

14. Android Java Implementation
String redScreenPath = “file:///red-screen.js”;
String pillarValleyPath = “file:///pillar-valley.js”;
int randNum = getRandom();
if (isEven(randNum)){
loadApp(redScreenPath);
} else {
loadApp(pillarValleyPath);**
}
** how does loadApp work?

17. Quick Recap
String redScreenPath = “file:///red-screen.js”;
String pillarValleyPath = “file:///pillar-valley.js”;
int randNum = getRandom();
if (isEven(randNum)){
loadApp(redScreenPath);
} else {
loadApp(pillarValleyPath);**
}
** how does loadApp work?

18. Roadmap
Buggy Valley App
Glorified cURLing App
Designing an OTA Service
Hosting Your Own Service
OTA Assets
Announcements

20. Buggy Valley fits in perfectly with my use case.
Your MVP was just what I needed!

21. One small suggestion tho...

22. Original Buggy Valley
String redScreenPath = “file:///red-screen.js”;
String pillarValleyPath = “file:///pillar-valley.js”;
int randNum = getRandom();
if (isEven(randNum)){
loadApp(redScreenPath);
} else {
loadApp(pillarValleyPath);
}

23. Modified Buggy Valley
String redScreenPath = “file:///red-screen.js”;
String aliceAppPath = “file:///alice-app.js”;
int randNum = getRandom();
if (isEven(randNum)){
loadApp(redScreenPath);
} else {
loadApp(aliceAppPath);
}

24. Modified Buggy Valley
String redScreenPath = “file:///red-screen.js”;
String aliceAppPath = “file:///alice-app.js”;
int randNum = getRandom();
if (isEven(randNum)){
loadApp(redScreenPath);
} else {
loadApp(aliceAppPath);
}

25. Modified Buggy Valley
String newAliceAppPath
String aliceAppPath = “file:///alice-app.js”;
int randNum = getRandom();
if (isEven(randNum)){
loadApp(newAliceAppPath);
} else {
loadApp(aliceAppPath);
}

26. Modified Buggy Valley
String newAliceAppPath = cURLToDisk(“https://expo.io/@alice/app”);
String aliceAppPath = “file:///alice-app.js”;
int randNum = getRandom();
if (isEven(randNum)){
loadApp(newAliceAppPath);
} else {
loadApp(aliceAppPath);
}

27. Modified Buggy Valley
String newAliceAppPath = cURLToDisk(“https://expo.io/@alice/app”);
String aliceAppPath = “file:///alice-app.js”;
int randNum = getRandom();
if (isEven(randNum)){
loadApp(newAliceAppPath);
} else {
loadApp(aliceAppPath);
}

28. Glorified cURL
String newAliceAppPath = cURLToDisk(“https://expo.io/@alice/app”);
String aliceAppPath = “file:///alice-app.js”;
if (newAliceAppPath != null){
loadApp(newAliceAppPath);
} else {
loadApp(aliceAppPath);
}

29. Wait but how does this benefit me?

30. JS Bundle
Native Modules
Currently on disk:

31. JS Bundle
Native Modules
Currently on disk:
Traditional update
New JS Bundle
New Native Modules

32. JS Bundle
Native Modules
Currently on disk:
Traditional update
New JS Bundle
New Native Modules
Avg binary size ~30Mb

33. JS Bundle
Native Modules
Currently on disk:

34. JS Bundle
Native Modules
Currently on disk:
Glorified cURL update
New JS Bundle
Native Modules

35. Roadmap
Buggy Valley App
Glorified cURLing App
Designing an OTA Service
Hosting Your Own Service
OTA Assets
Announcements

37. Glorified cURL fits in perfectly with my use case.
Your MVP was just what I needed!

38. It’s not very performant tho...

39. Glorified cURL
String newBobAppPath = cURLToDisk(“https://expo.io/@bob/app”);
String bobAppPath = “file:///bob-app.js”;
if (newBobAppPath != null){
loadApp(newBobAppPath);
} else {
loadApp(bobAppPath);
}

40. Glorified cURL
String newBobAppPath = cURLToDisk(“https://expo.io/@bob/app”);
String bobAppPath = “file:///bob-app.js”;
if (newBobAppPath != null){
loadApp(newBobAppPath);
} else {
loadApp(bobAppPath);
}
JS Bundle
We don’t want to load the JS bundle unnecessarily.
We only want to load the JS bundle if there’s a new change available.

41. Let’s take a step back
And think about how the web
works for a sec

42. The Web
<script src=“bundle.js” />
Big JS bundle
bundle.js
index.html

43. Taking a page out of the web book
{bundleUrl: ‘bundle.js’}
Big JS bundle
bundle.js
index.json

44. Taking a page out of the web book
{bundleUrl: ‘ios-1a2b3c.js’}
Big JS bundle
ios-1a2b3c.js
index.json
Bundle name is based off its md5 hash

45. Taking a page out of the web book
{bundleUrl: ‘ios-7a8b9c’}
Big JS bundle
ios-7a8b9c.js
index.json
Cache the bundleUrl
Only download bundleUrl
if we don’t have it cached

46. How do I use an OTA service in my app?
^ these are my app files
^ this is what my app looks like

47. How do I use an OTA service in my app?
dev tools GUI
^ push this button to upload app to expo server

48. How do I use an OTA service in my app?
Or use the cli if you prefer
> expo publish
Run this command in your project directory to upload to expo servers

49. How often is the server polled for updates?
The default behavior is to poll the server when the app starts up

50. What if I don’t like the default behavior?
You can use the Updates module to customize when you’d to update your app
^ from the docs page

51. Roadmap
Buggy Valley App
Glorified cURLing App
Designing an OTA Service
Hosting Your Own Service
OTA Assets
Announcements

52. I’m in a country where network latency
to your CDNs are really high

53. I’m in a country where network latency
to your CDNs are really high
How about hosting your own app then?

54. I’m in a country where network latency
to your CDNs are really high
How about hosting your own app then?*
* in our upcoming SDK release

55. How do I host my own app?
^ these are my app files
^ this is what my app looks like

56. > expo export
Run this command in your project directory
to dump your app to disk
How do I host my own app?

57. This is what gets dumped to disk
How do I host my own app?
.
├── android-index.json
├── ios-index.json
├── assets
│ └── 1ecc2
└── bundles
├── android-01ee6.js
└── ios-ee820.js

58. How do I host my own app?
.
├── android-index.json
├── ios-index.json
├── assets
│ └── 1ecc2
└── bundles
├── android-01ee6.js
└── ios-ee820.js

59. How do I host my own app?
.
├── android-index.json
├── ios-index.json
├── assets
│ └── 1ecc2
└── bundles
├── android-01ee6.js
└── ios-ee820.js
{bundleUrl: ‘ios-ee820.js’}
Big JS bundle
ios-ee820.js
ios-index.json

60. How do I host my own app?
.
├── android-index.json
├── ios-index.json
├── assets
│ └── 1ecc2
└── bundles
├── android-01ee6.js
└── ios-ee820.js
git push master

61. I pushed to GitHub because it has free static hosting.
You can host your app from any server.

62. How do I build my app binary?
> expo build:ios
Run this command in your project directory

63. How do I build my app binary?
> expo build:ios —public-url https://quinlanj.github.io/self-hosting/ios-index.json
Run this command in your project directory

64. How do I build my app binary?
> expo build:ios —public-url https://quinlanj.github.io/self-hosting/ios-index.json
{bundleUrl: ‘ios-ee820.js’}
Big JS bundle
ios-ee820.js
ios-index.json
^ This file is served first

65. Press this button
To download

66. How do I use this in development?
https://quinlanj.github.io/selfhost/ios-index.json
Convert to QR code

67. How do I use this in development?
Scan the QR code into the expo dev app

68. How do I use this in development?
http://localhost:8000/ios-index.json
Convert to QR code

69. How do I use this in development?
Scan the QR code into the expo dev app

70. Roadmap
Buggy Valley App
Glorified cURLing App
Designing an OTA Service
Hosting Your Own Service
OTA Assets
Announcements

71. This is what my app looks like.
I’ve installed it on my phone.

72. In development, let’s make a change by adding another pic

73. Push changes to GitHub

74. This is what my app looks like.
I’ve installed it on my phone.

75. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
JS Bundle

76. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
JS Bundle
quinlanj.github.io
Here is the server hosting my app

77. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
JS Bundle
quinlanj.github.io
An update is ready!

78. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
JS Bundle
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle

79. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
JS Bundle
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
JS Bundle

80. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle

81. New
JS Bundle
<Image source={require(‘cat.png’} />
<Image source={require(‘dog.png’} />

82. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
?
dog.png is pulled down to filesystem?

83. New
JS Bundle
<Image source={require(‘cat.png’} />
<Image source={require(‘dog.png’} />
But how? It looks like these assets are fetched from filesystem

84. New
JS Bundle
<Image source={require(‘cat.png’} />
<Image source={require(‘dog.png’} />
We wrote a module to override asset resolution

85. New
JS Bundle
<Image source={require(‘cat.png’} />
<Image source={require(‘dog.png’} />
Module Logic:
Look for asset in the filesystem
If it’s not there, look for it from the server

86. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
?
dog.png is pulled down to filesystem?

87. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
?
dog.png is not on the filesystem

88. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
?
Let’s grab dog.png from server then!

89. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle

90. This is what my app looks like.
I’ve installed it on my phone.
Currently on filesystem:
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
Cached for future use

91. How come assets are stored by hash?
.
├── android-index.json
├── ios-index.json
├── assets
│ └── 1ecc2
└── bundles
├── android-01ee6.js
└── ios-ee820.js

92. JS Bundle
<Image source={require(‘cat.png’)} />
We are requiring assets by their name, not by their hash

93. JS Bundle
require(‘cat.png’)
React native packager
{assetName: ‘cat.png’, hash:’1ecc2’}
App packaging
App.js

94. JS Bundle
<Image source={require(‘cat.png’} />
Module Logic:
Look for cat.png in the filesystem
If it’s not there, look for cat.png from the server
Recall

95. JS Bundle
Module Logic:
Look for 1ecc2 in the filesystem
If it’s not there, look for 1ecc2 from the server
Actual Implementation
{assetName: ‘cat.png’, hash:’1ecc2’}

96. How does this benefit me?

97. <Image source={require(‘cat1.png’} />
<Image source={require(‘crazy-cat.png’} />
<Image source={require(‘lime-cat.png’} />
…
This app displays the same cat picture
These cat pictures are all named something different

98. {assetName: ‘cat1.png’, hash:’1ecc2’}
{assetName: ‘crazy-cat.png’, hash:’1ecc2’}
{assetName: ‘lime-cat.png’, hash:’1ecc2’}
…
They all resolve to the same file on disk: 1ecc2

99. Roadmap
Buggy Valley App
Glorified cURLing App
Designing an OTA Service
Hosting Your Own Service
OTA Assets
Announcements

100. Announcements
We made a web application called Snack
Snack is like a JS Fiddle for react native apps
Snack is now open source, check it out at https://github.com/expo/snack-web