Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practical CI/CD for React Native

Practical CI/CD for React Native

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

May 21, 2019
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

  1. CI/CD for React Native

    View full-size slide

  2. Every great change
    is preceded by chaos.
    Deepak
    Chopra

    View full-size slide

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

    View full-size slide

  4. Developer
    *.apk
    Tester

    View full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

  7. Master branch
    Feature Branch

    View full-size slide

  8. Azure Pipelines
    github.com/ariya/hello-react-native

    View full-size slide

  9. - job: Android
    pool:
    vmImage: 'macOS 10.13’
    steps:
    - task: NodeTool@0
    inputs:
    versionSpec: '8.x’
    - script: yarn install
    - task: Gradle@2
    inputs:
    workingDirectory: 'android/’
    gradleWrapperFile: 'android/gradlew’
    tasks: 'assembleDebug'
    azure-pipelines.yml

    View full-size slide

  10. ========================== Starting Command Output ==============
    [command]/bin/bash --noprofile --norc
    /home/vsts/work/_temp/48d0edca-9f9e-4690-bf28-c96bd1471508.sh
    > [email protected] static-code-analysis /home/vsts/work/1/s
    > npm run tslint && npm run prettier
    > [email protected] tslint /home/vsts/work/1/s
    > tslint -p src
    > [email protected] prettier /home/vsts/work/1/s
    > prettier --check "src/**/*.{ts,tsx}"
    Checking formatting...
    All matched files use Prettier code style!

    View full-size slide

  11. ========================== Starting Command Output =================
    [command]/bin/bash --noprofile --norc /home/vsts/work/_temp/e0e0cdd8-2599-
    4d4d-882e-32a481a62cbe.sh
    > [email protected] dynamic-code-analysis /home/vsts/work/1/s
    > jest --coverage
    PASS src/__tests__/App-test.tsx (6.991s)
    ✓ renders correctly (537ms)
    ----------|----------|----------|----------|----------|-------------------|
    File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
    ----------|----------|----------|----------|----------|-------------------|
    All files | 100 | 100 | 100 | 100 | |
    App.tsx | 100 | 100 | 100 | 100 | |
    ----------|----------|----------|----------|----------|-------------------|
    Test Suites: 1 passed, 1 total
    Tests: 1 passed, 1 total
    Snapshots: 0 total
    Time: 16.782s
    Ran all test suites.

    View full-size slide

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

    View full-size slide

  13. App Center
    Azure Pipelines

    View full-size slide

  14. Mitigate Human Error
    1

    View full-size slide

  15. Guarantee Consistency
    2

    View full-size slide

  16. Authoritative Reference
    3

    View full-size slide

  17. Extensive Automation
    4

    View full-size slide

  18. Archive & History
    5

    View full-size slide

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

    View full-size slide