Create Mobile section

[jevakallio]

This here is an outline of a new top-level section for React Native mobile development.

Whereas the existing Frontend playbook content is heavily tooling-focused, I would like this document to also discuss concepts and patterns. React Native is in some ways an immature field and existing React best practices may not always apply, or it might not be clear how to apply them. The likelihood of a developer getting their very first React Native project is also rather high for the time being, and discussing basics and good practices add value.

Initial braindump, let's discuss and align practices with existing Formidable RN work and then revise structure and scope. Many of these topics are minor/contestable and might not be worth including in the playbook. Others might be too large and deserve to be a blog post or a library instead.

The Mobile Playbook

• Platform-specific code iOS/Android
  • Prefer to separate *.ios.js and *.android.js component files over switching on Platform.*
  • Prefer to split UI into smaller components until lowest common denominator. If applicable, separate only styles into *.styles.ios.js and *.styles.android.js to avoid duplication of code
  • Prefer pure JS implementation over custom native components for maintainability
  • Prefer to wrap native platform UI components to achieve native look-and-feel over implementing from scratch
  • Managing native dependencies (npm vs Maven/CocoaPods/Carthage)
  • Patterns for authoring native modules
  • Follow platform design guidelines (Apple Human Interaction Guidelines, Google Material Design)
• State management
  • Persist Redux/Flux store to disk to survive shutdowns and tombstoning
  • Prepare for store schema migrations/pruning on updates
  • Using GraphQL with Redux+Apollo vs Relay (discuss)
• Navigation and routing
  • Storing navigation state in Redux/Flux store with NavigationExperimental (discuss)
  • Navigation UX patterns for iOS and Android
• Quality assurance
  • Crashing issues in mobile apps are more serious than on web (worst case bricked app, not always easy to deploy hotfixes)
  • Use Flow to reduce errors (built into React Native)
  • Unit testing with Mocha+Enzyme or Jest snapshot testing (discuss)
  • UI testing automation with Calaba.sh and Xamarin Test Cloud
• Networking
  • Always use timeouts
  • Only use HTTPS endpoints
  • Catch and rethrow async/await errors at call site (or just use Promises)
  • Backend API versioning and forced updates
  • Mobile app needs a mobile backend, consider BFF
• Offline-resilient applications
  • Dealing with poor network conditions
  • Patterns for handling optimistic state updates, synchronization and errors
• Authentication
  • Use JSON Web Tokens and token invalidation
  • Social authentication providers (OAuth, OpenID)
• Performance
  • Common pitfalls: Large ListViews, animating while running interactions
  • Tools for optimising performance
• Debugging
  • redux-remote-devtools
• Deployments
  • Automate build and deployment with Fastlane
  • Continuous Integration (Options: Bitrise.io, Jenkins + Private Build Server, Microsoft VSTS + MacInCloud build agents) (discuss)
  • Continuous deployment with Microsoft Code Push
• Beta and pre-release testing
  • Play Store Beta program / Apple TestFlight
  • Third party SDKs: HockeyApp / Crashlytics (discuss)
  • Configuring apps to support multiple environments
• Running in production
  • App Store / Play Store submission process
  • Complying with App Store guidelines
  • Crash reporting
  • Behavioral analytics
  • Push notifications
  • A/B testing
• Surviving React Native
  • Embrace the Hacker Way
  • Upgrade often, but not too early
  • Read the source

/cc @ryan-roemer @kenwheeler

[ryan-roemer]

This is a great starting outline and the substance seems spot on.

Maybe as a next step is doing ye olde

• [ ] bullet point + proposed-filename.md

to start targeting what this will look like in terms of pages and sub-tickets (especially for (discuss) items)?

[jevakallio]

@ryan-roemer @kenwheeler let's discuss in https://github.com/FormidableLabs/formidable-playbook/pull/47.