Data oriented design in practice

on YouTube ↗01h 04m

" summary

Claims that reworking a browser animation subsystem into C++ data oriented layouts yields real gains the author shows a custom engine hitting smooth 60fps versus Chromium s choppy run and measures 6× faster for animation ticks Tools include templates for static polymorphism, copying animation definitions, and structs-of-arrays per property a central animation controller that emits arrays of new values and uses existence-based predication to avoid branches The build actually runs faster and scales to threads but costs ergonomics and harder quick edits.

AI-written summary · about

" chapters (44)

1. 0:00Intro
2. 3:41DEMO video of performance on Android
3. 4:27Agenda
4. 5:03OOP marries data with operations...
5. 10:05Data-oriented design & OOP
6. 11:35What is a CSS Animation?
7. 12:27Animation definition
8. 13:58The OOP way (chromium 66)
9. 15:36The flow
10. 17:01The state
11. 19:15Updating time and values
12. 21:17Interpolate different types of values
13. 22:19Apply the new value
14. 25:11Recap
15. 25:47Back to the drawing board
16. 27:18The Animation Controller
17. 28:42Go flat!
18. 29:17Two approaches to keep the definition
19. 30:18Avoid type erasure
20. 32:05Memory layout comparison
21. 32:46Ticking animations
22. 34:21Avoiding branches
23. 35:25A little bit of code
24. 36:03Adding an API - Controlling Animations
25. 37:15Implementing the DOM API cont.
26. 37:30Analogous concepts comparison
27. 37:44Key points
28. 38:59Style solving
29. 39:51The DOM tree styling walk
30. 41:43Issues with top-down algorithm
31. 42:02Data-oriented design approach
32. 43:03Gather children and sort
33. 43:51Compute styles for Elements and Nodes
34. 44:25Classify changes for next steps in pipeline
35. 44:46Each phase uses different data
36. 45:53Nodes with Components
37. 46:59Performance analysis
38. 47:53Scalability
39. 48:34Multithreaded animation system
40. 48:50Testability analysis
41. 49:14Modifiability analysis
42. 50:32Downsides of DoD
43. 51:29When OOP?
44. 52:53References

" related talks

• 40mUsing Data-Oriented Design to Build Apps BetterAlessio Coltellacci · DevFest Toulouse 2018
• 27mSmooth Moves: Rendering at the Speed of Right ®Jason Miller, Adam Argyle · Chrome Dev Summit 2018
• 51mData Orientation For The Win!Eduardo Madrid · CppCon 2021
• 49mRendering without lumpy bitsJake Archibald · Mobilism 2013
• 20mTo hell with jQueryKarolina Szczur · JSConf EU 2012
• 29mWatch your back, Browser! You're being observedStefan Judis · RuhrJS 2017
• 32mManaging animations (sanely) in (insanely) complex appsOpher Vishnia · YGLF 2019: Code Camp
• 09mRich AnimationMatthew Griffith · Elm Conf 2016