Improving Demae-can Home Maintainability with Large-Scale Refactoring

Tomokazu Kudo (Demae-can / Product Division / Commerce Development Department / Application Development Group / Software Engineer)

https://tech-verse.me/ja/sessions/112
https://tech-verse.me/en/sessions/112
https://tech-verse.me/ko/sessions/112

Transcript

2. 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
3. Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results
4. Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results
5. About Demae-can: Our business One of the largest food delivery company in Japan
6. About Demae-can: Our business One of the largest food delivery company in Japan Merchants
7. About Demae-can: Our business One of the largest food delivery company in Japan Active Users
8. About Demae-can: Today's theme Home Screen: Shop List Screen
9. Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results
10. 2021.4~ 2020.3 Capital business partnership 2020.5 First app developer joined Demae-can Refactoring background: History We joined Demae-can app team
11. 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
12. 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
13. 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
14. Free shipping campaign UI, UX PJ Business PJ Refactoring background: Software product quality Maintainability Usability
15. Implement universal links and AppLinks UI, UX PJ Business PJ Refactoring background: Software product quality Maintainability Usability
16. 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 Can we handle bigger PJs?
17. Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results
18. 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
19. Shop List Screen APP Shop list Recommend Order history Banner API Problem of the shop list screen: Data fetching
20. Shop List API Problem of the shop list screen: Data fetching
21. 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
22. 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
23. 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
24. 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
25. Class Components - Unsafe lifecycle function - No React hooks - Not simple Legacy Problem of the shop list screen: Legacy React architecture
26. Function Components - Uses React hooks - Uses custom hooks - Simple Modern Problem of the shop list screen: Legacy React architecture
27. Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results
28. 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
29. Replace No paging Paging Shop List API Shop Search API Approach to problems: Data fetching
30. 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
31. New APIs Replace Format Shop data (Domain Logics) Shop Search Specific Shops Chain store Approach to problems: Data fetching
32. 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)
33. 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)
34. BFF Shop search Chain store Recommend Order history Banner API iOS/Android Web Data formatting Approach to problems: Data flow Specific Shops
35. 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
36. 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
37. 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
38. Approach to problems: Legacy React architecture useBannerQuery useShopListQuery usePersonalisedShop Query useShopListData useBannerQuery useShopListQuery useSpecific ShopsQuery useShopListData useChainStoreQuery useRecommend Query useOrderHistoryQuery
39. 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
40. Agenda • About Demae-can • Refactoring background • Problem of the shop list screen • Approach to problems • Refactoring Results
41. 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
42. Shop list Recommend Banner Order history API Before Refactoring Results: Architecture
43. 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
44. 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
45. Shop list screen APP Recommend Banner Order history Specific shop list Chain store useBannerQuery useShopListQuery usePersonalisedShop Query useShopListData Shop list After Refactoring Results: Architecture
46. 0 500 1000 1500 2000 2500 3000 ShopList API (No Paging) ShopSearch API (Paging) 2.9 MB 327 KB Refactoring Results: Performance
47. 0 100 200 300 400 500 600 700 800 900 ShopList API (No Paging) ShopSearch API (Paging) 800 msec 320 msec Refactoring Results: Performance
48. 0% 74% 0% 58% Line Coverage Condition Coverage Refactoring Results: Performance
49. ex.) Shop list screen footer Refactoring Results: Others
50. Refactoring Results: Others
51. Thank you