Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Elevate User Experience with Background Isolate

Elevate User Experience with Background Isolate

Dicoding Indonesia

March 18, 2023
Tweet

More Decks by Dicoding Indonesia

Other Decks in Programming

Transcript

  1. Elevate user experience with Background Isolate Unlock and utilize real

    multithreading in Flutter Muhammad Alif Akbar | Senior Software Engineer at
  2. Hello, I’m Alif Senior Software Engineer, Mobile at Grab (2021

    - Present) linkedin.com/in/muhammad-alif-akbar Software House → E-Commerce →
  3. Table of Contents 1. What is Multithreading 2. What is

    Isolate 3. Background Isolate 4. Quick Demo
  4. Thread (Sub Process) Sub-component of a process that run/execute tasks

    Allocate variable “a” Set variable “a” to 100 Allocate variable “b” Set variable “b” to 200 Allocate variable “sum” Set variable “sum” to a + b Output variable “sum”
  5. Main Thread / UI Thread / Main Loop Thread that

    run main tasks, usually related to UI events Draw Splash Screen Check Token Draw Home Screen
  6. Main Thread / UI Thread / Main Loop Thread that

    run main tasks, usually related to UI events Draw Splash Screen Check Token Draw Home Screen View All Click
  7. Main Thread / UI Thread / Main Loop Thread that

    run main tasks, usually related to UI events Draw Splash Screen Check Token Draw Home Screen View All Click 1s 1s 1s 1s
  8. Main Thread / UI Thread / Main Loop Thread that

    run main tasks, usually related to UI events Draw Splash Screen 1s Get Profile Draw Home Screen View All Click 5s 1s 1s
  9. Multi-Thread Use of multiple concurrent threads within a single process

    Read Token Draw Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report
  10. MULTI-THREAD ALLOW US TO DELEGATE LONG RUNNING TASK INTO DIFFERENT

    THREAD, SO THAT UI (THREAD) WON’T BE FREEZED.” “
  11. Multi-Thread Problem Race conditions, deadlocks, and synchronization Read Token Draw

    Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report
  12. Multi-Thread Problem Race conditions, deadlocks, and synchronization Shared Space (Memory

    & State) Read Token Draw Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report
  13. Multi-Thread Problem Race conditions, deadlocks, and synchronization Read Token Draw

    Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report Shared Space (Memory & State) 3 1 2
  14. Multi-Thread Problem Race conditions, deadlocks, and synchronization Read Token Draw

    Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report Shared Space (Memory & State)
  15. Async/Await is not Isolate It’s just postponing less crucial task

    to later time Draw Splash Screen 1s Get Profile Draw Home Screen View All Click 5s 1s 1s
  16. Async/Await is not Isolate It’s just postponing less crucial task

    to later time Draw Splash Screen Await Get Profile Draw Home Screen View All Click 1s 5s 1s 1s Async Get Profile 1ms
  17. You could see the screen is frozen, due to long

    running task on main thread.” “
  18. What is Isolate As implied from the name, It’s an

    executor with Isolated Space Main Isolate Draw Splash Screen Check Token Draw Home Screen Read Token Get Profile Get Statistic Report Secondary Isolate
  19. How Isolate Communicate Through communication (send/receive) ports Main Isolate Draw

    Splash Screen Async Get Profile Draw Home Screen Exec Get Profile Get Statistic Report Await Get Profile View All Click Await Get Profile Exec Get Profile Communication Ports Secondary Isolate
  20. Talk less, Code More! 😡 Fortunately, we already have easy

    access to Isolate. Using compute function.
  21. Previous Isolate Limitation Communication to Platform level need to be

    done on Main Isolate Main Isolate Secondary Isolate Communication Ports Method Channel
  22. Previous Isolate Limitation Communication to Platform level need to be

    done on Main Isolate Main Isolate Background Isolate Communication Ports Method Channel
  23. How to retrieve the data? 🧐 No easy way to

    do it (yet). You have to implement the Dart ports.
  24. Still confused? Read resources below at your own pace to

    get more understanding. When you do, notice who wrote the answer on SO. 😉
  25. Scenarios where it’ll be helpful Why background Isolate is important

    Image Processing / Camera Filters Game 3D with GPU Acceleration High Throughput Real Time Tracking/Comms Creating camera filters, image detection and recognitions, written purely on Dart could be feasible. Todays, you could build simple Games using Flutter. There is micro framework called flame. Utilizing background Isolate, you could create more complex game with access to GPU without to have to burden the main thread. For specific use cases, where you might ignore comms cost/efficiency. You could communicate with servers as frequent as you want. Without glitching the UI due to large JSON parsing. 01 02 03
  26. Show Me The Result!🧐 Frame Rate Performance It’s very subtle

    but you could notice there’s a frame skip while transitioning on left image.” “
  27. Try to inspect App screen’s performance and identified any long

    running task that block UI thread. Moving long running task to different Thread/Isolate can help to deliver smoother UX to user. Multithreading concept in Flutter is known as Isolate. Which creates a simulated concurrent space, which has different/isolated memory and state. A completely background Isolate is now possible since Flutter 3.7.0. Key Takeaways