In previous sections, the fundaments of web development were briefly covered (HTML, JS, CSS). These items are often referred to as front-end development; front-end referring to items that run in the users browsers and provides the user interface experience. Figure 5 shows the example page.
For optimization and for separation of concerns, the JS and CSS code is typically consolidated into separate external files. This allows the browser to cache the content more effectively. This also separates concerns have the three fundamental aspects of web development in their own maintainable files. For HANDS, the approach is to keep the code together and as close to the area of responsibility as possible. This provides the students a single file to understand the elements and how they interact. Once the students understand this concept, the best practice of separation of individual files can be applied.
Server-side (commonly referred to as back-end) refers to operations that are performed by the server in a client–server relationship. Where the client is the HTML page and the server is a web server that runs on a remote server, reachable from a user’s browser.
There are several platforms for creating web applications and web services on the server. For HANDS, we leverage the training system HENS  to provide the infrastructure and development tools for writing Node.js and SQLite web applications. Follow the instructions to setup HENS or setup your own Node.js environment. HANDS will run on any Node.js environment. Node.js is an asynchronous event driven framework for server side processing. It is designed to build scalable network applications. With Node.js, web sites and web services can be built that expose data from multiple sources. This provides our frontend applications with information to display. HANDS is a Node.js application.
If a page requests an HTML, JS, CSS, or image file, HANDS will process the request and stream the file to the user’s browser. For this paper, a simplified version of HANDS is presented. This simplified view is the foundation and must be understood by the reader. A simple front-end page is created to call the backend application which returns JSON data. The full enterprise framework is open source and can be studied in detail .
The back-end application is shown in figure 7. In the Node.js code, a server is created and listening on localhost port 8080. When the server receives a request, it looks at the url to determine if it is the API call (/api/v1/teams) or a request for the root site (/); this is an example of a basic router. The router will process the API call and return back a JSON response that has an array with two items. The request for the root page will stream the “index.html” page to the user.
The design of individual pages with content injected using web service APIs is HANDS. This approach leverages the simplicity of HTML and AJAX to create a web application. It avoids the complexity and issues found in single page applications, by having separate pages as HTML originally proposed. It simplifies the pure server delivery approach, by only requesting the data needed for the requested page.
This hybrid approach, provides a simple and clear design for students to study while delivering a framework that is enterprise ready and extensible. The process of adding additional HTML pages, adding APIs, and updating the router continues until a Minimum Viable Product (MVP) is ready. The application is deployed to the web servers and configured. The deployment of Node.js is beyond the scope of this paper and more details can be found on the web .