Pro Yearly is on sale from $80 to $50! »

Practical CI/CD for React Native

Practical CI/CD for React Native

Presented at All Things Open Conference, 2020.

React Native emerges as a popular solution to build Android and iOS applications from a single code base written in JavaScript/TypeScript. For teams just starting to embrace React Native, the best practices to ensure rock-solid development and deployment are not widely covered yet. In this talk, we will discuss practical CI/CD techniques that allow your team to accelerate the process towards the development of world-class, high-quality React Native apps:
- Automated build and verification for every single revision
- Continuous check for code quality metrics
- Easy deployment to the QA/QE/Verification team

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

October 20, 2020
Tweet

Transcript

  1. Practical CI/CD for React Native

  2. Works on my machine! Pack your machine. We send it

    to production!
  3. Developer *.apk Tester

  4. https://martinfowler.com/articles/continuousIntegration.html Martin Fowler Continuous Integration is a software development practice

    where members of a team integrate their work frequently, usually each person integrates at least daily - leading to multiple integrations per day.
  5. https://martinfowler.com/articles/continuousIntegration.html Martin Fowler Each integration is verified by an automated

    build (including test) to detect integration errors as quickly as possible.
  6. None
  7. CI

  8. Main branch Feature Branch

  9. GitHub Actions github.com/ariya/hello-react-native

  10. None
  11. None
  12. codequality.yml name: CodeQuality on: [push, pull_request] jobs: check: runs-on: ubuntu-20.04

    steps: - uses: actions/checkout@v2 - name: Use Node.js v12 uses: actions/setup-node@v1 with: node-version: 12.x - run: npm ci - run: npm test
  13. None
  14. android.yml name: Android on: [push, pull_request] jobs: build: runs-on: ubuntu-20.04

    steps: - uses: actions/checkout@v2 - name: Use Node.js v12 uses: actions/setup-node@v1 with: node-version: 12.x - run: npm ci - run: ./gradlew assembleDebug working-directory: android name: Build Android apk (debug)
  15. None
  16. None
  17. ios.yml name: iOS on: [push, pull_request] jobs: build: runs-on: macos-latest

    steps: - uses: actions/checkout@v2 - name: Use Node.js uses: actions/setup-node@v1 with: node-version: 10.x - run: npm ci
  18. ios.yml - run: pod install working-directory: ios name: Install pod

    dependencies - name: Build iOS (debug) run: "xcodebuild \ -workspace ios/HelloReactNative.xcworkspace \ -scheme HelloReactNative \ clean archive \ -sdk iphoneos \ -configuration Debug \ -UseModernBuildSystem=NO \ -archivePath $PWD/HelloReactNative \ CODE_SIGNING_ALLOWED=NO"
  19. None
  20. None
  21. None
  22. CD

  23. None
  24. App Center github.com/ariya/hello-react-native

  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. Tester

  33. None
  34. Epilog

  35. App Center GitHub Actions

  36. Mitigate Human Error 1

  37. Guarantee Consistency 2

  38. Authoritative Reference 3

  39. Extensive Automation 4

  40. Archive & History 5

  41. None
  42. Thank You Some artworks are from http://openclipart.org. @ariyahidayat