The easiest way to experiment and explore working with React Native code
Not only does Callstack have tremendously talented engineers, but I know they care about the success of the project as much as I do. Having a true partner is a wonderful experience and gives us the ability to move so much faster than we could without them.
The first problem we needed to solve was to minimize the setup required. Fortunately, the expo development environment already takes care of this. While using Expo would solve this issue, it still took a little bit of work.
Another approach was to run a React Native development environment on the cloud (rnplay.org) RNPlay.
However it was really slow and unusable.
To avoid running metro-bundler, we decided to patch in the code that has changed instead of rebuilding the full bundle every time. For the web based editor, we decided to use Ace Editor with a custom ESLint build for linting the files.
Our final approach involved a web based editor with a companion app running inside the Expo app on the device which patches in the changed code. The Expo app can load the experience by opening a link to the snack or by scanning a QR code.
The basic approach is that the web UI sends the code and the list of dependencies to the app, the app downloads the dependencies, transforms the code with Babel, and then executes it.
We used Ace Editor for the code editor with various enhancements to improve the editing experience, such as ESLint and Prettier integration, various keyboard shortcut, file management support etc.:
We also built a custom packager which creates bundles to be used by projects on Snack, so you could import a module like usual and we take care of the rest behind the scenes. The packager is based on webpack with custom loaders and plugins: