Elevate User Experience with Background Isolate

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. What is Multithreading
5. Process (An App) Instance of a program that is executing on a computer / phone
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”
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
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
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
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
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
12. MULTI-THREAD ALLOW US TO DELEGATE LONG RUNNING TASK INTO DIFFERENT THREAD, SO THAT UI (THREAD) WON’T BE FREEZED.” “
13. Multi-Thread Problem Race conditions, deadlocks, and synchronization Read Token Draw Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report
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
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
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)
17. Multi-Thread Problem Race conditions, deadlocks, and synchronization Shared Space (Memory & State) x0 +1 x10 Output +1 +2
18. MULTI-THREAD, WHILE VERY USEFUL, IT INTRODUCES ADDITIONAL COMPLEXITIES AND POTENTIAL ISSUES.” “
19. What is Isolate
20. FLUTTER (WAY OF WATER) MULTI-THREADING
21. Grab’s Flutter Adoption Journey Q4, 2019 Q2, 2020 Q3, 2020 Q1, 2022
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
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
24. You could see the screen is frozen, due to long running task on main thread.” “
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
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
27. Talk less, Code More! 😡 Fortunately, we already have easy access to Isolate. Using compute function.
28. Background Isolate
29. Previous Isolate Limitation Communication to Platform level need to be done on Main Isolate Main Isolate Secondary Isolate Communication Ports Method Channel
30. Previous Isolate Limitation Communication to Platform level need to be done on Main Isolate Main Isolate Background Isolate Communication Ports Method Channel
31. Show Me Codes!😡 You have to register which isolate working as Background Isolate
32. How to retrieve the data? 🧐 No easy way to do it (yet). You have to implement the Dart ports.
33. Still confused? Read resources below at your own pace to get more understanding. When you do, notice who wrote the answer on SO. 😉
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
35. Quick (Recorded) Demo
36. Show Me The Result!🧐 Loading Animation While Doing Long Running Task
37. Show Me The Result!🧐 Frame Rate Performance
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.” “
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
40. Muhammad Alif Akbar Mar 18, 2023 | Baparekraf Developer Day • 2023 Contact hello@alifakbar.com / @muh.alifgiant