For me it is always interesting to see how code is written by Shopify itself, I mean inner code standards, test criteria, tools of the trade of the company. This was unveiled, and this digest is be dedicated to the Shipit! event that took place on May 19, 2021, with the topic “How We Write React Native Apps”.
UI, Styles, and Theming
The main principle of developing Shopify React Native interfaces is knowing and supporting platform standards. For example, Shopify uses native typography, such as SF Pro on iOS and Roboto on Android. They use Material design for Android, trying to consider nav bars, notifications, headers, etc.
In other words, they try to make it more like a native app, not a universal app. It sacrifices the consistency of the app on different devices. But it brings up the perfect UI that is familiar to any of the users of the OS.
The major approach to have consistency is to have a concept of a design system. A good example of this statement is Polaris, Shopify library for building UI interfaces and apps for all of the merchants, or Polaris Retail for POS terminals.
@shopify/restyle
As for React Native, the crucial library for all of the devs is @shopify/restyle. It was built on TypeScript. The benefit of using this library is to have “themability” as the core focus. To build palettes and create themes over them.
Testing
The testing flow goes like this:
- Static tests (TypeSctipt/ESLint)
- Unit tests
- Integration tests
- e2e tests
This list is going from less expensive to more expensive types of tests, where e2e is the most expensive. The main testing force of Shopify is focused on the integration tests, which are most effective.
Test principles of Shopify React Native testing team
- Test things as close as they are actually used
- Integration tests should be the pillars of the testing suite
- Mock only what is absolutely necessary. Test your system, not your mocks
- Developers should be actively engaged in testing
- Approach testing from the user’s perspective
Test tools
- Jest test runner
- @shopify/react-testing
- @shopify/graphql-testing (GraphQL mocking)
- Detox e2e
- Storybook (documentation/visual regression)
React Native best practices
Shopify uses Redux as well as the Context API to separate the concerns.
Components
- Write with testability in mind
- Be careful with creating generic components
- Write with maintainability in mind
- Limit Native modules to very specific problems, it is not a panacea
- Use a single tool for state management
- Don’t forget to use useState and useContext, even if you use state management
Check the whole event here:
