$30 off During Our Annual Pro Sale. View Details »

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

Ariya Hidayat

October 20, 2020
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

  1. Practical CI/CD
    for React Native

    View Slide

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

    View Slide

  3. Developer
    *.apk
    Tester

    View Slide

  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.

    View Slide

  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.

    View Slide

  6. View Slide

  7. CI

    View Slide

  8. Main branch
    Feature Branch

    View Slide

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

    View Slide

  10. View Slide

  11. View Slide

  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

    View Slide

  13. View Slide

  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)

    View Slide

  15. View Slide

  16. View Slide

  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

    View Slide

  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"

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. CD

    View Slide

  23. View Slide

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

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. Tester

    View Slide

  33. View Slide

  34. Epilog

    View Slide

  35. App Center
    GitHub Actions

    View Slide

  36. Mitigate Human Error
    1

    View Slide

  37. Guarantee Consistency
    2

    View Slide

  38. Authoritative Reference
    3

    View Slide

  39. Extensive Automation
    4

    View Slide

  40. Archive & History
    5

    View Slide

  41. View Slide

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

    View Slide