Building of Snack The React Native Playground
summary
Snack runs full React Native apps from a browser editor and an Expo runtime app, providing zero setup preview on device by sending edited JS over a pub/sub channel and re-evaluating it live. It implements an eval-based runtime plus a custom module map and uses Babel-standalone to transpile newer syntax, and replaces Metro with a Haul/Webpack-based bundler that fetches npm packages, builds bundles, uploads them to S3 and embeds exact version comments for determinism. It cannot catch native-side crashes and runs in production mode so red/ yellow boxes are absent, but it already powers teaching, docs and fast prototyping.
AI-written summary · about
chapters (23)
- 0:00Introduction
- 2:21Expectations
- 4:00AaronPlay
- 4:24Appetize
- 5:37Webpack
- 6:52Code Editor
- 7:46Challenges
- 9:22Module Support
- 10:16Global Object
- 13:41Redbox and Yellowbox
- 15:31Support for NPM Libraries
- 17:43Asset Registry
- 18:34Metro Bundler
- 20:57Snack User
- 22:42Snack Bundler
- 23:36Snack Editor
- 24:03Component Library
- 24:48Use Cases
- 26:52DipBuilder
- 27:28Native Directory
- 27:59Code Examples
- 28:10Future of Snack
- 28:27Conclusion
related talks
21mThe React Native Playground
42mReact Native Up and Running
36mReact Native Sand Paper
41mAs Easy as Ever - Apps for Android and iOS with React Native
25mReasons to give React Native a(nother) try
23mCoding Mobile with the Pros
26mIntroduction to Cross‑Platform Development with React Native and Expo
24mExpo for Web