Exploring Kanban: Origin and Key Functionality of JavaScript Kanban Boards
Tags: javascript, agile, projectmanagement, webdev
Published: 2021-08-24 12:26:50

The story of using the Kanban approach begins in the late 1940s. Toyota started exploring ways to improve their parts inventory control and supply customers with cars as quickly and low-costly as possible. They studied supermarkets' workflow and applied shelf-stocking techniques to factory floors.

Starting from the 1950s, workers used cards, or “kanbans”, to report on capacity levels between teams in real-time. Cards were attached to a box of spare parts used on the production line. A worker emptied the box and then sent a kanban to the warehouse with information about how many parts were needed, where, and when.

![kanban approach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c96586kapcbpql013lb.png)

The warehouse, in turn, sent a full box with a new card describing spares made. The kanban received was passed to the parts factories. Therefore, workers produced and delivered the necessary parts in the needed amount and in due time. As a result, the company reduced wait time between processes and avoided overstocking. 

Fast-forward to the 2000s, where David Anderson was the first person to use Kanban methodology in software development. He developed the Kanban approach’s idea and introduced the Kanban board, as we know it today. 

The tool was used by the Microsoft software development team to improve the bug fixing process. A developer could pick a task to work on from a buffer and then forward it to the next stage of the development process by adding it to another list.

To date, Kanban boards are applied by multiple industries for managing their projects. If used properly, the tool allows teams to work more efficiently by tracking what is in progress at a glance and identifying project bottlenecks.

However, how to choose a proper Kanban solution for your team? Let’s discuss the key feature set using the upcoming [JavaScript Kanban board](https://dhtmlx.com/docs/products/dhtmlxKanban/) by DHTMLX as an example.

![javascript-kanban-board](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34yekh0bmvxeb9bwu9ri.png)

##5 Essential Features of Kanban Board
###Task Management
Cards are a key element of a Kanban board as they are a visual representation of tasks. Thus, DHTMLX Kanban allows creating an unlimited amount of cards and editing them from the UI. Users can work with plain text via input and textarea controls, upload files, assign a task using a combobox, and set due dates via date and timepicker. It’s also possible to customize card appearance by adding an image or setting a color via a colorpicker.
###Adding Columns & Swimlanes 
A simple but extremely important feature is the ability to add columns and swimlanes. A Kanban board usually includes 3 and more columns which represent different stages of your workflow. Your team members can pass cards between columns until successful task fulfillment.

Swimlanes are the horizontal lines you can use to divide the Kanban board into two or more parts. They come in handy when you need to manage several projects on one board or split a complex project into smaller parts where teams from different departments are working on their set of tasks, etc. 
###Drag-n-Drop
Moving tasks between columns is required to visualize the workflow process and keep the team up to date. With DHTMLX Kanban, users can drag-n-drop cards between columns as well as reorder them within a column, e.g. for prioritizing tasks.
###Touch Support 
Support for touch screen events should simplify the use of Kanban boards during the team's daily routine. Therefore, users may create new tasks with a tap, edit or delete them by triggering a context menu, as well as move a card to the proper column or row with a touch drag-n-drop gesture.
###Synchronization with Third-Party Project Management Tools
You may improve your Kanban experience and create a comprehensive project management solution by combining several products. Thus, for example, you may consider using DHTMLX [Gantt chart](https://dhtmlx.com/docs/products/dhtmlxGantt/) or [Scheduler event calendar](https://dhtmlx.com/docs/products/dhtmlxScheduler/). 

The first library allows dividing a complex project into manageable tasks and subtasks, estimating the project timeline, allocating resources needed, and visualizing dependencies between tasks. The second one is a Google-like calendar component, which includes an intuitive drag-n-drop interface and 10 views to book your appointments.

Summing up, the Kanban approach is helpful for visualizing your workflow, identifying its weaknesses, and speeding up product delivery time. It is successfully used by different industries from manufacturing to software development as a Kanban board. You can choose the most suitable tool or build your own solution that would offer such essential features, as cards and columns management, intuitive drag-n-drop, touch support, and third-party integrations.

DHTMLX Kanban is under development now. You can [leave a request](https://dhtmlx.com/docs/products/dhtmlxKanban/) on the website and receive the first version as soon as it gets released.