Beautiful drag and drop: a year in review
One year ago, we at Atlassian released react-beautiful-dnd with the aim of creating a more beautiful and accessible drag and drop experience for the web 🎂🎉
react-beautiful-dndannouncement blog: Rethinking drag and drop
I wanted to take this opportunity to reflect on how far we have come in the last year, and the direction we are heading in.
A few statistics
Humble beginnings
In our original release of react-beautiful-dnd we only supported vertical reordering within single lists, with a mouse and a keyboard. That’s it!
At that point the library was very limited. However, we had big dreams and continued to press forward
Pressing forward
Over the course of a year we continued to add more improvements and features to the library. Here are some highlights — at least for me!
New features 🤩
Screen reader support
We added first class screen reader support, which when combined with keyboard dragging, allows drag and drop to be performed by people with visual impairments ❤️
Small improvements 🔬
There has been a constant stream of small improvements to make the library more stable, flexible and robust. As a result of this we have maintained a near zero bug count for the project
Getting started course 👨🏫
We have created a free course on egghead.io to help people get started with react-beautiful-dnd as quickly as possible
Performance engineering 🚀
We have invested considerable effort into making react-beautiful-dnd extremely fast. We have a number of big wins in this space:
- 99% reduction in life time (blog: Dragging React performance forward)
- 23% faster (Release 8.0)
- Documented performance recommendations which allow major improvements in big lists (guide, video)
Engineering health 👩⚕️
There is way too many things to list individually here. So I will try to name a few categories
- Testing: over 1,100 unit tests, as well as browser tests
- Validated code:
prettier,eslint,flow - Clarity: Aggressive refactoring to reduce internal friction
- Bundles: more bundle options, build to break on bundle size regressions, bundle size reductions
- Build: significant build improvements, including a 50% reduction in build times
- Documentation: massive efforts to improve clarity
- Development warnings: printing warnings in development builds when we detect a consumer is making a mistake in their usage
Where to from here?
Right now we are working on a large project to allow changes to a list while a drag is occurring, as well as a ‘grouping’ mode where you can hover over an item to group on it. Once this larger piece of work is finished there is a long list of features and improvements we are hoping to work on. They are focused around creating an even more beautiful, performant and robust experience for users. They include:
- Support for nested scroll containers
- Virtual list support
- Animated placeholders
- Programatic dragging API
- A standalone website with embedded examples
- More work on improving performance (I think I have a problem)
Thanks for everything so far! 🎉
This last year has been challenging and exhilarating. I am really excited for the future of react-beautiful-dnd and it’s place in creating a more beautiful and accessible drag and drop experience for the web.
Thank you to Atlassian and all of our external contributors who have invested so much effort and love to get react-beautiful-dnd to where it is today.
If you are looking to get started using, or contributing to react-beautiful-dnd the best place to go is to the project repository.
Cheers
More where this came from
This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
