Death to the spinner: event sourcing for reactive apps (FlaskCon 2025)

eact and other modern JavaScript frameworks promised us fast, seamless web experiences. But take a look around: the web is full of spinners, loading screens, and frustrating delays. Somewhere along the way, the promise of reactivity got tangled in complexity.

What if the solution isn’t your front end—but your back end?

In this talk, we’ll explore how event sourcing—a server-side architectural pattern—can deliver a better-than-SPA experience. You’ll see a live demo of a web app that feels snappy, keeps your data live-updating, and makes your codebase easier to maintain. No client-side state soup. No inconsistent data. Just smooth UX and robust infrastructure.

We’ll walk through how storing events, instead of just current state, enables: - Instant server-rendered UI updates - Real-time dashboards with no polling - Flexible reporting, even retroactively

You’ll leave with practical insights into building reactive, joyful web apps—without the spinner.

Transcript

1. everyday superpowers Chris May Death to the spinner Event sourcing for reactive web apps
2. everyday superpowers Source: https://dev.to/tigt/so-what-c8j
3. everyday superpowers { } { } { }
4. everyday superpowers { } { } { }
5. everyday superpowers { } { } { }
6. everyday superpowers Source: https://dev.to/tigt/so-what-c8j
7. everyday superpowers Web app performance The Standard Quo •Download a large JS payload •Process it, hold it in memory •Request data from sources •Turn JSON data into HTML A Better Web •Use small JS libraries •Use higher-speed connections for data •Bonus: Pull data from local caches •Assemble the HTML •Bonus: stream it as it’s being processed
8. everyday superpowers Hi, I’m Chris May! Python technical coach https://everydaysuperpowers.dev
9. everyday superpowers Event Sourcing
10. everyday superpowers What is different with event sourcing? How an application represents the current state Prevailing method •Reduce duplication to improve data integrity •Mutate data to update the current state Event sourcing •Save every state change •Derive the current state by reading and applying relevant changes
11. everyday superpowers What difference does that make? The prevailing method loses data. cart_id product_ids purchased_at 1234 2,4,8 2025-01-13T15:06:24 1235 2,4,8 2025-01-13T15:06:24
12. everyday superpowers What difference does that make? The prevailing method loses data. id stream_id version type payload Created 23 1234 1 CartCreated {} 2025-01-12T11:01:30 24 1234 2 ItemAdded {product_id:2} 2025-01-12T11:01:31 25 1235 1 CartCreated {} 2025-01-13T14:40:51 26 1235 2 ItemAdded {product_id:8} 2025-01-13T14:40:51 27 1235 3 ItemAdded {product_id:2} 2025-01-13T14:42:02 28 1235 4 ItemAdded {product_id:7} 2025-01-13T14:44:19 29 1234 3 ItemAdded {product_id:4} 2025-01-13T14:45:55 30 1235 5 ItemAdded {product_id:9} 2025-01-13T14:55:26 31 1235 6 ItemAdded {product_id:4} 2025-01-13T14:57:45 32 1234 4 ItemAdded {product_id:8} 2025-01-13T14:59:11 33 1235 7 ItemRemoved {product_id:7} 2025-01-13T15:05:30 34 1235 8 ItemRemoved {product_id:9} 2025-01-13T15:06:10 35 1235 9 CheckedOut {} 2025-01-13T15:06:24 36 1234 5 CheckedOut {} 2025-01-13T15:06:24
13. everyday superpowers What difference does that make? The prevailing method loses data. id stream_id version type payload Created 23 1234 1 CartCreated {} 2025-01-12T11:01:30 24 1234 2 ItemAdded {product_id:2} 2025-01-12T11:01:31 25 1235 1 CartCreated {} 2025-01-13T14:40:51 26 1235 2 ItemAdded {product_id:8} 2025-01-13T14:40:51 27 1235 3 ItemAdded {product_id:2} 2025-01-13T14:42:02 28 1235 4 ItemAdded {product_id:7} 2025-01-13T14:44:19 29 1234 3 ItemAdded {product_id:4} 2025-01-13T14:45:55 30 1235 5 ItemAdded {product_id:9} 2025-01-13T14:55:26 31 1235 6 ItemAdded {product_id:4} 2025-01-13T14:57:45 32 1234 4 ItemAdded {product_id:8} 2025-01-13T14:59:11 33 1235 7 ItemRemoved {product_id:7} 2025-01-13T15:05:30 34 1235 8 ItemRemoved {product_id:9} 2025-01-13T15:06:10 35 1235 9 CheckedOut {} 2025-01-13T15:06:24 36 1234 5 CheckedOut {} 2025-01-13T15:06:24 cart_id product_ids purchased_at 1234 2,4,8 2025-01-13T15:06:24 1235 2,4,8 2025-01-13T15:06:24
14. everyday superpowers Event sourcing is like react, for the server
15. everyday superpowers Event sourcing helps recover from errors • Show how replaying events can recover from errors
16. everyday superpowers Code repo https://github.com/Chris-May/movie_theater
17. everyday superpowers @_chrismay@fosstodon.org @chris-may-python.bsky.social https://everydaysuperpowers.dev https://everydaysuperpowers.dev