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

Avatar for LINE Developers Thailand

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
  2. Service Service iOS Android App version 1 iOS Android App

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

    version 2 Solution Presentation Logic Presentation Logic
  4. • Label • Text • TextColor • Button • Text

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

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

    • Button • Text • Action • Image • Url Solution
  7. 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
  8. 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
  9. PROBLEMS • Lightweight client logic • Easy to maintain •

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

    overhead or over engineer in some use case