ElixirConf 2023 - Chris Gregori - Handling async tasks in LiveView with style and grace

Handling asynchronous tasks with style and grace in LiveView presentations, learn how to mitigate UI freezing and crashing with effective strategies and best practices.

Key takeaways

Asynchronous tasks are a common issue in LiveView, as users expect seamless experiences, but async tasks can cause UI to freeze or crash.
Lesson 1: Understand your async tasks and their impact on your UI. Recognize that users don’t care about your code or its complexity, only the outcome.
Lesson 2: Long-running tasks are bound to your UI and can cause issues. To mitigate this, consider using a task supervisor.
Lesson 3: Always respond to events immediately to keep your UI free. Pub/Sub is Elixir’s built-in library for sending event notifications between processes.
Lesson 4: Even when an async task is complete, it may still be waiting to render the change to the UI. Keep your UI responsive with loading states and animations.
Lesson 5: Don’t fail silently; always show a loading state and inform the user what’s happening.
Lesson 6: Consider using a task supervisor instead of firing off tasks. This helps decouple the task from the UI and allows it to run independently.
Lesson 7: Let it crash, but handle it gracefully. If an async task fails, notify the user and don’t leave them hanging.
Lesson 8: Always show a result when an async task is complete. This keeps the user informed and happy.
Always keep in mind that async tasks can cause issues, so actively plan for them. A few months back, when large language models became popular, they took up a lot of system resources.
Don’t forget to test for edge cases, as async tasks can be unpredictable. For example, refreshing a page while an async task is still running can reset the task.
Finally, consider adding a bit of polish with animations or transitions to make the UI more engaging and responsive.

ElixirConf 2023 - Chris Gregori - Handling async tasks in LiveView with style and grace

More talks