Join us as we talk with developers setting the React Native standards at Shopify. They’ll share more on how we write performant React Native apps.
Overview
The article discusses best practices and strategies for writing performant React Native applications at Shopify, featuring insights from key developers in the field. It covers topics such as debugging, layout management, testing, and CI/CD processes.
What You'll Learn
1
How to manage various screen sizes and responsive layouts in React Native
2
Why using flexible sizing improves UI adaptability
3
How to implement unit and integration tests using Jest
4
How to handle navigation in a Brownfield app with React Native
Prerequisites & Requirements
- Understanding of React Native fundamentals
- Familiarity with debugging and observability tools(optional)
Key Questions Answered
What best practices should be followed when building a React Native app?
Best practices include referring to Shopify's Restyle and Polaris documentation for guidance on accessibility, theming, and typography. These resources help influence decisions on UI design and ensure adherence to standards.
How does Shopify handle crashes or bugs in React Native?
Shopify relies on various debugging and observability tools to detect crashes and bug patterns. The team utilizes their technical expertise to address internal React Native bugs, often communicating through established channels.
What approach does Shopify take for managing state between native and React Native?
Shopify treats React Native state as the 'Source of Truth', passing necessary data at startup and managing shared state in React Native. Updates from native modules are communicated via EventEmitter, ensuring a single source of truth.
What CI tools does Shopify use for managing builds?
Shopify uses Buildkite for continuous integration. They have automated nightly builds that are uploaded to a test distribution platform, allowing team members to stay updated with the latest versions.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
React Native
Used for building mobile applications at Shopify.
Testing
Jest
Used for writing and running unit and integration tests.
CI/CD
Buildkite
Used for managing continuous integration builds.
Frontend
Restyle
Used for managing responsive design and styling in React Native applications.
Frontend
Polaris
Provides design guidelines and components for building Shopify applications.
Key Actionable Insights
1Utilize the Restyle library to define breakpoints for responsive designs in React Native applications.This approach allows developers to create adaptable UIs that cater to various device sizes, enhancing user experience across platforms.
2Implement Jest for unit and integration testing to ensure code quality and prevent regressions.Using Jest helps maintain a robust testing framework, allowing developers to catch issues early in the development cycle and improve overall application reliability.
3Adopt flexible sizing for UI components to improve adaptability across devices.By avoiding fixed sizes, developers can ensure that their applications provide a better user experience on different screen sizes, which is crucial in today's diverse device landscape.
Common Pitfalls
1
Relying too heavily on fixed sizes can lead to poor user experiences across different devices.
This issue arises when developers do not account for the variety of screen sizes and resolutions, resulting in layouts that do not adapt well.
2
Neglecting automated testing can lead to undetected bugs and regressions.
Without a robust testing framework, issues may go unnoticed until they affect users, making it crucial to integrate testing into the development process.
Related Concepts
Responsive Design In Mobile Applications
Debugging Techniques In React Native
Continuous Integration Best Practices