Chattrbox is a working application, but right now it focuses on “under the hood” business logic. It connects to the WebSockets server. It defines a message format and is able to send and receive messages.
In this chapter, you will complete Chattrbox by wiring up the UI layer. You will
continue to use Node and npm to manage your build process and act as a
server, and at the end of the chapter you will have a fully functional web-based chat app (Figure 18.1).
When you built CoffeeRun, you created FormHandler and CheckList modules that corresponded to the form and the list area. You will use the same pattern with Chattrbox for creating the ChatForm and ChatList modules.
You will also create a UserStore module that will hold information about the current chat user. These will make Chattrbox more robust and make its main modules more reusable.
Chattrbox will make use of jQuery for DOM manipulation.
But you will not load jQuery from cdnjs.com, as you did
for CoffeeRun, nor will you use a <script> tag in your HTML,
the way you have been integrating client-side dependencies.
With Browserify, this is no longer necessary.
Browserify automatically builds your JavaScript dependencies into your
application bundle to be used in your browser. So, all you need to do to integrate jQuery
is include it via import, and Browserify
will take care of the rest.
Begin by installing the jQuery library to the node_modules folder:
npm install --save-dev jquery
Open dom.js to begin writing this module.
The dom.js module will use jQuery, so add
an import statement to include it.
import $ from 'jquery';
Later in this chapter, you will install and use another third-party library. When you do, you will follow these same steps for installing and importing it.