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 Slide

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

    View Slide

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

    View Slide

  4. Developer
    *.apk
    Tester

    View 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 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 Slide

  7. View Slide

  8. Master branch
    Feature Branch

    View Slide

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

    View Slide

  10. View Slide

  11. View Slide

  12. - 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 Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. ========================== 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 Slide

  18. ========================== 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 Slide

  19. View Slide

  20. View Slide

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

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. Tester

    View Slide

  27. View Slide

  28. Epilog

    View Slide

  29. App Center
    Azure Pipelines

    View Slide

  30. Mitigate Human Error
    1

    View Slide

  31. Guarantee Consistency
    2

    View Slide

  32. Authoritative Reference
    3

    View Slide

  33. Extensive Automation
    4

    View Slide

  34. Archive & History
    5

    View Slide

  35. View Slide

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

    View Slide