As we have built our React Native components, our understanding of how to build those components as evolved. As that understanding grows, newer components use newer techniques and older ones are often left un-updated. It can be difficult to orient oneself around what the current preferred practices are.
This document is a map. Not of Emission at a specific time, but a map of how we got here and where we want to go next. This is a living document, expected to be updated regularly, of links to:
- Example code.
- Pull requests with interesting discussions.
- Conversations on Slack.
- Blog posts.
Links should point to specific commits, and not a branch (in case the branch or file is deleted, these links should always work). But it's possible that a file is outdated, that our understanding has moved on since it was linked to; in that case, please update this document.
- Why Artsy uses React Native
- All React Native posts on Artsy's Engineering Blog
- TODO: What's our best React Native component? Which in-prod component exemplifies our state-of-the-art best practices?
- Why Artsy uses Relay
- Artsy JavaScriptures seminar on Relay
- Example of using Relay in the Inbox component
- Our use of styled-components was supplemented by styled-system in #1016.
- Example pull request migrating a component from styled-components to styled-system
We use storybooks for rapid prototyping and quick feedback when we change code.
Unit testing on Emission is a bit all over the place. Here are some great examples of what tests and test coverage should look like.
- Tests for Gene component
- Tests for Consignments submission flow
- Tests for Consignments photo-selection component interactions.
- Consignments Overview is a really complex component, so tests are broken into four test files:
Emission is used by Eigen, our main app. The structure is described in this blog post. Interop between the JavaScript (Emission) and the Objective-C/Swift (Eigen) can be tricky.
Most interactions are made through a "switchboard" to open links. A switchboard exists in Eigen, which users see, and a switchboard exists in the Emission test app for our internal testing. This is key: the switchboard in Emission isn't actually used in production, only the Eigen one is.
Other interactions are handled by the APIModules, for example when Eigen needs to invoke some kind of callback.
- Switchboard routes defined in Eigen
- Emission test app route-handling
- Emission switchboard to call out to Eigen
- Callbacks between JS and native code are set up here.
There is extensive inline documentation in our tracking code, including examples.
These are techniques or approaches that we used to use, but which have been replaced with newer concepts above. It's an empty list so far, but will grow with time.