Programming the frontend

When the user visits our web application's homepage, the index.ejs template is rendered to screen. This template is actually just a simple HTML document that links to a client-side JavaScript file called notes.js.

If we take a look at the EJS template, we can see exactly where the JavaScript file is loaded:

<script src="notes.js"></script>

You maybe wondering where this file comes from. Actually, this JavaScript file is the one we saved into the public folder of our web application. This script is executed from the user's browser as soon as the HTML page has finished loading.

This script is responsible of doing a few things:

• Adding drag and drop capabilities to the notes

• Initializing Socket.io

• Listening for updates

• Updating the graphics to reflect changes

  Note

  As the focus of this book is interacting with RethinkDB, we won't go over the code that adds drag-and-drop capabilities to the notes or the code that works with the graphics. Instead, we'll focus on how to...