Elevate User Experience with Background Isolate

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
    hello@alifakbar.com / @muh.alifgiant
    

    View Slide