Pragmatic drag and drop
Flexible and fast drag and drop for any experience on any tech stackPerformance comparison
Pragmatic drag and drop has been optimized for performance. Truly comparing drag and drop solutions is problematic as there is inevitably tradeoffs that solutions make (feature set, quality, visual experience and so on).
In order to try make a reasonable comparison, we have compared the performance of the same complete example (including accessibility), (opens new window), with drag and drop powered by different drag and drop solutions.
Comparison: Startup time
Measure: Time to interactive (TTI) - Mobile
| Case | Result |
|---|---|
| Baseline (no drag and drop) | +0ms |
react-beautiful-dnd | +275ms |
react-dnd | +387ms |
@dnd-kit | +131ms |
| Pragmatic drag and drop | +6ms |
Measure: Time to interactive (TTI) - Desktop
| Case | Result |
|---|---|
| Baseline (no drag and drop) | +0ms |
react-beautiful-dnd | +180ms |
react-dnd | +166ms |
@dnd-kit | +129ms |
| Pragmatic drag and drop | +1ms |
Details
Method
- Measured using our baseline board example with 48 cards spread over 3 columns
- 140 runs per URL on the mobile throttling preset
- 140 runs per URL on the desktop throttling preset
- A new Chrome instance when a URL or throttle preset changed
- Runs done in sequence to reduce noise (the job took 5 hours to run!)
- p50 result (the median) selected after extreme outliers were removed (a value more than 3 standard deviations away from the average)
Environment
- GitHub hosted runner
ubuntu-latest(Ubuntu22.04)- 2-core CPU (x86_64)
7GBof RAM14GBof SSD space
- Lighthouse
9.6.7 - Chrome
106.0.5249.91 - Next.js
12.3.1 - React
18.2.0 - Hosted on vercel, (opens new window)
Comparison: Server side rendering
| Case | Result | Difference |
|---|---|---|
| Baseline (no drag and drop) | 11.2ms | +0ms |
react-beautiful-dnd | 22.1ms | +10.9ms |
react-dnd | 16.2ms | +5ms |
| Pragmatic drag and drop | 11.3ms | +0.1ms |
Details
- Measured using our baseline board example with 99 cards spread over 3 columns.
- Tested on an Apple M1
- 6x CPU slowdown applied (the M1 is a beast)
- Using
react@16 - Measured
ReactServer.renderToString()locally usingstorybook-addon-performance(10 samples per variant)
Feature set comparison
| Drag and drop library | Pragmatic drag and drop (element adapter) | React Beautiful DnD | React DnD (+ react-dnd-html5-backend) | DnD kit (+ @dnd-kit/modifiers + @dnd-kit/sortable) | Draggable (Shopify) |
|---|---|---|---|---|---|
| Size (gzip) | 4.7 kB | 31 kB | 24.8 kB | 26.9 kB | 11.8 kB |
| Size (minified) | 13.5 kB | 105 kB | 49.6 kB | 56.1 kB | 68.2kB |
| Supports deferred loading | |||||
| Accessible | (with provided toolchain) | ||||
| Pseudomorphism affordances | (uses lines and color) | (up to consumer) | |||
| Incremental (performance for what you use) | |||||
| Framework compatibility | Any | React only | React only | React only | Any |
| Controls dragging item's movement ("rails") | (defer to web platform) | ||||
| Drags elements | |||||
| Handles file drops | |||||
| Handles URL, text, image dragging | |||||
| Drags across browser windows | |||||
| Can change DOM during a drag | |||||
| Powers drawing interaction |