React Native at Skyscanner: The Good Parts

(Presented at React Edinburgh Meetup: May 23, 2019)

This talk takes a look at what our React Native setup at Skyscanner looks like and how we maintain and scale it from an infrastructure point of view. Here’s a general outline of what I intend to cover:

-Current State of React Native in Skyscanner
-Stages where infrastructure team is involved:
-Development: Details about our in house scaffolding tool, design system and navigation solutions
-Review: A brief run through of what happens in different CI Stages and some interesting tooling decisions
-Release: A deep dive into how we measure different aspects of our application in production including react native performance metrics and code size metrics

Original Keynote presentation link: http://bit.ly/react-edi

Transcript

1. React Native at Skyscanner: The Good Parts @geekykaran
2. Karan Thakkar Sr. Software Engineer, Skyscanner @geekykaran
3. Current State ! " ✅ 6 feature teams 2 platform teams 50 developers 20 PR’s merged every week
4. Timeline Development Review Release
5. Development Review Re Scaffolding Design System Navigation
6. Development Review Re Scaffolding
7. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: (Use arrow keys) › Create a new feature Update an existing feature
8. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: (Use arrow keys) › Create a new feature Update an existing feature
9. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ReactEdinburgh Create a new feature
10. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ReactEdinburgh Create a new feature
11. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ReactEdinburgh ? What is the name of the new screen you want to create? MayMeetup Create a new feature
12. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh y Create a new feature
13. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh ? Will the new screen be deep link-able? (Y/n) y Create a new feature
14. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh ? Will the new screen be deep link-able? (Y/n) n Create a new feature
15. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh ? Will the new screen be deep link-able? No ? Will the new screen use redux? (Y/n) y Create a new feature
16. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh ? Will the new screen be deep link-able? ? Will the new screen use redux? (Y/n) y Create a new feature No
17. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh ? Will the new screen be deep link-able? ? Will the new screen use redux? Yes Create a new feature ? Do you want to create a new component? (Y/n) No
18. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh ? Will the new screen be deep link-able? ? Will the new screen use redux? Yes Create a new feature ? Do you want to create a new component? (Y/n) y No
19. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh ? Will the new screen be deep link-able? ? Will the new screen use redux? Yes Create a new feature ? Do you want to create a new component? Yes ? What is the name of the new component you want to create? No
20. Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh ? Will the new screen be deep link-able? ? Will the new screen use redux? Yes Create a new feature ? Do you want to create a new component? Yes ? What is the name of the new component you want to create? Header No ➜ react-native git:(develop)
21. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new feature you want to create? ? What is the name of the new screen you want to create? MayMeetup ReactEdinburgh ? Will the new screen be deep link-able? No ? Will the new screen use redux? Yes Create a new feature ? Do you want to create a new component? Yes ? What is the name of the new component you want to create? Header
22. ➜ react-native git:(develop) Development Review Re Scaffolding npm run cookiecutter > skyscanner-app@5.18.0 cookiecutter /Users/karanthakkar/Work/Repos/Skyscanner/skyscanner-app/react-native > node cookiecutter ? Choose what you want to do: ? What is the name of the new screen you want to create? MayMeetup ? Will the new screen be deep link-able? Yes ? Will the new screen use redux? Yes Create a new feature ? Do you want to create a new component? Yes ? What is the name of the new component you want to create? Header
23. Development Review Re Scaffolding
24. Development Review Re Design System
25. Development Review Re Design System https://backpack.github.io/ Backpack
26. Development Review Re Design System https://backpack.github.io/ Backpack
27. Development Review Re Design System Hyatt Place Bangkok Sukhumvit https://backpack.github.io/ Backpack
28. Development Review Re Design System Hyatt Place Bangkok Sukhumvit https://backpack.github.io/ Backpack
29. Development Review Re Design System Hyatt Place Bangkok Sukhumvit 8.1 https://backpack.github.io/ Backpack
30. Development Review Re Design System Hyatt Place Bangkok Sukhumvit £626.00 8.1 https://backpack.github.io/ Backpack
31. Development Review Re Design System Hyatt Place Bangkok Sukhumvit £626.00 5 nights 8.1 https://backpack.github.io/ Backpack
32. Development Review Re Design System Hyatt Place Bangkok Sukhumvit £626.00 5 nights 8.1 https://backpack.github.io/ Backpack
33. Development Review Re Design System https://github.com/Skyscanner/backpack
34. Development Review Re Navigation
35. Development Review Re Navigation navigator.push('SCREEN_1', { data: 'test' }, { navigationMode: }); 'IN_PAGE''MODAL_RIGHT_TO_LEFT'
36. Development Review Re Navigation navigator.push('SCREEN_1', { data: 'test' }, { navigationMode: }); 'MODAL_RIGHT_TO_LEFT' 'IN_PAGE' 'MODAL_BOTTOM_TO_TOP'
37. Development Review Re Navigation navigator.push('SCREEN_1', { data: 'test' }, { navigationMode: }); 'MODAL_BOTTOM_TO_TOP' 'MODAL_RIGHT_TO_LEFT'
38. Development Review Re Navigation navigator.pop()
39. Development Review Re Navigation navigator.popToPage('SCREEN_0');
40. Development Review Release
41. Development Review Release
42. Development Review Release ✅ PR
43. Development Review Release ✅ PR CI ⃪
44. Development Review Release ✅ PR CI ⃪
46. Development Review Release ✅ PR CI ⃪
47. Development Review Release ✅ PR CI ⃪
49. ⚠ skip-duplicate-code-check CONDOR JIRA-123: Some amazing change Oops, the skip-duplicate-code-check label was added to this PR. Please ch out.
50. CONDOR JIRA-123: Some amazing change Oops, the skip-duplicate-code-check label was added to this PR. Please check it out.
51. Development Review Release ✅ PR CI ⃪
52. Development Review Release ✅ PR CI ⃪ pr-ios-detox
53. Development Review Release ✅ PR CI ⃪ pr-ios-detox
54. Development Review Release
55. Development Review Release
56. pment Review Release Monitoring
57. pment Review Release , Size - Performance
58. pment Review Release , Size
59. pment Review Release , Size Javascript Bundle 0 3 6 9 12 4/15 4/16 4/17 4/18 4/19 4/20 4/21 4/22 4/23 4/24 4/25
60. pment Review Release , Size Native Code 0 5.5 11 16.5 22 4/15 4/16 4/17 4/18 4/19 4/20 4/21 4/22 4/23 4/24 4/25 Dynamic Libs Source Code Static Libs Total
61. pment Review Release - Performance
62. pment Review Release - Performance React Native Startup Time (in seconds) App Release Cycle
63. pment Review Release - Performance React Native vs. Native Startup Time (in seconds) App Release Cycle React Native Native
64. pment Review Release - Performance Native Modules Setup Localisation Culture Configuration PlatformConstants Time (in ms) 0 27.5 55 82.5 110
65. pment Review Release - Performance Turbo Modules
66. pment Review Release - Performance Turbo Modules
67. pment Review Release - Performance Turbo Modules
68. pment Review Release - Performance ✂ Code Splitting
69. pment Review Release - Performance ✂ Code Splitting
70. Thank you! @karanjthakkar @geekykaran