Part 1: JavaScript Application Introduction

Attention: The following article was published over 6 years ago, and the information provided may be aged or outdated. Please keep that in mind as you read the post.

Part of the Solid Foundations Learning Series

This is the introductory post to an in-depth series of articles that will tell the story of why and how a specific web application was built. In a nutshell, it is a JavaScript-based suite of single-page applications optimized for use in a microservice environment.

In this post, we will set the stage for the series and introduce the overall design and structure of this application. In future posts of this series, there will be technical discussions and theory discussions about specific aspects of the application in an effort to highlight key points.

To begin with, what type of web application are we talking about?

Overall application design

The web application we will be talking about started its life as a simple NodeJS and Express application. Nothing fancy here, we simply did an npm init and created a package.json file. From there we added Express and the Express Generator to the application via npm from the command line.

npm install express --save
npm install express-generator -g

Using the Express generator command express --view=hbs sflsapp, we created a basic Express application with a couple of server-side routes along with two Handlebars pages. I choose Handlebars as the view engine simply because I have used it before and found it quick to pick up.

Once the application was generated though, most of what was there needed to be changed. Here is what the current folder/file layout looks like:

├── app.js
├── application-structure.md
├── bin
│   └── www
├── configuration
│   └── config.js
├── inactive-pages
│   └── applications.hbs
├── package-lock.json
├── package.json
├── page-content
│   ├── about.md
│   ├── home.md
│   ├── license.md
│   └── technology.md
├── public
│   ├── app_address
│   │   ├── about
│   │   ├── addressbook
│   │   ├── app.js
│   │   └── dataAccess
│   ├── app_shop
│   │   ├── about
│   │   ├── app.js
│   │   ├── checkout
│   │   ├── dataAccess
│   │   ├── services
│   │   └── shophome
│   ├── app_vue_router
│   │   ├── css
│   │   └── js
│   ├── stylesheets
│   │   └── style.css
│   └── vendor
│       ├── angular
│       ├── chance
│       ├── ui-bootstrap
│       ├── ui-utils
│       └── xeditable
├── README.md
├── routes
│   ├── api.js
│   └── index.js
├── services
│   ├── enum.service.js
│   ├── file.service.js
│   ├── markdown.service.js
│   └── user.service.js
└── views
   ├── pages
   │   ├── about.hbs
   │   ├── contact_management.hbs
   │   ├── home.hbs
   │   ├── products.hbs
   │   ├── route_demo.hbs
   │   └── technology.hbs
   ├── partials
   │   ├── footer.hbs
   │   ├── header.hbs
   │   └── navigation.hbs
   └── static
       ├── error.hbs
       ├── license.hbs
       ├── login.hbs
       └── secure.hbs

As you can see, the same basic structure is there, but it has grown significantly in size. I will quickly break down the top-level folder structure for you.

Folder descriptions

From top to bottom, here is what we have:

The bin folder contains our server startup script and is a default from the Express Generator
The configuration folder contains our server configurations and is a custom folder
The Inactive-Pages folder is a custom folder which holds Handlebars views which are not in an active state for the application – more on this later
Node-modules is a standard folder which holds all dependencies for the application
The page-content folder, markdown files are stored here for use by the application – more on this later
The public folder is a standard Express folder which contains scripts, style sheets, and other items which are accessible from a browser
The routes folder contains scripts which contain application or API specific routes for the server.
The services folder contains files which do things for the application but are not directly accessible from the web
The views folder contains our Handlebars views which are compiled at runtime to create complete web pages
The app.js file is the main server file for the application

The look and feel

I wanted to keep the overall look and feel as simple as possible, yet still, give the developers the ability to build complex layouts.

I choose Bootstrap 4 as my default visual framework. I like the simplicity of its layouts in that you can choose to either to use their traditional grid system or move into a more modern flexbox layout system. Additionally, with many of the components included, Bootstrap just made it quick and easy to add a nice visual navigation menu to the application with little trouble. All of the icons found in the application are from the Font Awesome Icon library.

Wrapping it up

We now have our basic application setup to use Express with Handlebars views.

Going forward we are going to add in the ability to drop in Handlebars pages and automatically have them registered with the navigation list. Then we’re going to build a way to associated Markdown content with a Handlebars page. We will also show you how you can use Single Page Applications built in several different front end frameworks with this application. Additionally, we’ll add in a simple security model where you can log in and access a secure page.

Stay tuned for additional entries to this series posted within the next week. Links will be updated here.