2014 Annual Global Online Conference on Information and Computer Technology

HTML Architecture, a Novel Development System (HANDS)

An approach for web development
Brian Carter, Chippewa Software Technology

depth understanding of the fundamentals. Often, the simple

Abstract— In this paper, a very compelling proposition is request and response concept is not understood. This is
presented, a novel approach for web development that is a hybrid especially apparent in software development shops that have
of Single Page Applications (SPA) and server side applications. rich libraries that wrap web functionality and where the
The proposed architecture lowers the entry to web development
development is strictly divided between client-side and server-
by providing a simplistic approach for development. The focus is
on HTML, JavaScript, Cascading Style Sheets, and Node.js. The side resources.
architecture provides all the components required for students to
start developing web applications and web services. The HTML
Architecture, a Novel Development System (HANDS) is a hybrid
approach leveraging the simplicity of plain old HTML pages, the
AJAX injection of HTML from SPA frameworks, and the server-
side processing found in the Node.js framework. An open source
starter kit and examples are provided.

Index Terms—education, framework, web development, html,

javascript, node.js, sqlite

I. INTRODUCTION
Web development has become one of the most in-demand
skills. To meet this need, the addition and retention of
students in this field is critical. Web development has a steep
learning curve and many obstacles. One obstacle is getting
students developing HyperText Markup Language (HTML),
Fig. 1. HANDS primitives.
JavaScript (JS), and Cascading Style Sheets (CSS)
applications that include server side processing.
The typical approach to web development training includes
After developing HANDS, the question was asked: If the
a brief introduction to HTML. Very quickly courses introduce
primitive, foundational elements can deliver any type of web
a framework that hides the complexities of front-end and
application, why introduce libraries that hide functionality and
backend (server side) development. Often this is to give
increase complexity? The position of this paper is to build an
students confidence that they can create complex web
architecture where the focus is the HTML page while only
applications. The downfall of this approach, students learn the
introducing libraries after understanding the concepts
details of the framework and not the in-depth details of the
delivered in such libraries. With this approach, when issues
foundational elements of web applications. As shown in
occur later in the development phase, the developers have the
figure 1, the primitives of HANDS include HTML, JS, CSS,
foundation to find and understand the root problems and
and Node.js.
provide solutions.
This is compounded when the student enters into a
In this paper, the focus is on HTML, CSS, and JS. A basic
corporate software development position. The majority of
website is created and studied. An understanding of the basic
companies have a well-established framework (open source or
elements are required before moving on. The goal is to
propriety) for development. This has formed a void in the in-
propose HANDS as an approach to learning web development
and to provide a foundation for enterprise development.
This work was supported in part by Sullivan University and Chippewa
Software Technology. II. HYPERTEXT MARKUP LANGUAGE
HTML, short for HyperText Markup Language, is the
authoring language used to create documents on the World
Wide Web (www). Initially, HTML was designed to publish
Brian Carter is with Sullivan University, College of Information and
Computer Technology, Louisville, KY 40205 USA (e-mail: documents, much like one would publish a journal of articles.
[email protected]) and is with Chippewa Software Technology, La HTML defines the structure and layout of a Web document
Grange, KY 40031 USA (e-mail: [email protected]). by using a variety of tags and attributes. A web browser can

978-1-4799-8311-7/15 $31.00 © 2015 IEEE 90

DOI 10.1109/GOCICT.2014.23
Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:37:05 UTC from IEEE Xplore. Restrictions apply.
read HTML files and compose them into visible web pages.
The browser transforms the tags into content by interpreting
the tags and attributes to display the page. HTML describes III. JAVASCRIPT
the structure of a website semantically along with cues for JavaScript (JS or js) is a dynamic computer programming
presentation, making it a markup language rather than a language [4]. It is added to an HTML page and used by the
programming language. The first publicly available web browser to implement client-side (in the user’s browser)
description of HTML was a document called "HTML Tags", interaction, control the browser, communicate
first mentioned on the Internet by Berners-Lee in late 1991 [1, asynchronously, and alter the HTML document content that is
2]. displayed. It is also used in server-side network programming
HTML elements form the building blocks of all websites. with frameworks such as Node.js.
HTML allows images and objects to be embedded and can be In figure 3, the example shows how to embed scripts written
used to create interactive forms to post data back to the server. in the JS language which affect the behavior of HTML web
It provides a means to create structured documents by pages.
denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. Figure 2
shows the primitive elements of an HTML page along with a
few common tags. The example provides the most basic <!DOCTYPE html>
template for HAND using 9 lines of code: <html>
<head>
<title>This is HANDS</title>
<!DOCTYPE html> </head>
<html> <body>
<head> <p><b>HANDS</b> basic template</p>
<title>This is HANDS</title> <p id="p1"></p>
</head> <script>
<body> document.getElementById("p1").innerHTML = "Hello from HANDS!";
<p><b>HANDS</b> basic template</p> </script>
</body> </body>
</html> </html>

Fig. 2. HANDS basic HTML template. Fig. 3. HANDS basic template with JavaScript.

The text between <html> and </html> describes the web As shown, JS is added to the HANDS template by including
page, and the text between <body> and </body> is the visible the <script> tag. The document references the HTML page.
page content. The markup text '<title>This is HANDS</title>' GetElemementById references the tag with the id of “p1”
defines the browser page title that shows up in the tab. The which is the <p> tag. This basic js example shows the
tag <p> is for a paragraph and is displayed on the page. fundamentals on how an HTML page can be manipulated.
An online tool to share code examples and provide an easy This is a very powerful concept and it is delivered without the
starting point for students to practice is jsfiddler.net. The code need for a framework. See working example:
in figure 2 has been placed in a fiddle for readers to run: http://jsfiddle.net/ briancarter/bsxnx3qL/. There are many
http://jsfiddle.net/briancarter/fbqn0kou/. tutorials and examples on the web [3] for in-depth study of JS.
HTML documents imply a structure of nested HTML
elements. These are indicated in the document by HTML tags, IV. CASCADING STYLE SHEETS
enclosed in angle brackets: <p>. In the example, the extent of Web browsers can also use Cascading Style Sheets (CSS) to
an element is indicated by a pair of tags: a start tag <p> and an define the look and layout of the HTML page. Think of CSS
ending tag </p>. The text content of the element, if any, is as the artist of web development; changing the color of
placed between these tags. Tags may also enclose additional elements, the font sizes, and the layout. The W3C, maintainer
tags, including a mixture of tags and text. An example is the of both the HTML and the CSS standards, encourages the use
bold tag <b> which is included inside the paragraph tag <p>. of CSS [5].
This indicates further, nested, elements, as children of the CSS is designed primarily to enable the separation of
parent element. A full tutorial on HTML is beyond the scope document content from document presentation, including
of this paper. A good reference is w3schools.com[3] for elements such as the layout, colors, and fonts [6]. This
additional tutorials and examples. separation can improve content accessibility, provide more

91

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:37:05 UTC from IEEE Xplore. Restrictions apply.
flexibility and control in the specification of presentation Fig. 5. HANDS basic template as shown in web browser.
characteristics, enable multiple HTML pages to share
formatting by specifying the relevant CSS in a separate .css For optimization and for separation of concerns, the JS and
file, improve team dynamics by allowing separation of CSS code is typically consolidated into separate external files.
responsibilities, reduce complexity and repetition by reuse of This allows the browser to cache the content more effectively.
common presentation formats, and reduce maintenance change This also separates concerns have the three fundamental
impacts. aspects of web development in their own maintainable files.
Extending the example from figure 3, the use of CSS is For HANDS, the approach is to keep the code together and
shown in figure 4. The <style> tag is included in line to as close to the area of responsibility as possible. This provides
change the color of the hello paragraph. There are many the students a single file to understand the elements and how
features and functions for CSS and additional training material they interact. Once the students understand this concept, the
can be found on the web [3]. best practice of separation of individual files can be applied.

VI. BACK-END DEVELOPMENT

Server-side (commonly referred to as back-end) refers to
<!DOCTYPE html>
operations that are performed by the server in a client–server
<html>
relationship. Where the client is the HTML page and the
<head> server is a web server that runs on a remote server, reachable
<title>This is HANDS</title> from a user's browser. Operations are performed server-side
<style> because the program requires access to information or
p.hello {color:green;font-style: italic}
functionality that is not available directly to the client, only
available on other secure network servers.
</style>
Server-side operations also include processing and storage
</head> of data from the browser to a server. If data is entered on the
<body> browser, the JavaScript on the page can call a web service on a
<p><b>HANDS</b> basic template</p> server to store the information. This allows for information to
<p id="p1" class="hello"></p>
be shared among multiple users, provides for scalability
(servers have more resources), lightens the work load on the
<script>
local browser, provides backup and restore abilities of the
document.getElementById("p1").innerHTML = "Hello from HANDS!"; data, and is more secure.
</script> There are several platforms for creating web applications
</body> and web services on the server. For HANDS, we leverage the
</html> training system HENS [8] to provide the infrastructure and
development tools for writing Node.js and SQLite web
Fig. 4. HANDS basic template with JavaScript and CSS. applications. Follow the instructions to setup HENS or setup
your own Node.js environment. HANDS will run on any
Node.js environment.
V. FRONT-END DEVELOPMENT Node.js is an asynchronous event driven framework for
In previous sections, the fundaments of web development server side processing. It is designed to build scalable
were briefly covered (HTML, JS, CSS). These items are often network applications. With Node.js, web sites and web
referred to as front-end development; front-end referring to services can be built that expose data from multiple sources.
items that run in the users browsers and provides the user This provides our frontend applications with information to
interface experience. Figure 5 shows the example page. display.
HANDS is a Node.js application. The high level design is
shown in figure 6. As shown, the main application file is
app.js. This file is responsible for starting the server and
responding to all request. It has a router that will route service
calls to an API handler or server the assets. The API services
are restful, accepting and replying using JavaScript Object
Notation (JSON). All other calls are considered assets or page
calls, where HANDS will return the appropriate content. An
important concept, is HANDS will process all requests. 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

92

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:37:05 UTC from IEEE Xplore. Restrictions apply.
backend application which returns JSON data. The full console.log('Server running at http://127.0.0.1:8080/');
enterprise framework is open source and can be studied in
detail [9].
Fig. 7. HANDS basic server template: app.js.
The next step is to create a front-end page to call the back-
end server. Create a page called “index.html” as shown in
figure 8. The page includes a reference to jQuery to simplify
Router Entry
the support of AJAX on different browsers. The page has a
JSON div placeholder for the data retrieved from the service
apiv1.js Request
(“teamlist”). An inline JavaScript section calls the service,
Yes builds the html, and injects the html into the “teamlist” div.

Route
process app.js
Exists
<!DOCTYPE html>
No <html lang="en">
Response <head>
Asset
Asset
(html, js, css, image) <title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
Fig. 6. HANDS basic template as shown in web browser. </script>
</head>
The back-end application is shown in figure 7. In the <body>
Node.js code, a server is created and listening on localhost
<p>Team List</p>
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 <div class="teamlist"></div>
request for the root site (/); this is an example of a basic router. <script>
The router will process the API call and return back a JSON var html = '';
response that has an array with two items. The request for the $.ajax({
root page will stream the “index.html” page to the user.
url: '/api/v1/teams',
type: 'GET',
var http = require('http');
success: function(data) {
var url = require('url');
$.each(data, function (i, value) {
var path = require('path');
html += '<p>' + value.team + '</p>';
var fs = require('fs');
});
$('.teamlist').html(html);
http.createServer(function (req, res) {
}
var uri = url.parse(req.url).pathname;
});
switch(uri) {
</script>
case '/api/v1/teams':
</body>
res.writeHead(200, {'Content-Type': 'application/json'});
</html>
res.end('[{"team":"Team A"}, {"team":"Team B"}]');
break;
case '/': Fig. 8. HANDS basic html template: index.html.

var pathname = path.join(process.cwd(), 'index.html');

The JavaScript in the page can remain inline or get
fileStream = fs.createReadStream(pathname);
separated out to an external JavaScript file. The approach
fileStream.pipe(res); given, provides the student with a view of all code while the
break; separation may provide some performance optimization.
default: The result of viewing the page in a browser is shown in
break;
figure 9. As shown, the Node.js application is running on
localhost (127.0.0.1) port 8080. The application’s router
}
processes the request. Since it is the root page, the
}).listen(8080, "127.0.0.1"); “index.html” page is streamed to the browser. The browser
processes the script tag and calls the API. The Node.js

93

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:37:05 UTC from IEEE Xplore. Restrictions apply.
application processes the request and returns back the JSON <html lang="en">
<head>
data with Team A and Team B. The page successfully
<title></title>
receives the data and injects the html. The final page lists both <script
teams. src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<p>Team List</p>
<div class="teamlist"></div>
<script>
var html = '';

$.ajax({
url: '/api/v1/teams',
type: 'GET',
success: function(data) {
$.each(data, function (i, value) {
html += '<p>' + value.team + '</p>';
});

console.log(html);
$('.teamlist').html(html);
}
});
Fig. 9. HANDS basic template as shown in web browser. </script>

The design of individual pages with content injected </body>

</html>
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 app.js
single page applications, by having separate pages as HTML var http = require('http');
originally proposed. It simplifies the pure server delivery var url = require('url');
var path = require('path');
approach, by only requesting the data needed for the requested
var fs = require('fs');
page. This hybrid approach, provides a simple and clear
design for students to study while delivering a framework that http.createServer(function (req, res) {
is enterprise ready and extensible. var uri = url.parse(req.url).pathname;
switch(uri) {
The process of adding additional HTML pages, adding
case '/api/v1/teams':
APIs, and updating the router continues until a Minimum res.writeHead(200, {'Content-Type': 'application/json'});
Viable Product (MVP) is ready. The application is deployed res.end('[{"team":"Team A"}, {"team":"Team B"}]');
to the web servers and configured. The deployment of break;
case '/':
Node.js is beyond the scope of this paper and more details can
var pathname = path.join(process.cwd(), 'index.html');
be found on the web [10]. fileStream = fs.createReadStream(pathname);
fileStream.pipe(res);
VII. CONCLUSION break;
default:
The position presented in this paper is a novel approach for break;
web development called HANDS. This approach is a hybrid, }
leveraging the simplicity of plain old HTML pages, the AJAX }).listen(8080, "127.0.0.1");
injection of HTML from SPA frameworks, and the server-side console.log('Server running at http://127.0.0.1:8080/');
processing found in the Node.js framework.
HANDS provides a design pattern that is easily picked up
by students while providing the foundation for enterprise IX. REFERENCES
applications. HANDS allows for the addition of client or
server side packages to extend the foundation. While
[1] "Tags used in HTML". World Wide Web Consortium. November 3,
extensibility is enabled, the paper takes a position that all 1992. Retrieved November 16, 2008.
packages used should be well understood. [2] "First mention of HTML Tags on the www-talk mailing list". World
Wide Web Consortium. October 29, 1991. Retrieved April 8, 2007.
[3] W3Schools Tutorial. Retrieved from http://www.w3schools.com/,
VIII. APPENDIX November 1, 2014.
Complete final source code for files. [4] JavaScript specification. Retrieved from http://www.w3.org/standards/
webdesign/script, November 1, 2014.
[5] W3 specifications. Retrieved from http://www.w3.org/standards/
index.html webdesign, November 1, 2014.
<!DOCTYPE html>

94

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:37:05 UTC from IEEE Xplore. Restrictions apply.
 [6] "What is CSS?”, World Wide Web Consortium. Retrieved December
2010, Retrieved from http://www.w3.org/standards/webdesign/
htmlcss#whatcss, November 1, 2014.
[7] Carter, Brian (2014). HTML Educational Node.js System (HENS)
[8] An applied system for web development, To be Published. Retrieved
from www.virtualcict.org.
[9] HANDS open source code. Retrieved from https://github.com/
ChipSoftTech/HANDS.
[10] Node.js Documentation. Retrieved from http://nodejs.org.

95

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:37:05 UTC from IEEE Xplore. Restrictions apply.