Book Image

Real-time Web Application Development using Vert.x 2.0

By : Tero Parviainen
Book Image

Real-time Web Application Development using Vert.x 2.0

By: Tero Parviainen

Overview of this book

<p>Vert.x is a platform for building highly networked and scalable applications on the Java Virtual Machine. Using just a few powerful building blocks, it provides a powerful framework that scales to a multitude of different usage scenarios. It is one of the few truly polyglot development platforms, providing seamless interoperability between components written in JavaScript, CoffeeScript, Java, Ruby, Python, and Groovy.</p> <p>Real-time Web Application Development using Vert.x 2.0 will show you how to get up and running on the powerful Vert.x platform. Using a hands-on example of developing a mind map editor, this book shows you how to build a Vert.x application from the ground up, and on the way introduces all of the major building blocks of Vert.x, such as integrating with a database, polyglot development, and so on.</p> <p>Real-time Web Application Development using Vert.x 2.0 will guide you step-by-step through building a Vert.x application so that you’ll be able to start building one of your own in no time. From initiation to scaling, you’ll develop a mind map editor application with real-time collaboration capabilities. As you go through the development process, you’ll get to know all the building blocks of Vert.x applications: Verticles, Worker Verticles, the Event Bus, and Modules. You’ll also see how Vert.x apps seamlessly reach into client devices by building a client application using the Vert.x Event Bus Bridge, Knockout.js, and D3.js.</p> <p>Real-time Web Application Development using Vert.x 2.0 guides you through the whole Vert.x application development process, tying all of the important concepts together with a simple, realistic example application.</p>
Table of Contents (13 chapters)

The client


Let's focus on the client-side implementation of the editor. We want the user to be able to click on any existing mind map from the list and see the mind map's contents. The contents should update in real time, based on the changes that people are making. There should also be facilities for performing the three editing operations: adding nodes, renaming nodes, and deleting nodes.

To visualize the mind map, we will use D3, a popular JavaScript data visualization library. You don't need to be familiar with the library to be able to follow along. The most relevant thing to understand is that D3 is based on a very similar idea as jQuery. You can select certain parts of the document and then manipulate that selection by changing the attributes, adding and removing elements, and attaching event handlers.

The crucial difference between D3 and jQuery is that D3 supports data binding. This means that you can attach some JavaScript data to a selection. For example, you can attach a JavaScript...