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

LINE Developers Thailand

September 13, 2020
Tweet

More Decks by LINE Developers Thailand

Other Decks in Technology

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

    View Slide

  2. Back-end Driven
    Dynamic Mobile
    App UI
    #LINEDEVCONF2020

    View Slide

  3. App
    Current

    View Slide

  4. Service
    App
    Current

    View Slide

  5. Service
    App
    Service
    Current

    View Slide

  6. Service
    iOS
    Service
    Android
    Current

    View Slide

  7. ● Heavy client logic
    ● Maintain code across platforms
    ● Deliver product
    Problems

    View Slide

  8. Problems

    View Slide

  9. Problems

    View Slide

  10. Problems

    View Slide

  11. Problems

    View Slide

  12. Problems

    View Slide

  13. Problems

    View Slide

  14. Problems

    View Slide

  15. Problems

    View Slide

  16. Problems

    View Slide

  17. Service
    iOS
    Service
    Android
    Problems
    Presentation
    Logic

    View Slide

  18. Service
    Service
    iOS
    Android
    App version 1
    iOS
    Android
    App version 2
    Problems
    Presentation
    Logic
    Presentation
    Logic

    View Slide

  19. SOLUTION

    View Slide

  20. Service
    Service
    iOS
    Android
    App version 1
    iOS
    Android
    App version 2
    Solution
    Presentation
    Logic
    Presentation
    Logic

    View Slide

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

    View Slide

  22. contents
    contents contents contents contents
    Solution

    View Slide

  23. Solution

    View Slide

  24. contents
    contents contents contents
    Solution

    View Slide

  25. • Text
    • TextColor
    Solution

    View Slide

  26. contents
    contents contents
    • Text
    • TextColor
    • ButtonTitle
    • ButtonAction
    Solution

    View Slide

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

    View Slide

  28. • Label
    • Text
    • TextColor
    • Button
    • Text
    • Action
    • Image
    • Url
    Solution

    View Slide

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

    View Slide

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

    View Slide

  31. Solution

    View Slide

  32. Solution

    View Slide

  33. Solution

    View Slide

  34. Solution

    View Slide

  35. Solution

    View Slide

  36. Solution

    View Slide

  37. Solution

    View Slide

  38. Solution

    View Slide

  39. BffResponse UiComponent
    View
    Component
    Container
    Component
    Data
    Solution

    View Slide

  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

    View Slide

  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

    View Slide

  42. PROBLEMS
    ● Lightweight client logic
    ● Easy to maintain
    ● Delivery not depend on app adoption
    Pros

    View Slide

  43. Cons
    ● JSON response will be larger
    ● Can be overhead or over engineer
    in some use case

    View Slide

  44. Waiting
    restaurant
    confirmation
    Restaurant
    confirmed
    order
    Order was
    cooking
    Ready to
    delivery
    Delivery Complete
    Demo
    Pre-order

    View Slide

  45. Demo
    Pre-order: Waiting restaurant confirmation

    View Slide

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

    View Slide

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

    View Slide

  48. {
    "text": "Zong วันที่ 07 ส.ค.
    เวลา 12:00น.",
    "id": "info_address_to"
    }
    Demo
    Pre-order: Waiting restaurant confirmation

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. Demo
    Pre-order: Restaurant confirmed order

    View Slide

  53. Future
    ● Reuse component across platforms
    ● Auto resolve UI in client side

    View Slide

  54. Thank You
    #LINEDEVCONF2020

    View Slide