What is Flow?
Vaadin Flow is a framework that allows developers to write web applications completely in Java. Instead of writing HTML, CSS, and JavaScript, the user interface is constructed from UI components in Java — similar to how it’s done with Swing and JavaFX. The HTML code, CSS style sheets, and JavaScripts are still there and accessible when needed: they’re abstracted behind a rich Java API.
Flow acts as a remote control for HTML elements in the browser. These HTML elements can be simple <div> elements, or they can be more complex elements like a <vaadin-grid> web component. Flow controls the attributes, properties, and children of them. It can even perform custom JavaScript invocations.
On the server’s side, there are corresponding Java objects with which the developer interacts. Flow handles the server-side Java objects, and the client-side HTML elements in sync with each other.
Bootstrapping
The initial HTML code that’s loaded from the browser contains only some static placeholder elements along with Flow’s client-side rendering engine script. This script gets the rendering instructions for the initial view. The server sends the instructions as JSON. The client-side rendering engine interprets these instructions and builds or updates the DOM tree in the browser.
|
Note
|
DOM Definition
DOM or Document Object Model is a representation of the structure of a web page. It’s a tree structure in which every node is an element (e.g., See Document Object Model for more information about DOM. |
If you want to learn how to build a view with Vaadin Flow, check out the Getting Started Tutorial.
Reacting to Events
When you add a Vaadin Button with a server-side click listener to your UI, Flow creates a corresponding <vaadin-button> element with a DOM event listener in the browser. When a user clicks that button, Flow extracts the relevant information from the event and sends it to the server in an HTTP POST request. The server-side part of the framework looks up the corresponding Button object and invokes all the click listeners that have been added to it.
See Handling Events for more information.
Updating the UI
Once the click listeners have been called, the framework collects all of the changes that have been made to the server-side components. From that, it creates a new JSON object with rendering instructions. This JSON object is sent as a response to the HTTP POST request that initially delivered the click event. The client-side rendering engine interprets these instructions and updates the DOM tree in the browser.
Navigating
When a user clicks a link in the browser, Flow’s client-side router intercepts the click event and prevents the browser from performing the default action of loading a new page. Instead, Flow sends the event to the server to be handled by Flow’s server-side router. The server-side router looks up the Java class that corresponds to the new view, instantiates it and adds it to the server-side component tree in place of the previous view. Since the server-side component tree has then changed, a new JSON object with rendering instructions is sent back to the browser, where the client-side rendering engine updates the DOM tree.
See Routing & Navigation for more information on this.
Scrolling & Lazy Loading
Not only clicks are sent from the browser to the server. The Vaadin Grid component supports lazy loading. As the user scrolls the grid, more data is loaded from the server. There’s a JavaScript callback in the browser that gets called when the grid runs out of data. This callback sends a message to the server-side Grid object, which in turn calls its server-side data provider to load more items.
This update operation can’t be done by manipulating the DOM tree. Instead, the client-side data provider has a function that needs to be called when new data is available. Once the items have been loaded by the server, they’re turned into a custom JavaScript function call. This function call becomes an instruction in the JSON response that the server sends back to the browser. The client-side rendering engine then interprets this instruction and calls the JavaScript function, letting the client-side data provider know that there are new items available.
For more information about client-server communication, see Element API.