Backend for mobile app - Android Bangkok Conference 2022

"Backend for mobile app - Lesson learned from LINE MAN app" session in Android Bangkok Conference 2022 at Sep 30, 2022

Transcript

1. Backend for mobile app Lesson learned from LINE MAN app Somkiat Khitwongwattana Staff Software Engineer at LINE MAN Wongnai
3. And more
4. And more
5. Client Server
6. Client UI-related data? Server
7. Client UI-related data? App version? Server
8. Client UI-related data? App version? Platform? Server
9. Client UI-related data? App version? Platform? Server Backend Developer
10. Client Server
11. Client Backend for Frontend General Purpose Server
12. Thank you
13. Thank you
14. Frontend Backend for Frontend General Purpose Backend
15. Mobile Backend for Mobile Web Backend for Web General Purpose Backend
16. Simplify Aggregate Modify Benefit Cache
17. Fast Deliver Error Handle Configure Benefit Version Control
18. Server-driven UI SDUI Benefit
19. Data General purpose Style UI Attribute Layout How UI will be Type of SDUI data
20. Backend for mobile app in LINE MAN And more
21. 2019 Beginning of BFF in LINE MAN app
22. Data Style
23. { "data": { "orderId": "LMF-220929-275258587", "userId": "U282752035040160", "orderStatus": "ASSIGNING_DRIVER", "actualStatus": "ASSIGNING_DRIVER", "orderType": "FOOD", "restaurantName": "อิซาโอะ (Isao) Isao", ... }, "root": { "child": [ ... ], "type": "FRAME" } }
24. { "data": { "orderId": "LMF-220929-275258587", "userId": "U282752035040160", "orderStatus": "ASSIGNING_DRIVER", "actualStatus": "ASSIGNING_DRIVER", "orderType": "FOOD", "restaurantName": "อิซาโอะ (Isao) Isao", ... }, "root": { "child": [ ... ], "type": "FRAME" } }
25. { "data": { "orderId": "LMF-220929-275258587", "userId": "U282752035040160", "orderStatus": "ASSIGNING_DRIVER", "actualStatus": "ASSIGNING_DRIVER", "orderType": "FOOD", "restaurantName": "อิซาโอะ (Isao) Isao", ... }, "root": { "child": [ ... ], "type": "FRAME" } }
26. "data": { ... }, "root": { "child": [ { "child": [ { "text": "Food Delivery", "id": "topbar_title", "type": "TEXT" }, { "text": "Cancel", "id": "topbar_action_button", "type": "BUTTON", "action": "CANCEL_ORDER" } ], "id": "topbar", "type": "CONTAINER" },
27. "data": { ... }, "root": { "child": [ { "child": [ { "text": "Food Delivery", "id": "topbar_title", "type": "TEXT" }, { "text": "Cancel", "id": "topbar_action_button", "type": "BUTTON", "action": "CANCEL_ORDER" } ], "id": "topbar", "type": "CONTAINER" },
28. "data": { ... }, "root": { "child": [ { "child": [ { "text": "Food Delivery", "id": "topbar_title", "type": "TEXT" }, { "text": "Cancel", "id": "topbar_action_button", "type": "BUTTON", "action": "CANCEL_ORDER" } ], "id": "topbar", "type": "CONTAINER" },
29. "data": { ... }, "root": { "child": [ { "child": [ { "text": "Food Delivery", "id": "topbar_title", "type": "TEXT" }, { "text": "Cancel", "id": "topbar_action_button", "type": "BUTTON", "action": "CANCEL_ORDER" } ], "id": "topbar", "type": "CONTAINER" },
30. "data": { ... }, "root": { "child": [ ..., { "child": [ { "text": "Please wait a moment", "attributes": { "color": "#ffffff", "fontSize": 18, "fontStyle": "SEMI_BOLD", "alignment": "CENTER" }, "id": "overlay_title", "type": "TEXT" }, { "text": "We are searching for ...", "attributes": { "color": "#ffffff", "fontSize": 12,
31. Backend for Mobile General Purpose Backend
32. UI Component TextComponent TextConcatComponent ButtonComponent ImageComponent ContainerComponent ListComponent LazyLoadComponent
33. UI Component TextComponent TextConcatComponent ButtonComponent ImageComponent ContainerComponent ListComponent LazyLoadComponent
34. UI Component TextComponent TextConcatComponent ButtonComponent ImageComponent ContainerComponent ListComponent LazyLoadComponent
35. UI Component TextComponent TextConcatComponent ButtonComponent ImageComponent ContainerComponent ListComponent LazyLoadComponent
36. "root": { "child": [ ..., { "path": "/path/to/api/lazy-item", "params": { ... }, "id": "00000001", "type": "LAZY_LOAD", "payload": { "type": "ICON_COLLECTION", "link": "/path/to/api/campaign-1234", "title": "Food Icon", "subtitle": { ... } }, "tracking": { ... } }, { "path": "/path/to/api/lazy-item", "params": { ... }, "id": "00000002", "type": "LAZY_LOAD", "payload": { ... },
37. "root": { "child": [ ..., { "path": "/path/to/api/lazy-item", "params": { ... }, "id": "00000001", "type": "LAZY_LOAD", "payload": { "type": "ICON_COLLECTION", "link": "/path/to/api/campaign-1234", "title": "Food Icon", "subtitle": { ... } }, "tracking": { ... } }, { "path": "/path/to/api/lazy-item", "params": { ... }, "id": "00000002", "type": "LAZY_LOAD", "payload": { ... },
38. "root": { "child": [ ..., { "path": "/path/to/api/lazy-item", "params": { ... }, "id": "00000001", "type": "LAZY_LOAD", "payload": { "type": "ICON_COLLECTION", "link": "/path/to/api/campaign-1234", "title": "Food Icon", "subtitle": { ... } }, "tracking": { ... } }, { "path": "/path/to/api/lazy-item", "params": { ... }, "id": "00000002", "type": "LAZY_LOAD", "payload": { ... },
39. "root": { "child": [ ..., { "path": "/path/to/api/lazy-item", "params": { ... }, "id": "00000001", "type": "LAZY_LOAD", "payload": { "type": "ICON_COLLECTION", "link": "/path/to/api/campaign-1234", "title": "Food Icon", "subtitle": { ... } }, "tracking": { ... } }, { "path": "/path/to/api/lazy-item", "params": { ... }, "id": "00000002", "type": "LAZY_LOAD", "payload": { ... }, Static UI Static UI
40. Mobile Backend for Mobile General Purpose Backend
41. Mobile Backend for Mobile General Purpose Backend REST REST REST REST REST REST REST REST REST REST REST REST REST
42. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC REST REST REST REST
43. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC REST REST REST REST
44. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC REST
45. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC REST
46. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC REST
47. Issue Analyze Payload Size Code Complexity Trade-off Team Effort
48. Knowledge Transfer Not Fully Dynamic UI Trade-off
49. Good for some use case, not all Think twice before implementing
50. More simple
51. Data
52. { "addressBook": [ ... ], "recentAddresses": [ ... ], "doubleBanner": { "coupon": { "title": "No coupon yet", "subtitle": "Let's find some!" }, "packages": { "title": "Get packages", "subtitle": "Buy & save more", "deepLink": "..." } }, "imageBanner": { "headers": [ ... ], "footers": [ ... ] } }
53. { "addressBook": [ ... ], "recentAddresses": [ ... ], "doubleBanner": { "coupon": { "title": "No coupon yet", "subtitle": "Let's find some!" }, "packages": { "title": "Get packages", "subtitle": "Buy & save more", "deepLink": "..." } }, "imageBanner": { "headers": [ ... ], "footers": [ ... ] } }
54. { "addressBook": [ ... ], "recentAddresses": [ ... ], "doubleBanner": { "coupon": { "title": "No coupon yet", "subtitle": "Let's find some!" }, "packages": { "title": "Get packages", "subtitle": "Buy & save more", "deepLink": "..." } }, "imageBanner": { "headers": [ ... ], "footers": [ ... ] } }
55. Partial force update
56. Screen with BFF Screen without BFF Home Restaurant Payment
57. App version 4.3.0 Screen with BFF Screen without BFF Home Restaurant Payment /api/payment/v1/payments
58. App version 7.5.0 Screen with BFF Screen without BFF Home Restaurant Payment /api/payment/v2/payments
59. /api/payment/v2/payments Data response /api/payment/v1/payments Update required error response
60. What’s next • Dynamic UI • More adoption • App configuration • Feature flag
61. Things to think about Before taking action
62. Tech Stack Data Format Maintainer Before taking action Issue Analyze
63. Knowledge Transfer Necessary ? User Action Before taking action Backward Compatible
64. Deployment Release Cycle Monitoring Before taking action Incident
65. Summary • Recommended for middle-to-large-scale product • Not silver bullet • Team discussion is required • No one solution for all
66. Backend for frontend (BFF) pattern— why do you need to know it? medium.com/mobilepeople/backend-for-frontend-pattern-why-you-need-to-know-it-46f94ce420b0 Why “Backend For Frontend” Application Architecture? mobilelive.ca/blog/why-backend-for-frontend-application-architecture The BFF Pattern (Backend for Frontend): An Introduction blog.bitsrc.io/bff-pattern-backend-for-frontend-an-introduction-e4fa965128bf Pattern: Backends For Frontends samnewman.io/patterns/architectural/bff/ A Deep Dive into Airbnb’s Server-Driven UI System medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server-driven-ui-system-842244c5f5 Getting started resources
67. SDUI Framework DivKit github.com/divkit/divkit Beagle github.com/ZupIT/beagle
68. Thank you (Yes, it’s really over) Somkiat Khitwongwattana @akexorcist