Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adaptable Innovation: How Microsoft Leverages R...

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.

Lorenzo 'kelset' Sciandra

April 10, 2024
Tweet

More Decks by Lorenzo 'kelset' Sciandra

Other Decks in Programming

Transcript

  1. "Picking a technology is like a box of chocolate. You

    never know what you're gonna get." #QConLondon 10-apr-24 @kelset 3
  2. 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
  3. 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
  4. React Native Native UI Communication layer Javascript Business Logic Native

    Module Javascript React Native UI Javascript Module #QConLondon 10-apr-24 @kelset 13
  5. 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
  6. 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
  7. 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
  8. 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 📈
  9. React Native 🍎UI JS Javascript Business Logic Javascript React Native

    UI Javascript Module 🍎 🍎Module 🤖 🤖UI 🤖Module User 🍎📲 🤖📲 #QConLondon 10-apr-24 @kelset 19
  10. 🍎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
  11. 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
  12. React Native User Native UI Native Module standard native app

    100% native #QConLondon 10-apr-24 @kelset 25
  13. 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
  14. 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
  15. 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
  16. React Native User 80% Native Comms layer Javascript code 20%

    User 80% Native Comms layer Javascript code 20% #QConLondon 10-apr-24 @kelset 31
  17. 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
  18. 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
  19. 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
  20. 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
  21. React Native User 80% Native Javascript code 20% Custom comms

    layer Javascript code Javascript code #QConLondon 10-apr-24 @kelset 38
  22. 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
  23. 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
  24. React Native User Native UI Native Module 80% native Comms

    layer Javascript Business Logic headless 20% RN #QConLondon 10-apr-24 @kelset 42
  25. 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
  26. 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
  27. 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
  28. A while ago... 🥸: 🌶🌶🌶🎮 👩💻: ❗❗🔥📱 👨🔬: 🚫🧠💡📱 👩🔧:

    💬👀🍿 🧑🚀: 🔄🤯🆘📱 🥸: 🤷🌶🔙🎮 👩💻: 👏👏👏🤝🚨📱 👨🔬: 🙅🤦🆕🎭 👩🔧: 😅👉👈🙊🔮📱 🧑🚀: 🎉💭🎈❓📱 🥸: 🌶🌶🌶🎤🎮❤🔥 #QConLondon 10-apr-24 @kelset 51
  29. 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
  30. GSR #1: hire-ability Octoverse 2023 Jetbrains DevEco 2023 2023 Developer

    Survey StackOver f low #QConLondon 10-apr-24 @kelset 56
  31. GSR #1: hire-ability Octoverse 2023 Jetbrains DevEco 2023 2023 Developer

    Survey StackOver f low #QConLondon 10-apr-24 @kelset 57
  32. 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
  33. GSR #2: f lexibility 80% native 20% RN 60% native

    40% RN 90% native 10% RN #QConLondon 10-apr-24 @kelset 60
  34. Open Source #1 Open Source #2 Open Source #3 Open

    Source #4 #QConLondon 10-apr-24 @kelset 71
  35. 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
  36. Open Source #3 being part of a BIG community https://npmtrends.com/react-native

    https://reactnative.directory/ #QConLondon 10-apr-24 @kelset 75
  37. Open Source #3 being part of a BIG community https://npmtrends.com/react-native

    https://reactnative.directory/ #QConLondon 10-apr-24 @kelset 76
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. You can integrate it in an existing project ➡ adding

    overhead #QConLondon 10-apr-24 @kelset 91
  44. 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
  45. You can integrate it in an existing project ➡ disrupting

    equilibrium #QConLondon 10-apr-24 @kelset 95
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. Thank you for listening! • @kelset everywhere • 🏠 https://kelset.dev/

    Lorenzo Sciandra Please vote and leave feedback! #QConLondon 10-apr-24 @kelset 105
  52. 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
  53. 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