![]() I started with a new app using Create React app and I added a simple list of Final Space characters. This can be an existing project or a brand new project using your favorite framework like Create React App. To get started, we want a simple app that includes a list of items. We’ll be focusing on adding the ability to drag and drop to rearrange the list using React Beautiful DnD. The list that we’ll be using uses a standard unordered list ( ) and list items ( ) to create a list with a little bit of CSS to make it look like cards. In this walkthrough, we won’t spend time building the list itself. We’re going to start off with a simple list and add the ability to drag and drop. The team’s goals were to provide drag and drop capabilities with accessibility in mind, in addition to keeping it night and performant with a powerful API. If you’re not familiar with Jira, it’s probably the biggest Agile tool on the internet right now. If you don’t know of Atlassian, they’re the team behind Jira. React Beautiful DnD is an accessible drag and drop library from Atlassian. While drag and drop can have some advanced use cases, we’ll stick to basic list functionality for our walkthrough. This effect is pretty common in applications like to-do lists or project management dashboard, where you need to prioritize and create an order for how things should be done. Using an int for the index is the appropriate technical implementation until we need to scale beyond that.Drag and drop is pretty much what it sounds like - it’s an interaction allowing someone to click and drag an item, then drop it somewhere else, often having a side effect within the app. □□įor now we are targeting having 10k paying customers. To hire a PostgreSQL expert to do these kinds of micro-optimisations. If we reach the JIRA scale (complexity) it means we have more than enough cashflow □ Using an int for the index is more intuitive IMO. Going to avoid using Strings for the "rank" ( index) until we are forced to use them. This is a very fast update query even if there are hundreds of items in the listĪnd should not affect the performance/UX of our App for the foreseeable future. Even in a DB with 100 Million rows this will still happen in less than 50 ms because the update query will just be: This is a totally routine task in Postgres and Ecto. as noted, I don't expect that our DB will suffer too much from updating the rows for a list each time the ordering/priority is updated. Thank you for sharing the link to the StackOverflow. If we notice a significant performance bottleneck in this, we can target it for optimisation. It's not unheard of to have a 50 terabyte PostgreSQL database:Īnd there instances using Peta-Bytes. ![]() If the average size of an item is 1kb then it's 100 gigabytes for the whole DB. 100 items per list (though I think is quite a lot !) Then 100k people would have 100,000 x 1000 = 100,000,000 ( 100 Million) items in the DB. If each person has average 1k items spread over 10 lists i.e. ![]() The number of updates for each drag-and-drop event can potentially be the whole list.īut luckily we don't need to worry about that for the next year (at least!)īecause a decent capacity Postgres instance/cluster will handle 100k people using it without breaking a sweat. Right now we are 100% in the research & development phase.Īgreed. If you find a more efficient way of implementing this please share! Technical Implementation is 100% Flexible at this point! Try to implement the most basic drag-and-drop re-ordering and persistence+sync implementation possible.Update templates to use Tailwind classes (see SPIKE: Drag-and-drop reordering of items in a list #4 (comment)).Create a LiveView page where we can build this experiement!.Create an items schema but without people or any other unnecessary data/fields.In that Phoenix App, add the usual setup: Tailwind + Alpine see: mvp/BUILDIT.md#1-create-a-new-phoenix-app.call it "app" so that it's easy to copy-paste working code to the MVP later. Create a new Phoenix App in this repo.Sync this update to another connected client e.g. So we need to get the item.id for each item on the page and update it's new index.Į. All the other items will have their index updated. Note: we're not starting our index from 0 as this is not intuitive to non-technical people.ĭ. If the item from the bottom is moved to the top it will now have index=1 Drag an item to a different position should refresh the ordering i.e. ![]() Have a bunch of items on a page with the following fields:ī. Our objective is to SPIKE this ONE feature in a standalone way, see: dwyl/technology-stack#96Įssentially we just want to test that it's _possible to:Ī. We will achieve this visually by dragging and dropping the item to order them in terms of the priority.įrom quick searching, it looks like we can pull off basic drag-and-drop using Alpine.js: □ As outlined in dwyl/app#283 (comment) the next feature on our roadmap is prioritisation of items.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |