Improving Demae-can Home Maintainability with Large-Scale Refactoring

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Tomokazu Kudo - Android Engineer - 2016.04 ~ 2021.03 - Android Mobile App - Android Embedded System - 2021.04 ~ - Demae-can App - Learning React / React Native - Favorite Programing Language - Kotlin / TypeScript

Slide 3

Slide 3 text

Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results

Slide 4

Slide 4 text

Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results

Slide 5

Slide 5 text

About Demae-can: Our business One of the largest food delivery company in Japan

Slide 6

Slide 6 text

About Demae-can: Our business One of the largest food delivery company in Japan Merchants

Slide 7

Slide 7 text

About Demae-can: Our business One of the largest food delivery company in Japan Active Users

Slide 8

Slide 8 text

About Demae-can: Today's theme Home Screen: Shop List Screen

Slide 9

Slide 9 text

Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results

Slide 10

Slide 10 text

2021.4~ 2020.3 Capital business partnership 2020.5 First app developer joined Demae-can Refactoring background: History We joined Demae-can app team

Slide 11

Slide 11 text

Refactoring background: Software product quality Maintainability - No specification document - Complicated logic - No testing code - State Management • Search options • Delivery address (Block-code) • Standard or Schedule delivery

Slide 12

Slide 12 text

Usability - Need to wait all API responses to render the page - Time to render the page - Need to reload the all components when a state is changed Maintainability Refactoring background: Software product quality - No specification document - Complicated logic - No testing code - State Management • Search options • Delivery address (Block-code) • Standard or Schedule delivery

Slide 13

Slide 13 text

Update food category UI component Update delivery address info header component Implement universal links and AppLinks Free shipping campaign Integrate new Ads API with the page Recommend shops feature UI, UX PJ Business PJ Refactoring background: Software product quality Maintainability Usability

Slide 14

Slide 14 text

Free shipping campaign UI, UX PJ Business PJ Refactoring background: Software product quality Maintainability Usability

Slide 15

Slide 15 text

Implement universal links and AppLinks UI, UX PJ Business PJ Refactoring background: Software product quality Maintainability Usability

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results

Slide 18

Slide 18 text

Problem of the shop list screen: Summary Data flow Legacy React architecture • Huge response from an API • API response delay • Legacy class component implementation Data fetching • Complex data flow

Slide 19

Slide 19 text

Shop List Screen APP Shop list Recommend Order history Banner API Problem of the shop list screen: Data fetching

Slide 20

Slide 20 text

Shop List API Problem of the shop list screen: Data fetching

Slide 21

Slide 21 text

The number of merchants Ex.) 1500 shops 2.9 MB 800 msec • API response delay • Huge data set Problem of the shop list screen: Data fetching

Slide 22

Slide 22 text

Shop list screen APP Format shop data (Domain Logics) Shop List Recommend Banner Order history Header Generate Shop List Data Set Generate Chain List Data API - Specific shop list - Chain store - Recommend shops - Order history - Banner Problem of the shop list screen: Data flow

Slide 23

Slide 23 text

Shop ist screen APP Format Shop data (Domain Logics) Shop List Header Generate Shop List Data Set Generate Chain List Data API Problem of the shop list screen: Data flow - Specific Shop List - Chain store

Slide 24

Slide 24 text

Generate Shop List Data Set Generate Chain List Data Shop list screen APP Format Shop data (Domain Logics) Shop List Recommend Banner Order history Header API Over 300 Lines in 1 function ! Problem of the shop list screen: Data flow - Specific shop list - Chain store - Recommend shops - Order history - Banner

Slide 25

Slide 25 text

Class Components - Unsafe lifecycle function - No React hooks - Not simple Legacy Problem of the shop list screen: Legacy React architecture

Slide 26

Slide 26 text

Function Components - Uses React hooks - Uses custom hooks - Simple Modern Problem of the shop list screen: Legacy React architecture

Slide 27

Slide 27 text

Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results

Slide 28

Slide 28 text

Approach to problems: Summary • Problem: Huge response and its delay • Implement paging • Recode the processes that depend on the responses • Problem: Complex data flow • Redefine each API responsibility • Move the data flow to a BFF layer • Problem: Legacy class component implementation • Use function components instead of class components • Split components • Separate UI and business logic by using hooks Data flow Legacy React architecture Data fetching

Slide 29

Slide 29 text

Replace No paging Paging Shop List API Shop Search API Approach to problems: Data fetching

Slide 30

Slide 30 text

all shop data sets Depend on Format Shop data (Domain Logics) Shop List Generate Shop List Data Set Generate Chain List Data Approach to problems: Data fetching

Slide 31

Slide 31 text

New APIs Replace Format Shop data (Domain Logics) Shop Search Specific Shops Chain store Approach to problems: Data fetching

Slide 32

Slide 32 text

Approach to problems: Data flow Shop list screen APP Shop List Recommend Banner Order history Header Generate Shop List Data Set Generate Chain List Data API - Specific shop list - Chain store - Recommend shops - Order history - Banner Format Shop data (Domain Logics)

Slide 33

Slide 33 text

Shop list screen APP Recommend Banner Order history Header API Shop search Specific shops Chain store Approach to problems: Data flow - Specific shop list - Chain store - Recommend Shops - Order history - Banner Format Shop data (Domain Logics)

Slide 34

Slide 34 text

BFF Shop search Chain store Recommend Order history Banner API iOS/Android Web Data formatting Approach to problems: Data flow Specific Shops

Slide 35

Slide 35 text

Shop list screen APP Recommend Banner Order history Header API Shop search Recommend Banner Order history BFF Shop list Specific shops Chain store Approach to problems: Data flow Specific shops Chain store - Specific shop list - Chain store - Recommend shops - Order history - Banner Format Shop List Format Specific Shops Format order history Format recommend Format banner Format chain store

Slide 36

Slide 36 text

Function components - Rendering logic - Snapshot Testing Replace Custom hooks - Data fetch logic - Unit Testing Class Components - Rendering logic - Data fetch logic - Unsafe Lifecycle Function - Difficult to split UI and business logic - No testing code Function components - Rendering logic - Snapshot Testing React hooks - Lifecycle logic - State logic - Unit Testing Approach to problems: Legacy React architecture

Slide 37

Slide 37 text

Shop list screen APP Recommend shops Banner Order history Specific shop list Chain store useBannerQuery useShopListQuery useSpecific ShopsQuery useShopListData Shop list Approach to problems: Legacy React architecture useChainStoreQuery useRecommend Query useOrderHistoryQuery

Slide 38

Slide 38 text

Approach to problems: Legacy React architecture useBannerQuery useShopListQuery usePersonalisedShop Query useShopListData useBannerQuery useShopListQuery useSpecific ShopsQuery useShopListData useChainStoreQuery useRecommend Query useOrderHistoryQuery

Slide 39

Slide 39 text

APP useBannerQuery useShopListQuery usePersonalisedShop Query useShopListData Approach to problems: Legacy React architecture Recommend Banner Order history BFF Shop list Specific shops Chain store Format Shop List Format Specific shops Format order history Format recommend Format banner Format chain store

Slide 40

Slide 40 text

Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results

Slide 41

Slide 41 text

Refactoring Results: Summary • Improve the huge response and its delay • Improve test coverage Architecture Performance • Use function components • Use a more declarative UI style Others • Remove unnecessary features • Motivate developers

Slide 42

Slide 42 text

Shop list Recommend Banner Order history API Before Refactoring Results: Architecture

Slide 43

Slide 43 text

After Recommend Banner Order history API Shop search Specific shops Chain store Refactoring Results: Architecture Recommend Banner Order history BFF Shop list Specific shops Chain store Format Shop list Format Specific Shops Format order history Format recommend Format banner Format chain store

Slide 44

Slide 44 text

Shop list screen APP Format data (Domain Logics) Header Generate Shop List Data Set Generate Chain List Data Before - Specific shop list - Chain store - Recommend - Order history - Banner Refactoring Results: Architecture

Slide 45

Slide 45 text

Shop list screen APP Recommend Banner Order history Specific shop list Chain store useBannerQuery useShopListQuery usePersonalisedShop Query useShopListData Shop list After Refactoring Results: Architecture

Slide 46

Slide 46 text

0 500 1000 1500 2000 2500 3000 ShopList API (No Paging) ShopSearch API (Paging) 2.9 MB 327 KB Refactoring Results: Performance

Slide 47

Slide 47 text

0 100 200 300 400 500 600 700 800 900 ShopList API (No Paging) ShopSearch API (Paging) 800 msec 320 msec Refactoring Results: Performance