Back-end Driven Dynamic Mobile  App UI

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Back-end Driven Dynamic Mobile App UI #LINEDEVCONF2020

Slide 3

Slide 3 text

App Current

Slide 4

Slide 4 text

Service App Current

Slide 5

Slide 5 text

Service App Service Current

Slide 6

Slide 6 text

Service iOS Service Android Current

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Problems

Slide 9

Slide 9 text

Problems

Slide 10

Slide 10 text

Problems

Slide 11

Slide 11 text

Problems

Slide 12

Slide 12 text

Problems

Slide 13

Slide 13 text

Problems

Slide 14

Slide 14 text

Problems

Slide 15

Slide 15 text

Problems

Slide 16

Slide 16 text

Problems

Slide 17

Slide 17 text

Service iOS Service Android Problems Presentation Logic

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

SOLUTION

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Presentation Logic Service iOS Service Android Service (BFF) Solution

Slide 22

Slide 22 text

contents contents contents contents contents Solution

Slide 23

Slide 23 text

Solution

Slide 24

Slide 24 text

contents contents contents contents Solution

Slide 25

Slide 25 text

• Text • TextColor Solution

Slide 26

Slide 26 text

contents contents contents • Text • TextColor • ButtonTitle • ButtonAction Solution

Slide 27

Slide 27 text

• Text • TextColor • ButtonTitle • ButtonAction • Image Solution

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Solution

Slide 32

Slide 32 text

Solution

Slide 33

Slide 33 text

Solution

Slide 34

Slide 34 text

Solution

Slide 35

Slide 35 text

Solution

Slide 36

Slide 36 text

Solution

Slide 37

Slide 37 text

Solution

Slide 38

Slide 38 text

Solution

Slide 39

Slide 39 text

BffResponse UiComponent View Component Container Component Data Solution

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Demo Pre-order: Waiting restaurant confirmation

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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