Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backend for mobile app - Droidcon SG 2022

Backend for mobile app - Droidcon SG 2022

"Backend for mobile app - Lesson learned from LINE MAN app" session in Droidcon SG 2022 at Oct 14, 2022

Somkiat Khitwongwattana

October 19, 2022
Tweet

More Decks by Somkiat Khitwongwattana

Other Decks in Technology

Transcript

  1. Backend for mobile app Lesson learned from LINE MAN app

    Somkiat Khitwongwattana Android GDE Staff Software Engineer at LINE MAN Wongnai
  2. { "data": { "orderId": "LMF-220929-275258587", "userId": "U282752035040160", "orderStatus": "ASSIGNING_DRIVER", "actualStatus":

    "ASSIGNING_DRIVER", "orderType": "FOOD", "restaurantName": "อิซาโอะ (Isao) Isao", ... }, "root": { "child": [ ... ], "type": "FRAME" } }
  3. { "data": { "orderId": "LMF-220929-275258587", "userId": "U282752035040160", "orderStatus": "ASSIGNING_DRIVER", "actualStatus":

    "ASSIGNING_DRIVER", "orderType": "FOOD", "restaurantName": "อิซาโอะ (Isao) Isao", ... }, "root": { "child": [ ... ], "type": "FRAME" } }
  4. { "data": { "orderId": "LMF-220929-275258587", "userId": "U282752035040160", "orderStatus": "ASSIGNING_DRIVER", "actualStatus":

    "ASSIGNING_DRIVER", "orderType": "FOOD", "restaurantName": "อิซาโอะ (Isao) Isao", ... }, "root": { "child": [ ... ], "type": "FRAME" } }
  5. "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" },
  6. "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" },
  7. "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" },
  8. "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" },
  9. "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,
  10. "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": { ... },
  11. "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": { ... },
  12. "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": { ... },
  13. "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
  14. Mobile Backend for Mobile General Purpose Backend REST REST REST

    REST REST REST REST REST REST REST REST REST REST
  15. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC

    gRPC gRPC gRPC gRPC gRPC gRPC REST REST REST REST
  16. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC

    gRPC gRPC gRPC gRPC gRPC gRPC REST REST REST REST
  17. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC

    gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC REST
  18. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC

    gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC REST
  19. Mobile Backend for Mobile General Purpose Backend gRPC gRPC gRPC

    gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC gRPC REST
  20. { "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": [ ... ] } }
  21. { "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": [ ... ] } }
  22. { "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": [ ... ] } }
  23. App version 4.3.0 Screen with BFF Screen without BFF Home

    Restaurant Payment /api/payment/v1/payments
  24. App version 7.5.0 Screen with BFF Screen without BFF Home

    Restaurant Payment /api/payment/v2/payments
  25. What’s next • More dynamic UI • More adoption •

    App configuration • Feature flag
  26. Summary • Recommended for middle-to-large-scale product • Not silver bullet

    • Team discussion is required • No one solution for all
  27. 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