Adaptable Innovation: How Microsoft Leverages React Native for Strategic Advantage

Presented at QCon London 2024
---
Discover how React Native's strategic flexibility plays a key role at Microsoft, powering not just mobile apps but also desktop, Xbox, and AR/VR applications. This presentation unveils the versatile and efficient use of React Native across Microsoft's diverse ecosystem, emphasising the strategic and technological reasons for its continued selection.

With React Native, Microsoft navigates the complexities of modern software development, showcasing its adaptability across various platforms. Attendees will gain insights into the capabilities of React Native, learning how to leverage its strengths to benefit their own technology strategies and projects.

Transcript

1. Adaptable Innovation How Microsoft Leverages React Native for Strategic Advantage
2. #QConLondon 10-apr-24 @kelset 2
3. "Picking a technology is like a box of chocolate. You never know what you're gonna get." #QConLondon 10-apr-24 @kelset 3
4. Adaptable Innovation How Microsoft Leverages React Native for Strategic Advantage #QConLondon 10-apr-24 @kelset 4
5. Adaptable Strategic #QConLondon 10-apr-24 @kelset 5
6. Adaptable Strategic Technical reasons Non technical reasons #QConLondon 10-apr-24 @kelset 6
7. Adaptable Strategic Technical reasons Non technical reasons (and a Q&A at the end) give 🫵 a list of considerations to leverage at your next meeting #QConLondon 10-apr-24 @kelset 7
8. Who am I • Senior Software Engineer @ Microsoft • React Native maintainer since 2018 • @kelset everywhere • 🏠 https://kelset.dev/ Lorenzo Sciandra #QConLondon 10-apr-24 @kelset 8
9. Adaptability #QConLondon 10-apr-24 @kelset 9
10. React Native Native Communication layer Javascript #QConLondon 10-apr-24 @kelset 10
11. React Native #QConLondon 10-apr-24 @kelset 11
12. React Native #QConLondon 10-apr-24 @kelset 12
13. React Native Native UI Communication layer Javascript Business Logic Native Module Javascript React Native UI Javascript Module #QConLondon 10-apr-24 @kelset 13
14. React Native Native UI Communication layer Javascript Business Logic Native Module Javascript React Native UI Javascript Module green f ield app #QConLondon 10-apr-24 @kelset 14
15. React Native User Native UI Comms layer Javascript Business Logic Native Module Javascript React Native UI Javascript Module green f ield app Dev #QConLondon 10-apr-24 @kelset 15
16. React Native Native UI Comms layer Javascript Business Logic Native Module Javascript React Native UI Javascript Module green f ield app User 🍎📲 🤖📲 #QConLondon 10-apr-24 @kelset 16
17. React Native 🍎UI JS Javascript Business Logic Javascript React Native UI Javascript Module 🍎 🍎Module 🤖 🤖UI 🤖Module User 🍎📲 🤖📲 #QConLondon 10-apr-24 @kelset 17 It's good at speeding up time to market 📈
18. And this is where things start to get interesting #QConLondon 10-apr-24 @kelset 18
19. React Native 🍎UI JS Javascript Business Logic Javascript React Native UI Javascript Module 🍎 🍎Module 🤖 🤖UI 🤖Module User 🍎📲 🤖📲 #QConLondon 10-apr-24 @kelset 19
20. 🍎UI JS Javascript Business Logic Javascript React Native UI Javascript Module 🍎 🍎Module 🤖 🤖UI 🤖Module User 🍎📲 🤖📲 🪟 🪟UI 🪟Module 🍏 🍏UI 🍏Module 🍏💻 🪟💻 #QConLondon 10-apr-24 @kelset 20
21. And that's what we did https://microsoft.github.io/react-native-windows/ #QConLondon 10-apr-24 @kelset 21
22. And there's even more https://www.reactnativetv.com/ https://callstack.github.io/react-native-visionos-docs/ #QConLondon 10-apr-24 @kelset 22
23. Another dimension of adaptability #QConLondon 10-apr-24 @kelset 23
24. React Native User Native UI Comms layer Javascript Business Logic Native Module Javascript React Native UI Javascript Module green f ield app #QConLondon 10-apr-24 @kelset 24
25. React Native User Native UI Native Module standard native app 100% native #QConLondon 10-apr-24 @kelset 25
26. React Native User Native UI Native Module standard native app 100% native Comms layer Javascript Business Logic Javascript React Native UI Javascript Module react native integration #QConLondon 10-apr-24 @kelset 26
27. React Native User Native UI Native Module 80% native Comms layer Javascript Business Logic Javascript React Native UI Javascript Module brown f ield app 20% RN #QConLondon 10-apr-24 @kelset 27
28. let's take it one step further #QConLondon 10-apr-24 @kelset 28
29. React Native User Native UI Native Module 80% native Comms layer Javascript Business Logic Javascript React Native UI Javascript Module brown f ield app 20% RN #QConLondon 10-apr-24 @kelset 29
30. React Native User 80% Native Comms layer Javascript code 20% #QConLondon 10-apr-24 @kelset 30
31. React Native User 80% Native Comms layer Javascript code 20% User 80% Native Comms layer Javascript code 20% #QConLondon 10-apr-24 @kelset 31
32. React Native User 80% Native Comms layer JS 20% User 80% Native Comms layer JS 20% React Native Module #QConLondon 10-apr-24 @kelset 32 codebase 1 codebase 2 codebase 3
33. We do that A LOT in Microsoft RNEU 2021: Lorenzo Sciandra & Tommy Nguyen - Improve all the repos – exploring Microsoft’s DevExp #QConLondon 10-apr-24 @kelset 33
34. So we even made some tooling for it Our Journey of Making React Native a Preferred Choice - Lorenzo Sciandra & Tommy Nguyen | RNEU 2023 #QConLondon 10-apr-24 @kelset 34
35. let's take it ONE MORE step further #QConLondon 10-apr-24 @kelset 35
36. React Native User 80% Native Comms layer Javascript code 20% #QConLondon 10-apr-24 @kelset 36
37. React Native User 80% Native Custom comms layer Javascript code 20% https://github.com/microsoft/rnx-kit/tree/main/packages/react-native-host #QConLondon 10-apr-24 @kelset 37
38. React Native User 80% Native Javascript code 20% Custom comms layer Javascript code Javascript code #QConLondon 10-apr-24 @kelset 38
39. React Native User 80% Native Custom comms layer Javascript code 20% Custom comms layer Javascript code Custom comms layer Javascript code #QConLondon 10-apr-24 @kelset 39
40. "This Isn't Even My Final Form!" #QConLondon 10-apr-24 @kelset 40
41. React Native User Native UI Native Module 80% native Comms layer Javascript Business Logic Javascript React Native UI Javascript Module brown f ield app 20% RN #QConLondon 10-apr-24 @kelset 41
42. React Native User Native UI Native Module 80% native Comms layer Javascript Business Logic headless 20% RN #QConLondon 10-apr-24 @kelset 42
43. React Native User Native UI Native Module 90% native Custom Comms layer JS headless 10% RN Another JS codebase (expect talks in the future for details) #QConLondon 10-apr-24 @kelset 43
44. How does an Microsoft app look like? #QConLondon 10-apr-24 @kelset 44
45. Microsoft has many apps using React Native https://reactnative.dev/showcase #QConLondon 10-apr-24 @kelset 45
46. And many experiences #QConLondon 10-apr-24 @kelset 46 windows macOS iOS Android
47. Some apps look like this Native UI Communication layer Javascript Business Logic Native Module Javascript React Native UI Javascript Module green f ield app #QConLondon 10-apr-24 @kelset 47
48. Others are more like User 80% Native Comms layer JS 20% User 60% 40% React Native Package Native Custom comms layer JS Custom comms layer JS Another JS codebase #QConLondon 10-apr-24 @kelset 48
49. Adaptability = both are valid React Native scenarios #QConLondon 10-apr-24 @kelset 49
50. Strategy #QConLondon 10-apr-24 @kelset 50
51. A while ago... 🥸: 🌶🌶🌶🎮 👩💻: ❗❗🔥📱 👨🔬: 🚫🧠💡📱 👩🔧: 💬👀🍿 🧑🚀: 🔄🤯🆘📱 🥸: 🤷🌶🔙🎮 👩💻: 👏👏👏🤝🚨📱 👨🔬: 🙅🤦🆕🎭 👩🔧: 😅👉👈🙊🔮📱 🧑🚀: 🎉💭🎈❓📱 🥸: 🌶🌶🌶🎤🎮❤🔥 #QConLondon 10-apr-24 @kelset 51
52. Good Strategical Reason #QConLondon 10-apr-24 @kelset 52
53. GSR #QConLondon 10-apr-24 @kelset 53
54. GSR #1: hire-ability #QConLondon 10-apr-24 @kelset 54
55. GSR #1: hire-ability “A lack of talent is a top issue constraining growth.“ McKinsey Technology Trends Outlook 2023 #QConLondon 10-apr-24 @kelset 55
56. GSR #1: hire-ability Octoverse 2023 Jetbrains DevEco 2023 2023 Developer Survey StackOver f low #QConLondon 10-apr-24 @kelset 56
57. GSR #1: hire-ability Octoverse 2023 Jetbrains DevEco 2023 2023 Developer Survey StackOver f low #QConLondon 10-apr-24 @kelset 57
58. GSR #2: f lexibility #QConLondon 10-apr-24 @kelset 58
59. GSR #2: f lexibility User Native UI Native Module 80% native Comms layer Javascript Business Logic Javascript React Native UI Javascript Module brown f ield app 20% RN #QConLondon 10-apr-24 @kelset 59
60. GSR #2: f lexibility 80% native 20% RN 60% native 40% RN 90% native 10% RN #QConLondon 10-apr-24 @kelset 60
61. GSR #3: it's alive #QConLondon 10-apr-24 @kelset 61
62. GSR #3: it's alive Native Comms layer Javascript code #QConLondon 10-apr-24 @kelset 62
63. GSR #3: it's alive Native Comms layer Javascript code #QConLondon 10-apr-24 @kelset 63
64. GSR #3: it's alive 🤔 https://github.com/reactwg/react-native-new-architecture #QConLondon 10-apr-24 @kelset 64 How many can say this?
65. GSR #4: cross-industry synergies #QConLondon 10-apr-24 @kelset 65
66. GSR #4: cross-industry synergies https://reactnative.dev/showcase #QConLondon 10-apr-24 @kelset 66
67. GSR #4: cross-industry synergies https://reactnative.dev/showcase #QConLondon 10-apr-24 @kelset 67
68. GSR #5 #QConLondon 10-apr-24 @kelset 68
69. GSR #5: because it's Open Source #QConLondon 10-apr-24 @kelset 69
70. Open Source #QConLondon 10-apr-24 @kelset 70
71. Open Source #1 Open Source #2 Open Source #3 Open Source #4 #QConLondon 10-apr-24 @kelset 71
72. Open Source #1 the cost of Open Source "…this indicates f irms would spend $12.2 trillion (=$3.4 trillion + $8.8 trillion), or 3.5 times what they currently spend if they needed to pay in-house developers to write the OSS that they currently use for free." Ho ff mann, Manuel and Nagle, Frank and Zhou, Yanuo, The Value of Open Source Software (January 1, 2024). Harvard Business School Strategy Unit Working Paper No. 24-038 #QConLondon 10-apr-24 @kelset 72
73. Open Source #2 retaining control #QConLondon 10-apr-24 @kelset 73
74. Open Source #2 retaining control #QConLondon 10-apr-24 @kelset 74
75. Open Source #3 being part of a BIG community https://npmtrends.com/react-native https://reactnative.directory/ #QConLondon 10-apr-24 @kelset 75
76. Open Source #3 being part of a BIG community https://npmtrends.com/react-native https://reactnative.directory/ #QConLondon 10-apr-24 @kelset 76
77. Open Source #4 it's based on React "...because it’s tech used in different ways across the company, it allows for broader investment and centre of gravity in the React ecosystem at Microsoft" #QConLondon 10-apr-24 @kelset 77
78. Open Source #4 it's based on React "...because it’s tech used in different ways across the company, it allows for broader investment and centre of gravity in the React ecosystem at Microsoft" https://github.com/microsoft/ f luentui #QConLondon 10-apr-24 @kelset 78
79. "GSR" #6: using web code? #QConLondon 10-apr-24 @kelset 79
80. #QConLondon 10-apr-24 @kelset 80 GSR #6: using web code
81. GSR #6: using web code Native UI Communication layer Javascript Business Logic Native Module Javascript React Native UI Javascript Module #QConLondon 10-apr-24 @kelset 81
82. GSR #6: using web code Native UI Communication layer Javascript Business Logic Native Module Javascript React UI WebAPI Module #QConLondon 10-apr-24 @kelset 82
83. GSR #6: using web code? https://github.com/facebook/react-strict-dom https://github.com/microsoft/rnx-kit/pull/2504 #QConLondon 10-apr-24 @kelset 83
84. Tradeoffs #QConLondon 10-apr-24 @kelset 84
85. It's alive #QConLondon 10-apr-24 @kelset 85
86. It's alive ➡ you need to keep up #QConLondon 10-apr-24 @kelset 86
87. you need to keep up #QConLondon 10-apr-24 @kelset 87
88. you need to keep up #QConLondon 10-apr-24 @kelset 88
89. you need to keep up #QConLondon 10-apr-24 @kelset 89 Our Journey of Making React Native a Preferred Choice - Lorenzo Sciandra & Tommy Nguyen | RNEU 2023
90. You can integrate it in an existing project #QConLondon 10-apr-24 @kelset 90
91. You can integrate it in an existing project ➡ adding overhead #QConLondon 10-apr-24 @kelset 91
92. adding overhead #QConLondon 10-apr-24 @kelset 92
93. adding overhead #QConLondon 10-apr-24 @kelset 93 Custom Comms Layer New Architecture https://github.com/microsoft/rnx-kit/tree/main/packages/metro-serializer-esbuild Comms layer Custom comms layer
94. You can integrate it in an existing project #QConLondon 10-apr-24 @kelset 94
95. You can integrate it in an existing project ➡ disrupting equilibrium #QConLondon 10-apr-24 @kelset 95
96. disrupting equilibrium #QConLondon 10-apr-24 @kelset 96 https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a
97. that was A LOT #QConLondon 10-apr-24 @kelset 97
98. that was A LOT #QConLondon 10-apr-24 @kelset 98
99. Let's recap #QConLondon 10-apr-24 @kelset 99
100. Let's recap Adaptability • Thanks to its architecture, it can be modi f ied and adapted in a big number of ways • new platforms • new con f igurations • allows mix&match • Can easily share code and tooling across codebases (thanks Javascript!) #QConLondon 10-apr-24 @kelset 100
101. Let's recap Strategy • Because it's Javascript-based, unlocks biggest pool when looking for talent • Its f lexibility allows for tailored and incremental usage • The project is still very much alive • It enables cross-industry and cross-company synergies • It's Open Source #QConLondon 10-apr-24 @kelset 101
102. Let's recap • You need to keep up • It adds overhead • It might lead to disrupting equilibriums #QConLondon 10-apr-24 @kelset 102 Tradeo ff s
103. Let's recap • It can speed up your time to market while reducing overheads • React Native is incredibly adaptable • It has signi f icant bene f its when it comes to strategical reasoning • It's not without tradeo ff s • You still need to adapt these ideas to 🫵 situation *some of these e ff ects are only truly visible at big scale #QConLondon 10-apr-24 @kelset 103
104. Thank you for listening! • @kelset everywhere • 🏠 https://kelset.dev/ Lorenzo Sciandra thank you Willian, Morgan & the rest of the QCon crew! #QConLondon 10-apr-24 @kelset 104
105. Thank you for listening! • @kelset everywhere • 🏠 https://kelset.dev/ Lorenzo Sciandra Please vote and leave feedback! #QConLondon 10-apr-24 @kelset 105
106. Q&A #QConLondon 10-apr-24 @kelset 106 Vote & feedback
107. An advanced look at React Native (old arch) #QConLondon 10-apr-24 @kelset 107 RN code JS Bundle Native UI Native Modules Metro JS* vm Yoga JSON JSON bridge Shadow thread UI thread JS thread
108. An advanced look at React Native (new arch) #QConLondon 10-apr-24 @kelset 108 RN Code JS Bundle Native UI Native Modules Metro JS* vm Yoga Shadow thread UI thread JS thread JSI Fabric TurboModules types Generated Interfaces Codegen
109. Service Delivery #QConLondon 10-apr-24 @kelset 109 Native Communication layer Javascript Javascript Dev