We implemented a Frappe instance for a company where 40+ users work on the Kanban view with constant updates. They often deal with hundreds of cards at a time.
Frappe’s default Kanban view constantly freezes, and our quick assumptions are:
-
Heavy DOM Manipulation: The absence of a library like Vue that uses a virtual DOM.
-
Use Virtual Scroll/Pagination when there are many cards, try implementing lazy loading, virtual scroll, or pagination.
-
Batch Operations or Debounce Calls: This is tricky. Some users (our client included) perform many operations at once, constantly freezing the UI. We feel batching operations or calls in some cases could provide visible performance gains.
What we have done so far:
We initially extended base_list and view_select to add a new view, KanbanPlus, as an alternative. However, this was taking more time, and we had to release it sooner. So now, we have added a desk page where we are implementing a Vue-based Kanban. We hope to add this as a view option in view_select and later, hopefully, replace the default one.
The development is happening in a scattered way, with contributions from interns, etc. Some experiments we did can be seen in this repo. We’ll try to consolidate all eventually and release it as an app:
https://github.com/esafwan/kanban_plus/ (check the branch ‘frappe’).
We’ll try to keep this post as a progress tracker.
Are anyone else working on this? If yes, we can join forces.
Why Vue?
Choosing Vue felt like a bad choice in the short term, as there were almost no good usable Kanban implementations for Vue 3. React would have potentially made development easier. However, with most of the Frappe ecosystem leaning towards Vue, we took that bet. We were also somewhat certain that a React-based implementation would probably never merge into Frappe.
What may interest you:
-
Vue App:
https://github.com/esafwan/kanban_plus/tree/main/KanbanPlus -
Extending base_list and view_list:
https://github.com/esafwan/kanban_plus/blob/main/kanban_plus/public/js/list_view_select.bundle.js
https://github.com/esafwan/kanban_plus/blob/main/kanban_plus/public/js/base_list.bundle.js
https://github.com/esafwan/kanban_plus/blob/main/kanban_plus/public/bundle.json -
Desk Page:
https://github.com/esafwan/kanban_plus/tree/main/kanban_plus/kanban_plus/page/kanbanplus -
How bundle is moved as of now:
https://github.com/esafwan/kanban_plus/blob/main/KanbanPlus/package.json