INP workshop

A interactive demo and workshop for learning about Interaction to Next Paint (INP)

Getting started

There is a static version of this workshop you can follow along with at http://inp.jeremy.codes/

Table of contents

1. Overview of the App
2. Experiment: Long running Event Handlers
3. Experiment: Update UI first
4. Experiment: separate handlers
5. Experiment: different event types
6. Takeaway
7. Experiment: no UI update?
8. Experiment: input delay
9. Experiment: what about non-visual updates?
10. Discuss: presentation delays
11. Experiment: requestAnimationFrame
12. Look at tooling
13. Experiment: async effects
14. Lesson: if you cannot remove it, at least move it!
15. What worked, what did not?
16. Mid-point summary
17. Multiple interactions (and rage clicks)
18. Strategy 1: debounce
19. Strategy 2: interrupt long running work
20. Strategy 2: now with yield()
21. Strategy 2: now with AbortContoller()
22. Conclusion

Next Demo: Taking lessons to ReactJS site

• Repo: mmocny/inp-workshop-nextjs