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
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