Atlassian Open Sources the Most Powerful “Pragmatic” Pragmatic drag and drop Component
A performance-oriented drag and drop component that supports various drag and drop scenarios, enhancing frontend user experience.
Note: Non-members can read the full story in this link.
Pragmatic drag and drop is a frontend component open-sourced by the well-known software development company Atlassian.
As the name suggests, Pragmatic drag and drop focuses on practicality, supporting many drag-and-drop scenarios, emphasizing performance, and making it safe and simple by leveraging browsers' powerful and flexible built-in drag-and-drop capabilities.
Core products under the Atlassian umbrella such as Trello, Jira, and Confluence utilize Pragmatic drag and drop.
Before Pragmatic drag and drop, Alex Reardon, the author of this component also developed another popular React open-source drag and drop component called react-beautiful-dnd.
Compared to it, Pragmatic drag and drop supports a wider range of drag and drop scenarios:
- Lists
- Panels
- Tables
- Trees
- Grids
- Drawing
- Resizing
The following images demonstrate the performance of Pragmatic Drag and Drop in different scenarios:
Pragmatic drag and drop also supports usage in any frontend framework (such as React, Svelte, Vue, Angular), not limited to specific technology stacks.
Usage in different frameworks is as follows:
- React
- Svelte
- JS
Compared to other similar open-source drag-and-drop components, the core package of Pragmatic drag-and-drop is lighter after compression, at only 4.7kb.
In terms of performance, compared to the following similar open-source frameworks:
- react-beautiful-dnd
- react-dnd
- dnd-kit
Pragmatic drag and drop’s TTI (Time to Interactive) metric is “far ahead”.
TTI: Time to Interactive, measures the time it takes for a page to become interactive, from when it starts loading to when the main sub-resources have finished rendering and the page can quickly and reliably respond to user input.
Pragmatic drag and drop has only been officially open-sourced for two weeks but has already garnered over 3.5k stars on GitHub.
For more details, visit https://github.com/atlassian/pragmatic-drag-and-drop
References
- https://www.youtube.com/watch?v=5SQkOyzZLHM
- https://atlassian.design/components/pragmatic-drag-and-drop/about
If you like my articles, consider to :
- follow me -> huizhou92
- Leave a clap👏 (50 👏👏👏👏would be the best) and a comment if you want to interact with me.
- Receives an email every time I post on Medium -> Click here!
- If you find my article helpful to you, please buy me a cup of coffee
