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

Back-end Driven
Dynamic Mobile 
App UI

Back-end Driven
Dynamic Mobile 
App UI

B29f42636a5f1249b640473d49aa4514?s=128

LINE Developers Thailand

September 13, 2020
Tweet

Transcript

  1. 13:40 - 14:25 Yati Dumrongsukit Verachart Tungwinyoo Back-end Driven Dynamic

    Mobile App UI iOS Engineer, LINE MAN Wongnai Android Engineer, LINE MAN Wongnai
  2. Back-end Driven Dynamic Mobile App UI #LINEDEVCONF2020

  3. App Current

  4. Service App Current

  5. Service App Service Current

  6. Service iOS Service Android Current

  7. • Heavy client logic • Maintain code across platforms •

    Deliver product Problems
  8. Problems

  9. Problems

  10. Problems

  11. Problems

  12. Problems

  13. Problems

  14. Problems

  15. Problems

  16. Problems

  17. Service iOS Service Android Problems Presentation Logic

  18. Service Service iOS Android App version 1 iOS Android App

    version 2 Problems Presentation Logic Presentation Logic
  19. SOLUTION

  20. Service Service iOS Android App version 1 iOS Android App

    version 2 Solution Presentation Logic Presentation Logic
  21. Presentation Logic Service iOS Service Android Service (BFF) Solution

  22. contents contents contents contents contents Solution

  23. Solution

  24. contents contents contents contents Solution

  25. • Text • TextColor Solution

  26. contents contents contents • Text • TextColor • ButtonTitle •

    ButtonAction Solution
  27. • Text • TextColor • ButtonTitle • ButtonAction • Image

    Solution
  28. • Label • Text • TextColor • Button • Text

    • Action • Image • Url Solution
  29. • Label • Text • TextColor • Font? • Frame?

    • Button • Text • Action • Image • Url Solution
  30. • Label • Text • TextColor • Font • Id

    • Button • Text • Action • Image • Url Solution
  31. Solution

  32. Solution

  33. Solution

  34. Solution

  35. Solution

  36. Solution

  37. Solution

  38. Solution

  39. BffResponse UiComponent View Component Container Component Data Solution

  40. Bff Service get("/order/{orderId}/status") { val orderId = call.parameters["orderId"].orEmpty() // Call

    services val serviceResponse = OrderStatusResponse() val data = mapToOrderStatusData(serviceResponse) val view = mapToOrderStatusView(serviceResponse) // create Bff Response val response = BffResponse(data, view) // respond call.respond(response) } Solution
  41. Client // Call Bff service val bffResponse = bffRepository.getOrderStatus(orderId) Val

    bffView = bffResponse.view() // Apply text from bff response’s view val orderIdLabel: TextView = view.findViewById(R.id.textViewOrderId) orderIdLabel.apply(bffView.findComponentById(“order_orderId”)) @IBOutlet private var orderIdLabel: UILabel! /// Call Bff service let bffResponse = bffRepository.getOrderStatus(orderId) let bffView = bffResponse.view /// apply text from bff response’s view orderIdLabel.apply(bffView.findComponentById("order_orderId")) Android iOS Solution
  42. PROBLEMS • Lightweight client logic • Easy to maintain •

    Delivery not depend on app adoption Pros
  43. Cons • JSON response will be larger • Can be

    overhead or over engineer in some use case
  44. Waiting restaurant confirmation Restaurant confirmed order Order was cooking Ready

    to delivery Delivery Complete Demo Pre-order
  45. Demo Pre-order: Waiting restaurant confirmation

  46. { "text": "สั่งอาหารล่วงหน้า", "id": "topbar_title" } Demo Pre-order: Waiting restaurant

    confirmation
  47. { "text": "รอการยืนยัน", "id": "info_status" } Demo Pre-order: Waiting restaurant

    confirmation
  48. { "text": "Zong วันที่ 07 ส.ค. เวลา 12:00น.", "id": "info_address_to"

    } Demo Pre-order: Waiting restaurant confirmation
  49. { "id": "overlay_image_waiting_restaura nt" } Demo Pre-order: Waiting restaurant confirmation

  50. { "text": "รอสักครู่", "id": "overlay_title" } Demo Pre-order: Waiting restaurant

    confirmation
  51. { "text": "กําลังรอการยืนยันจากร้าน ค้า", "id": "overlay_description" } Demo Pre-order: Waiting

    restaurant confirmation
  52. Demo Pre-order: Restaurant confirmed order

  53. Future • Reuse component across platforms • Auto resolve UI

    in client side
  54. Thank You #LINEDEVCONF2020