Chapter 12. Flexbox Layout and Real-Time Updates with WebSocket - Creating Boards

The CSS3 Flexbox layout is the new model used to build the layout of a web application. It makes building flexible responsive layout structures easier, without using floats or positioning, and we will use it to build our board page.

Real-time collaboration nowadays has become popular and common in web applications, especially with the standardization of the WebSocket API. In the TaskAgile application, we will implement the real-time update of card changes based on SockJS, which is a cross-browser library that provides a WebSocket-like interface. On the server side, we will use a Spring WebSocket implementation.

In this chapter, you will learn the following:

• Implementing the UI of the board page with Flexbox
• Implementing a drag and drop feature for a card list and cards
• Implementing real-time updates with WebSocket
• Creating an event bus for cross-component communication
• Using JWT for authentication