Adaptable Innovation: How Microsoft Leverages React Native for Strategic Advantage

Slide 1

Slide 1 text

Adaptable Innovation How Microsoft Leverages React Native for Strategic Advantage

Slide 2

Slide 2 text

#QConLondon 10-apr-24 @kelset 2

Slide 3

Slide 3 text

"Picking a technology is like a box of chocolate. You never know what you're gonna get." #QConLondon 10-apr-24 @kelset 3

Slide 4

Slide 4 text

Adaptable Innovation How Microsoft Leverages React Native for Strategic Advantage #QConLondon 10-apr-24 @kelset 4

Slide 5

Slide 5 text

Adaptable Strategic #QConLondon 10-apr-24 @kelset 5

Slide 6

Slide 6 text

Adaptable Strategic Technical reasons Non technical reasons #QConLondon 10-apr-24 @kelset 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Adaptability #QConLondon 10-apr-24 @kelset 9

Slide 10

Slide 10 text

React Native Native Communication layer Javascript #QConLondon 10-apr-24 @kelset 10

Slide 11

Slide 11 text

React Native #QConLondon 10-apr-24 @kelset 11

Slide 12

Slide 12 text

React Native #QConLondon 10-apr-24 @kelset 12

Slide 13

Slide 13 text

React Native Native UI Communication layer Javascript Business Logic Native Module Javascript React Native UI Javascript Module #QConLondon 10-apr-24 @kelset 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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 📈

Slide 18

Slide 18 text

And this is where things start to get interesting #QConLondon 10-apr-24 @kelset 18

Slide 19

Slide 19 text

React Native 🍎UI JS Javascript Business Logic Javascript React Native UI Javascript Module 🍎 🍎Module 🤖 🤖UI 🤖Module User 🍎📲 🤖📲 #QConLondon 10-apr-24 @kelset 19

Slide 20

Slide 20 text

🍎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

Slide 21

Slide 21 text

And that's what we did https://microsoft.github.io/react-native-windows/ #QConLondon 10-apr-24 @kelset 21

Slide 22

Slide 22 text

And there's even more https://www.reactnativetv.com/ https://callstack.github.io/react-native-visionos-docs/ #QConLondon 10-apr-24 @kelset 22

Slide 23

Slide 23 text

Another dimension of adaptability #QConLondon 10-apr-24 @kelset 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

React Native User Native UI Native Module standard native app 100% native #QConLondon 10-apr-24 @kelset 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

let's take it one step further #QConLondon 10-apr-24 @kelset 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

React Native User 80% Native Comms layer Javascript code 20% #QConLondon 10-apr-24 @kelset 30

Slide 31

Slide 31 text

React Native User 80% Native Comms layer Javascript code 20% User 80% Native Comms layer Javascript code 20% #QConLondon 10-apr-24 @kelset 31

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

let's take it ONE MORE step further #QConLondon 10-apr-24 @kelset 35

Slide 36

Slide 36 text

React Native User 80% Native Comms layer Javascript code 20% #QConLondon 10-apr-24 @kelset 36

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

React Native User 80% Native Javascript code 20% Custom comms layer Javascript code Javascript code #QConLondon 10-apr-24 @kelset 38

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

"This Isn't Even My Final Form!" #QConLondon 10-apr-24 @kelset 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

React Native User Native UI Native Module 80% native Comms layer Javascript Business Logic headless 20% RN #QConLondon 10-apr-24 @kelset 42

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

How does an Microsoft app look like? #QConLondon 10-apr-24 @kelset 44

Slide 45

Slide 45 text

Microsoft has many apps using React Native https://reactnative.dev/showcase #QConLondon 10-apr-24 @kelset 45

Slide 46

Slide 46 text

And many experiences #QConLondon 10-apr-24 @kelset 46 windows macOS iOS Android

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Adaptability = both are valid React Native scenarios #QConLondon 10-apr-24 @kelset 49

Slide 50

Slide 50 text

Strategy #QConLondon 10-apr-24 @kelset 50

Slide 51

Slide 51 text

A while ago... 🥸: 🌶🌶🌶🎮 👩💻: ❗❗🔥📱 👨🔬: 🚫🧠💡📱 👩🔧: 💬👀🍿 🧑🚀: 🔄🤯🆘📱 🥸: 🤷🌶🔙🎮 👩💻: 👏👏👏🤝🚨📱 👨🔬: 🙅🤦🆕🎭 👩🔧: 😅👉👈🙊🔮📱 🧑🚀: 🎉💭🎈❓📱 🥸: 🌶🌶🌶🎤🎮❤🔥 #QConLondon 10-apr-24 @kelset 51

Slide 52

Slide 52 text

Good Strategical Reason #QConLondon 10-apr-24 @kelset 52

Slide 53

Slide 53 text

GSR #QConLondon 10-apr-24 @kelset 53

Slide 54

Slide 54 text

GSR #1: hire-ability #QConLondon 10-apr-24 @kelset 54

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

GSR #2: f lexibility #QConLondon 10-apr-24 @kelset 58

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

GSR #2: f lexibility 80% native 20% RN 60% native 40% RN 90% native 10% RN #QConLondon 10-apr-24 @kelset 60

Slide 61

Slide 61 text

GSR #3: it's alive #QConLondon 10-apr-24 @kelset 61

Slide 62

Slide 62 text

GSR #3: it's alive Native Comms layer Javascript code #QConLondon 10-apr-24 @kelset 62

Slide 63

Slide 63 text

GSR #3: it's alive Native Comms layer Javascript code #QConLondon 10-apr-24 @kelset 63

Slide 64

Slide 64 text

GSR #3: it's alive 🤔 https://github.com/reactwg/react-native-new-architecture #QConLondon 10-apr-24 @kelset 64 How many can say this?

Slide 65

Slide 65 text

GSR #4: cross-industry synergies #QConLondon 10-apr-24 @kelset 65

Slide 66

Slide 66 text

GSR #4: cross-industry synergies https://reactnative.dev/showcase #QConLondon 10-apr-24 @kelset 66

Slide 67

Slide 67 text

GSR #4: cross-industry synergies https://reactnative.dev/showcase #QConLondon 10-apr-24 @kelset 67

Slide 68

Slide 68 text

GSR #5 #QConLondon 10-apr-24 @kelset 68

Slide 69

Slide 69 text

GSR #5: because it's Open Source #QConLondon 10-apr-24 @kelset 69

Slide 70

Slide 70 text

Open Source #QConLondon 10-apr-24 @kelset 70

Slide 71

Slide 71 text

Open Source #1 Open Source #2 Open Source #3 Open Source #4 #QConLondon 10-apr-24 @kelset 71

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Open Source #2 retaining control #QConLondon 10-apr-24 @kelset 73

Slide 74

Slide 74 text

Open Source #2 retaining control #QConLondon 10-apr-24 @kelset 74

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Slide 79

Slide 79 text

"GSR" #6: using web code? #QConLondon 10-apr-24 @kelset 79

Slide 80

Slide 80 text

#QConLondon 10-apr-24 @kelset 80 GSR #6: using web code

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Tradeoffs #QConLondon 10-apr-24 @kelset 84

Slide 85

Slide 85 text

It's alive #QConLondon 10-apr-24 @kelset 85

Slide 86

Slide 86 text

It's alive ➡ you need to keep up #QConLondon 10-apr-24 @kelset 86

Slide 87

Slide 87 text

you need to keep up #QConLondon 10-apr-24 @kelset 87

Slide 88

Slide 88 text

you need to keep up #QConLondon 10-apr-24 @kelset 88

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

You can integrate it in an existing project #QConLondon 10-apr-24 @kelset 90

Slide 91

Slide 91 text

You can integrate it in an existing project ➡ adding overhead #QConLondon 10-apr-24 @kelset 91

Slide 92

Slide 92 text

adding overhead #QConLondon 10-apr-24 @kelset 92

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

You can integrate it in an existing project #QConLondon 10-apr-24 @kelset 94

Slide 95

Slide 95 text

You can integrate it in an existing project ➡ disrupting equilibrium #QConLondon 10-apr-24 @kelset 95

Slide 96

Slide 96 text

disrupting equilibrium #QConLondon 10-apr-24 @kelset 96 https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a

Slide 97

Slide 97 text

that was A LOT #QConLondon 10-apr-24 @kelset 97

Slide 98

Slide 98 text

that was A LOT #QConLondon 10-apr-24 @kelset 98

Slide 99

Slide 99 text

Let's recap #QConLondon 10-apr-24 @kelset 99

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

Thank you for listening! • @kelset everywhere • 🏠 https://kelset.dev/ Lorenzo Sciandra Please vote and leave feedback! #QConLondon 10-apr-24 @kelset 105

Slide 106

Slide 106 text

Q&A #QConLondon 10-apr-24 @kelset 106 Vote & feedback

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

Service Delivery #QConLondon 10-apr-24 @kelset 109 Native Communication layer Javascript Javascript Dev