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

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

May 21, 2019
Tweet

Transcript

  1. CI/CD for React Native

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

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

    to production!
  4. Developer *.apk Tester

  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.
  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.
  7. None
  8. Master branch Feature Branch

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

  10. None
  11. None
  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
  13. None
  14. None
  15. None
  16. None
  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!
  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.
  19. None
  20. None
  21. App Center github.com/ariya/hello-react-native

  22. None
  23. None
  24. None
  25. None
  26. Tester

  27. None
  28. Epilog

  29. App Center Azure Pipelines

  30. Mitigate Human Error 1

  31. Guarantee Consistency 2

  32. Authoritative Reference 3

  33. Extensive Automation 4

  34. Archive & History 5

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