Syntax - Tasty Web Development Treats

806: The King of Drag and Drop: Alex Reardon

Aug 9, 2024

55:30

Snipd AI

In this conversation, Alex Reardon from Atlassian, a drag-and-drop library specialist, dives into the intricacies of web development. He unpacks the challenges of creating accessible and efficient drag-and-drop functionalities across frameworks. The discussion highlights strategies for optimizing performance, ensuring user experience on both mobile and desktop, and enhancing accessibility for all users. Alex also shares insights on evolving libraries like 'React Beautiful D&D' and emphasizes the importance of inclusive design in modern applications.

AI Summary

Highlights

AI Chapters

Episode notes

Podcast summary created with Snipd AI

Quick takeaways

Understanding user behavior and web platform capabilities is crucial for creating effective and intuitive drag-and-drop functionalities.

Accessibility in drag and drop design ensures that all users can navigate web applications effectively, accommodating various interaction methods.

Pragmatic drag and drop, a modular JavaScript library, enhances performance and simplifies integration across different frameworks like React and Vue.

Deep dives

The Importance of Drag and Drop

Drag and drop functionality is essential for enhancing user interactions on web applications, offering a more intuitive experience. This feature is widely utilized in applications like Trello, where users can easily move tasks and prioritize workflow. The complexities involved with drag and drop stem from the variety of interactions, such as rearranging lists and the necessity of adaptivity across different frameworks. Consequently, delivering a seamless drag and drop experience requires a deep understanding of user behavior and web platform capabilities.

Optimize Performance by Separating Concerns

01:36

Navigating the Complexity of Drag and Drop

01:47

Prioritize Browser Testing for Drag and Drop Features

01:45

Intro

4min

Mastering Drag and Drop on the Web

22min

Exploring Performance in Drag-and-Drop Implementations

2min

Optimizing Library Functionality and Performance

2min

Enhancing Accessibility in Drag-and-Drop Interfaces

22min

Exploring Web Events and the Art of Coffee Brewing

2min

Exploring Coffee Education and Connections

2min

Scott and Wes talk with Alex Reardon from Atlassian about developing drag-and-drop libraries, specifically the challenges with creating efficient and accessible drag-and-drop functionalities for the web. They also explore what it takes to build and implement a system that works seamlessly across various frameworks.

Show Notes

00:00 Welcome to Syntax!
01:18 Brought to you by Sentry.io.
01:51 What Alex does at Atlassian
- react-beautiful-dnd
- Pragmatic drag and drop
04:38 What makes drag and drop tricky.
06:38 Use-cases.
10:54 What security is in place?
12:30 How to make it feel native.
19:20 Is the drag and drop spec ongoing?
20:03 How do you build this headless?
21:33 How does drag and drop work with frameworks?
23:48 Making drag and drop feel the same across mobile and desktop.
26:09 What’s the key to really good drag performance?
29:58 How do you make drag and drop accessible?
34:57 Pragmatic drag and drop code vs application code.
- Shoelace
- shadcn
40:00 How does testing work?
- Playwright
- Cypress
43:15 Internal adoption at Atlassian.
44:27 Working on high-impact projects.
49:15 Versioning and internal adoption at Atlassian.
51:29 Sick Picks + Shameless Plugs.