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
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.
8. Master branch Feature Branch
9. Azure Pipelines github.com/ariya/hello-react-native
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
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.
21. App Center github.com/ariya/hello-react-native
26. Tester
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
36. Thank You Some artworks are from http://openclipart.org. @ariyahidayat