Scheduling in React

Writing fluid use user interfaces becomes increasingly challenging as application complexity increases. Together, we’ll explore how properly scheduling UI work improves your app’s user experience. We’ll dive into Concurrent React and learn how it improves the responsiveness of web applications and what you can do with the the new Scheduler. Lastly, we take a glimpse into the future of the Web platform.

Transcript

1. Scheduling in React Creating fluid user interfaces
2. Scheduling in React @PhilippSpiess Hi, I’m Philipp @PhilippSpiess philipp-spiess philippspiess.com
3. We’re hiring! PSPDFKit for Web
4. Scheduling in React @PhilippSpiess
5. Scheduling in React @PhilippSpiess
6. Scheduling in React @PhilippSpiess 1. Scheduling in user interfaces 2. Concurrent React and the Scheduler 3. Live Demo
7. Scheduling in React @PhilippSpiess 1. Scheduling in user interfaces 2. Concurrent React and the Scheduler 3. Live Demo
8. Scheduling in React @PhilippSpiess Problems in UIs • Users expect immediate feedback • Events can happen at any time • We can’t look into the future
9. Scheduling in React @PhilippSpiess
10. Scheduling in React @PhilippSpiess Beyond React 16 Dan Abramov JSConf Iceland 2018
11. Scheduling in React @PhilippSpiess Beyond React 16 Dan Abramov JSConf Iceland 2018
12. Scheduling in React @PhilippSpiess
13. Scheduling in React @PhilippSpiess How can we do that?
14. Scheduling in React @PhilippSpiess Input Handlers A Quest to Guarantee Responsiveness Shubhie Panicker, Jason Miller Chrome Dev Summit 2018 Animation Frames Document Lifecycles (Style, Layout, Paint) Input Handlers Frame Budget (~16ms at 60Hz) Browser Event Loop
15. Scheduling in React @PhilippSpiess Problems • Long running tasks cause frame drops
 
 ➡ Make tasks smaller • Different parts have different importance
 
 ➡ We need a way to schedule work
16. Scheduling in React @PhilippSpiess
17. Scheduling in React @PhilippSpiess 1. Scheduling in user interfaces 2. Concurrent React and the Scheduler 3. Live Demo
18. Scheduling in React @PhilippSpiess Concurrent React • Allows rendering work to be paused and resumed later
 
 ➡ Makes tasks smaller
19. Scheduling in React @PhilippSpiess Scheduler • Scheduling library in the browser
 
 ➡ A way to schedule work • Unstable! API will change
20. Scheduling in React @PhilippSpiess Scheduler • Priority levels (timeout based): • Immediate • UserBlocking (250ms timeout) • Normal (5s timeout) • Low (10s timeout) • Idle (no timeout)
21. Scheduling in React @PhilippSpiess 1. Scheduling in user interfaces 2. Concurrent React and the Scheduler 3. Live Demo
22. Scheduling in React @PhilippSpiess
23. Scheduling in React @PhilippSpiess Live Demo Recap • Concurrent React can break long running tasks into junks • Scheduler allows us to prioritize important updates
24. Scheduling in React @PhilippSpiess When can I use it? • Current Goal: ~Q2 2019 • Unstable API in current stable release • Docs need to be written • Want to be the first to know? • Subscribe at this-week-in-react.org
25. Scheduling in React @PhilippSpiess Future Work • Everyone should use the same scheduler • More than one scheduler causes resource fighting • Interleaving tasks with browser work (rendering, GC)
26. Scheduling in React @PhilippSpiess Scheduler in the Browser
27. Scheduling in React @PhilippSpiess Browser Scheduling API • Developed in cooperation with React, Polymer, Ember, Google Maps, and the Web Standards Community • Aligned with the work of the React Core team • Integrated directly into the event loop
28. Scheduling in React @PhilippSpiess Recap 1. Scheduling is necessary for responsive user interfaces 2. We can solve a lot at the framework level with Concurrent React and the Scheduler 3. A Web Standards proposal is in the making that brings a scheduler API to the browser
29. Scheduling in React @PhilippSpiess !29
30. Scheduling in React @PhilippSpiess Further Resources • https://developer.mozilla.org/en-US/docs/Tools/ Performance/Scenarios/Intensive_JavaScript • https://github.com/facebook/react • https://developer.chrome.com/devsummit/schedule/ scheduling-on-off-main-thread • https://github.com/spanicker/main-thread-scheduling • https://reactjs.org/blog/2018/11/27/react-16-roadmap.html