React Native “iFrames”

Downloading Components at Runtime

The bouncy view in that GIF was not compiled into the app: it was downloaded from a server at runtime. I wrote about this concept awhile ago and finally got around to hacking it up. You can find the demo on Github.

Why?

We started [February Friends Day videos] mid-November and quickly realized the code had to be done before Christmas. Why? We wanted to make sure that for those who got a new phone as a present, the code would be in the app they downloaded.

On the web we can push code all the time, but not so much for traditional native mobile apps. But if you use React Native, you can leverage services like CodePush to update all the code in your app at once. (Facebook did use React Native for Friends Day, but I guess they didn’t have remote updates as an option)

But what if you want more incremental changes to your code? Or if you want to load some content from third-parties? Content like Twitter-style cards, ads, A/B tests, user-generated content — the possibilities are endless. What we want is something like an iFrame.

How?

This is the API I wanted:

The secret sauce to RemoteComponent is…eval. Basically we download some JavaScript, assume that the code represents a sort of “factory” function, and then invoke it. It’s so simple that you can read this Gist:

In production you’d have a whole bunch of concerns around security if you render these components from random sources — but I can hand-wave that for a hack. The remote JavaScript also has to be sent post-Babel or whatever other build tools you use; the GIF’s code is gnarly.

Next?

Cool tech demos do not make great products by themselves. But there is something to secrets. This feels like a secret. Use it wisely.