Accelerate your business with React Native

by januswel

Slide 1

Slide 1 text

Takagi Kensuke 2021/10/02 Accelerate your business with React Native How to build a great team

Slide 2

Slide 2 text

About me

Slide 3

Slide 3 text

a.k.a januswel • See https://januswel.com • Engineering Manager at Classmethod, Inc. • My favorite AWS services: CloudFront, L@E, CF2 Takagi Kensuke

Slide 4

Slide 4 text

Targets

Slide 5

Slide 5 text

• People who are not sure to learn React Native • People responsible for technology adoption • People who are responsible for training engineers • People responsible for optimizing the development organization • Engineers • Tech Leads • Engineering Managers • VPoEs • CTOs

Slide 6

Slide 6 text

Summary

Slide 7

Slide 7 text

Consider React Native as the first option to succeed in business

Slide 8

Slide 8 text

…Was led by meta-analysis of data from a company using React Native

Slide 9

Slide 9 text

Importance of business speed

Slide 10

Slide 10 text

VUCA

Slide 11

Slide 11 text

By Ceci Clever from Pixabay

Slide 12

Slide 12 text

The Stacy Matrix

Slide 13

Slide 13 text

Complicated Simple Complex Chaotic What How unknown known clear unclear

Slide 14

Slide 14 text

Business development processes are categorized into Complex / Chaotic

Slide 15

Slide 15 text

Cynefin framework

Slide 16

Slide 16 text

https://commons.wikimedia.org/wiki/File:Cyne fi n_framework_Feb_2011.jpeg

Slide 17

Slide 17 text

High number of iterations is the main factor for Success

Slide 18

Slide 18 text

Details of meta-analysis

Slide 19

Slide 19 text

Targets and period

Slide 20

Slide 20 text

• AirBnB 2018/06 • CoinBase 2021/05 • Discord 2021/06, 2018/07 • Mercari 2021/06 • Pinterest 2018/05 • Quipper 2018/07, 2021/07 • Shopify 2020/01 • Tableau 2020/09 • UberEats 2017/05 9 companies, 2017 - 2021

Slide 21

Slide 21 text

Research details

Slide 22

Slide 22 text

1.Find a blog post describing the use of React Native 2.Extract the pros and cons from each blog post 3.Categorize the pros 4.Verify that the cons have now been resolved

Slide 23

Slide 23 text

Acceleration factor

Slide 24

Slide 24 text

Case 01 Improving development efficiency

Slide 25

Slide 25 text

• Increasing code and test Iteration 66.67% • Shorter time to support multiple platforms 44.44% • High debugging e ff i ciency 33.33% “ The debugging tools for React Native are really powerful by Aaron Dail at Tableau “ Along with hot reloading, storybook dramatically accelerates our UI development cycle by Fanghao (Robin) Chen at Discord https://discord.com/blog/why-discord-is-sticking-with-react-native https://engineering.tableau.com/react-native-at-tableau-3-years-in-89d43c38354c

Slide 26

Slide 26 text

Case 02 Improving ROI

Slide 27

Slide 27 text

• High rate of code sharing across platforms 77.78% • Scalable web development know- how 77.78% • Increasing mobility of engineers 77.78% “ Shopify uses React extensively on the web and that know-how is now transferable to mobile by Farhan Thawar at Shopify “ Code sharing not only means implementation time can be saved, it also reduces the cognitive overhead of sharing context by Vivian Qu at Pinterest https://shopify.engineering/react-native-future-mobile-shopify https://medium.com/pinterest-engineering/supporting-react-native-at-pinterest-f8c2233f90e6

Slide 28

Slide 28 text

Case 03 Improving product quality

Slide 29

Slide 29 text

• Multiple platform support by a small team 44.44% • Immediate bug fi xes via OTA update 44.44% • High performance 44.44% “ improving engineering productivity to deploy a feature to both platforms with a single engineer by Naoya Makino at Mercari https://medium.com/mercari-engineering/why-we-decided-to-rewrite-our-ios-android-apps-from-scratch-in-react-native-9f1737558299 “ Updates are downloaded in the background and loaded once complete, avoiding user interaction by by Chris Lewis at UberEATS https://eng.uber.com/ubereats-react-native/

Slide 30

Slide 30 text

Deceleration factor

Slide 31

Slide 31 text

High learning costs

Slide 32

Slide 32 text

Training is required

Slide 33

Slide 33 text

Resolved issues

Slide 34

Slide 34 text

• Android has poor performance • Huge app size • Bugs from di ff erences between JavaScriptCore and V8 • Waiting to start apps is needed • Closed development of core features • Low third-party library quality • Lack of desired features • Upgrading React Native version is too di ff i cult • Listing lots of items is bad experience • Lack of React Native support on third-party tools / services • Accessibility support is di ffi cult

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Insights from analysis

Slide 37

Slide 37 text

• Use in green- fi eld • Provide training and skills transfer opportunities for engineers • Web -> platform • platform -> Web • Consider requirements from stakeholders • Executives, team members • More options depending on capital strength and percentage of investment in engineering • React Native -> platform native • Preferences of decision makers is main factor • A transition in either direction would be a very large investment