Reactions ⇒ Emissions

Emission is a collection of React Native Components which are consumed by Eigen. A writeup on how & why we made a lot of the repo decisions is on our blog here.

Inside Emission you will find:

• An example app for building and running Emission's components with an Eigen-like API.
• An NPM module that relies on React Native and manages the components.
• A Podspec that wraps it all together for easy external usage in Eigen.

Meta

• State: production
• Point People: @alloy, @ashfurrow
• CI:
• Troubleshooting

This is a core Artsy Mobile OSS project, along with Energy, Eidolon, Eigen and Emergence.

Don't know what Artsy is? Check out this overview and more, or read our objc.io on team culture.

Want to know more about Emission? Read the mobile blog posts, or Emission's / React Native's specifically. Also check out the map to Emission to oriented yourself to the codebase.

Prerequisites

• Xcode

Installation

Automated install:

• OSS: git clone https://github.com/artsy/emission.git && cd emission && make setup && make oss
• Artsy: git clone https://github.com/artsy/emission.git && cd emission && make setup && make artsy. Then look in 1password for the Eigen keys.

Manual install

1. Install Node.js, and Yarn: $ brew install node yarn

2. Install file watcher used by React Native:

   • $ brew install watchman

3. Install NPM modules: $ yarn install

4. Install Pods: $ cd Example && bundle && bundle exec pod install

   Running the project:

5. Run $ yarn start from the top directory, which will:

   • Clean the example app’s Xcode build dir.
   • Start the example app’s React Native packager.
   • Start the React Storybooks environment.

6. Now from Xcode you can run the app in Example/Emission.xcworkspace.

• If you already have the app installed, you can run open -a Simulator to open the last sim, and then xcrun simctl launch booted net.artsy.Emission to open the app.
• If you run into any issues with the above commands oftentimes a full clean can help. Run rm -rf node_modules; rm -rf Example/Pods; yarn install; cd Example; bundle exec pod install and then repeat the steps above.

Daily Development

To use Storybooks, select "Open Storybook" from the "Developer" section of the root view in the app. You can also use the VSCode Storybooks plugin.

---

Using VS Code as an IDE

There is a comprehensive document covering our setup here.

Debugging

There is a comprehensive document covering the various options.

Updating Dependencies

We vendor some data from other repositories that you will sometimes need to update. Notably the GraphQL schema of metaphysics that Relay uses to generate queries from: $ yarnsync-schema

Deploying Emission

Note: Deploys are mostly automated, these instructions should be valid but take a look at this issue if things break.

Note 2: If you're updating React Native, you're gonna have to do a lot of this stuff manually. See the makefile/alloy/orta for more info.

1. Update the CHANGELOG file to reflect the version that will be released and commit it.
2. Don't change the package.json version.
3. For non-beta releases, use either yarn release patch, yarn release minor, or yarn release major. For beta releases use yarn release prerelease.
4. If integrating in Eigen consult the docs on updating Emission

Automated Emission App Deploys

The Emission app (in Example/) is deployed automatically to TestFlight once a week through emission-nebula. See that repo for more details.

Resources

• React Native:

  • http://makeitopen.com
  • https://github.com/fbsamples/f8app/
  • http://facebook.github.io/react-native/docs/getting-started.html
  • http://beginning-mobile-app-development-with-react-native.com/book-preview.html

• Relay:

  • https://facebook.github.io/relay/docs/getting-started.html
  • https://github.com/facebook/relay/tree/master/examples
  • https://github.com/fbsamples/f8app/

• TypeScript:

  • https://www.typescriptlang.org
  • https://github.com/basarat/typescript-book

• Testing:

  • https://facebook.github.io/jest/
  • https://facebook.github.io/jest/docs/api.html#content
  • https://facebook.github.io/jest/blog/2016/07/27/jest-14.html

• Flexbox:

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • http://blog.krawaller.se/posts/a-react-app-demonstrating-css3-flexbox/
  • https://egghead.io/courses/flexbox-fundamentals

• React Native Storybooks:

  • https://github.com/storybooks/storybook/
  • https://github.com/storybooks/storybook/tree/master/app/react-native

• React Native Debugger:

  • https://github.com/jhen0409/react-native-debugger