Reuseable DOM with progressive scrolling in React (Belfast JS)

Transcript

1. REUSABLE DOM with progressive scrolling in React Chris Kitson @ CME Group
2. SETTING THE SCENE React is fairly performant out of the box Consider rendering large lists of data Each item has a corresponding DOM node including: events, positioning, styling, JS etc... ++ DOM Nodes = -- Browser Performance High rendering times and out-of-memory errors We need a solution to make our web apps more robust with huge lists of data!
3. BIG DATA LISTS
4. THE PROBLEM [ Demo Part One ]
5. VIRTUALIZING THE VIRTUAL DOM All the page DOM, React virtual DOM and all components live in memory We want a "Out of sight, out of... DOM" approach
6. THE SOLUTION 1. We define a fixed viewport for our list 2. We only render what is visible to the user 3. We re-use DOM elements (DOM Recycling) REACT-VIRTUALIZED GRID https://github.com/bvaughn/react-virtualized/
7. DEFINE THE VIEWPORT 1. Define viewport size - 1120px X 560px 2. Define measurements in local component state 3. Calculate data length values from app state data
8. THE RENDER() METHOD 1. Define cellRenderer method - computes index, grabs the data and renders the components 2. Set Overscan attributes - tweak to avoid lag
9. THE RESULT [ Demo Part Two ]
10. LIMITATIONS You must define a fixed viewport size You may need to re-calculate on window resize events for responsive layout What about dynamic row heights? [ Demo Part Three ]
11. REACT-VIRTUALIZED CELL MEASURER High-order component that automatically measures a cell's contents by temporarily rendering it in a way that is not visible to the user. Specify a fixed width to measure dynamic height (or vice versa).
12. DYNAMIC HEIGHT RENDER() METHOD
13. THE RESULT [ Demo Part Four ]
14. Progressive Scroll Activated > 300 records JS-GRID-WITH-ONE-MILLION-RECORDS
15. THANK YOU!