The team would love to get feedback on the new Vue-based Kanban view is designed to handle larger datasets with ease. This solution has been in production use across portal for 1.5+ months, with ~50 users using it daily with no issues.
This replaces the default Kanban in Frappe, delivering performance improvements, especially for users dealing with heavy Kanban usage. By tackling the performance issues caused by heavy DOM manipulation in the original Kanban, we’ve implemented virtual scrolling and leveraged Vue’s virtual DOM to ensure smoother and faster interactions.
Check out the demo video and see the optimized Kanban view in action. The project is made available in GitHub and we invite you to try and give us feedback.
Demo : Tridz on LinkedIn: A faster and better Kanban for Frappe & ERPNext
GitHub: GitHub - tridz-dev/quick_kanban: A vue based kanban replacement for Frappe Desk's native Kanban Implementation (WIP)
It can be enabled/disabled fully or to selective users via site_config:
"kanban_beta": 1
"kanban_beta_users": [
"Username1",
"Username2"
]
Key Points to Note:
-
The current solution addresses several issues and enables scaling, but there is still significant room for improvement.
-
It inherits several issues from the previous Kanban, such as fetching all data at once using
frappe.desk.reportview.get. Ideally, each column should be paginated with its state maintained.
However, paginating by column can be tricky since the number of columns can vary (e.g., 2, 4, etc.). If pagination is done at the top query level, it might result in cards being loaded into only one column.
-
We’ve optimized at the DOM level; however, the API response remains inefficient and can include thousands of card data. To mitigate this, we avoided rendering all cards at once and implemented frontend virtual scroll-based column-wise pagination, improving user experience during card interactions.
-
The original Kanban used
frappe.freezeduring drag-and-drop operations, ensuring consistency between what is displayed and what is stored in the database, albeit with a slower performance. QuickKanban operates optimistically, which can lead to discrepancies in case of backend errors.
Therefore, it’s not advisable to use this Kanban for critical updates like payment confirmations without additional validation hooks. This is a trade-off between performance and consistency.
To-Do:
- Implement logic to limit the total number of cards loaded.
- Introduce better post-update checks to ensure consistency with the backend and compensate for the removal of
frappe.freeze.
Additional possible to-do points: - Incremental Data Loading: Implement incremental data loading for columns, fetching additional cards only when the user scrolls or requests more, reducing the initial load time.
- Error Handling and Retry Mechanism: Implement more robust error handling with a retry mechanism for operations like moving cards or updating columns to handle intermittent backend failures gracefully.
- User Feedback for Errors: Provide clear and immediate user feedback when backend errors occur, ensuring users are aware of inconsistencies and can take corrective action.
- Enhanced Validation: Add enhanced client-side validation before performing critical operations to minimize the chance of errors, ensuring data integrity.