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

    View Slide

  2. Hello, I’m Alif
    Senior Software Engineer, Mobile
    at Grab (2021 - Present)
    linkedin.com/in/muhammad-alif-akbar
    Software House → E-Commerce →

    View Slide

  3. Table of Contents
    1. What is Multithreading
    2. What is Isolate
    3. Background Isolate
    4. Quick Demo

    View Slide

  4. What is Multithreading

    View Slide

  5. Process (An App)
    Instance of a program that is executing on a computer / phone

    View Slide

  6. 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”

    View Slide

  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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. MULTI-THREAD ALLOW US TO
    DELEGATE LONG RUNNING TASK INTO
    DIFFERENT THREAD, SO THAT
    UI (THREAD) WON’T BE FREEZED.”

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. 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)

    View Slide

  17. Multi-Thread Problem
    Race conditions, deadlocks, and synchronization
    Shared Space
    (Memory & State)
    x0 +1 x10 Output
    +1
    +2

    View Slide

  18. MULTI-THREAD, WHILE VERY USEFUL, IT
    INTRODUCES ADDITIONAL COMPLEXITIES
    AND POTENTIAL ISSUES.”

    View Slide

  19. What is Isolate

    View Slide

  20. FLUTTER
    (WAY OF WATER)
    MULTI-THREADING

    View Slide

  21. Grab’s
    Flutter
    Adoption
    Journey
    Q4, 2019 Q2, 2020 Q3, 2020 Q1, 2022

    View Slide

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

    View Slide

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

    View Slide

  24. You could see the
    screen is frozen, due to
    long running task on
    main thread.”

    View Slide

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

    View Slide

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

    View Slide

  27. Talk less, Code More! 😡
    Fortunately, we already have easy access to Isolate. Using compute function.

    View Slide

  28. Background Isolate

    View Slide

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

    View Slide

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

    View Slide

  31. Show Me Codes!😡
    You have to register which isolate working as Background Isolate

    View Slide

  32. How to retrieve the data? 🧐
    No easy way to do it (yet). You have to implement the Dart ports.

    View Slide

  33. Still confused?
    Read resources below at your own pace to get more understanding.
    When you do, notice who wrote the answer on SO. 😉

    View Slide

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

    View Slide

  35. Quick (Recorded) Demo

    View Slide

  36. Show Me The Result!🧐
    Loading Animation While Doing Long Running Task

    View Slide

  37. Show Me The Result!🧐
    Frame Rate Performance

    View Slide

  38. 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.”

    View Slide

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

    View Slide

  40. Muhammad Alif Akbar
    Mar 18, 2023 | Baparekraf Developer Day • 2023
    Contact
    [email protected] / @muh.alifgiant

    View Slide