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

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
    > HelloReactNative@0.0.1 static-code-analysis /home/vsts/work/1/s
    > npm run tslint && npm run prettier
    > HelloReactNative@0.0.1 tslint /home/vsts/work/1/s
    > tslint -p src
    > HelloReactNative@0.0.1 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
    > HelloReactNative@0.0.1 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