Back-end Driven Dynamic Mobile App UI

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