A interactive demo and workshop for learning about Interaction to Next Paint (INP)
There is a static version of this workshop you can follow along with at http://inp.jeremy.codes/
- Overview of the App
- Experiment: Long running Event Handlers
- Experiment: Update UI first
- Experiment: separate handlers
- Experiment: different event types
- Takeaway
- Experiment: no UI update?
- Experiment: input delay
- Experiment: what about non-visual updates?
- Discuss: presentation delays
- Experiment:
requestAnimationFrame
- Look at tooling
- Experiment: async effects
- Lesson: if you cannot remove it, at least move it!
- What worked, what did not?
- Mid-point summary
- Multiple interactions (and rage clicks)
- Strategy 1: debounce
- Strategy 2: interrupt long running work
- Strategy 2: now with
yield()
- Strategy 2: now with
AbortContoller()
- Conclusion