Developing a Web Application Using Angular (Part 1)

With over $2 trillion in annual internet commerce sales and 1.24 billion websites existing in the world, developing clean, concise, and intuitive web applications is essential for most of the software market. In particular, the Single-Page Application (SPA) has become the dominant paradigm, allowing users to easily navigate from one page to the next without interrupting the fluidity and User Experience (UX) of the application.

In recent years, there have been numerous SPA frameworks that have earned their stripes, but foremost among these contenders is Angular. Created by Google in 2010, Angular was originally developed using JavaScript (and aptly called AngularJS), but in 2016, Google released a new version of Angular based on Microsoft's Typescript programming language. Since then, creating Angular applications has looked much like creating a Java application, and thus, has spurred on the use of Angular by countless companies, including PayPal, Nike, HBO, Sony, and General Motors (for more information, see Angular 2 vs. React).

While there are numerous tutorials on creating a simple SPA using Angular, this tutorial will focus on creating a practical implementation of an Angular SPA that consumes an open-source order management system Representational State Transfer (REST) web service. This article can be thought of as an extension of the Creating a REST Web Service With Java and Spring series of articles. While the creation of exceptional User Interfaces (UIs) can consume volumes in-and-of-itself, we will focus on creating a basic, but highly functionality UI for viewing, creating, editing, and deleting orders stored in our existing order management web service.

By the completion of this tutorial, we will have explored the fundamentals of designing and implementing our UI, as well as the thought process behind solving many of the most common SPA and UI challenges that ubiquitously spring up in web application development. Although becoming an expert on this topic requires many months and years of experience, this tutorial will lay the foundation for gaining a deep and insightful understanding of how to create a web application using Angular.

The entirety of the code used for this tutorial can be found in the following GitHub repository. While this tutorial will dive into each of the major modules and classes in the order management web application, it will not touch on all of them. It is suggested that after completing this tutorial, the reader explore this repository and see how the various pieces of the application interconnect and how the explanations in this article went into creating these important pieces.

Once this repository has been cloned, simply execute the following series of commands (assuming that Node.js is installed) to start the Angular frontend:

npm install
npm start

Once started, the application can be viewed at http://localhost:4200.

Table Of Contents

• Part 1: Designing User Interface
• Part 2: Developing Application Architecture & Implementing Resource Layer
• Part 3: Implementing Service Layer
• Part 4: Implementing Component Layer
• Part 5: Testing Completed Application

Before Getting Started

Before we create our Angular web application, there are a few items that must be addressed. Foremost is the prerequisite knowledge that is expected of the reader, and second is the starting of the order management REST service that we will use as a backend to our SPA.

Prerequisite Knowledge

This tutorial does not focus on teaching the fundamentals of the Typescript programming language. Although we will only use the basics of the language as we create our SPA, many of the steps we perform will be completed without detailed explanation. For a basic understanding of Typescript, see the Typescript in 5 Minutes article. Likewise, this article will not focus on the basics of installing the various packages required by Angular to create a SPA. For more information on setting up an Angular project, see the Angular Quickstart Guide. It is also highly suggested that the reader become familiar with the Tour of Heroes tutorial created by the Angular team. This tutorial will serve as a secondary resource for many of the facets of our Angular web application.

Setting Up the Web Service

Before we can interact with the order management REST service, we have to start it. The source code for the REST service can be found here. This web service can be cloned by executing the following command:

git clone https://github.com/albanoj2/order-rest-backend.git

Once cloned, change the directory to the root of the web service and execute the following command:

mvn spring-boot:run

This will start the web service on localhost:8080, which can be interfaced with at http://localhost:8080/order. Once started, we are now ready to create our user interface that will interact with our order management web service.

What We Need to Accomplish

Before jumping into the design and implementation of our web application, we have to take stock of what it needs to accomplish. Although we do not have a customer per-say, the following paragraph captures the intent and desired uses of our web application:

The user should be able to view a list of all existing orders in the system. Since there will likely be many orders, the user should be able to filter these orders by the description of the order. The user should be able to create a new order, and upon creation, the new order should appear in the list of existing orders. The user should also be able to edit and delete an existing order, and the update or deletion should be reflected in the list of existing orders.

This story will drive both the design and implementation of our web application, and throughout the entire process of building our application, we will need to ensure that each step we take works towards satisfying this story. With our story established, we now move on to the first step in the process of bringing our application to life: figuring out where to start.

Where to Start

Starting a project can be one of the most difficult tasks, and the same is true for creating a web application. There are so many different facets to deal with that it can quickly become overwhelming and a sense of inertia can easily form. To break through this roadblock, we will start with the part of the system that most directly affects our users: the UI.

In the rigor and confusion that can occur during software development, it is easy to lose sight of the reason that we are creating our application in the first place: to serve a customer. Everything, including the profits of our company and the satisfaction of our stakeholders, depends on our successful completion of this goal. We can create the most technically sound system and the most stunningly beautiful UI, but it is all for naught if we fail to satisfy the needs of our customers and users. Thus, the first place we start is with mocking up how the user will interface with our system.

The first step in this process is enumerating the tasks that a user must complete/accomplish using our web application. The following is a simple list:

1. View existing orders.
2. Search orders by their description.
3. Create a new order.
4. Edit an existing order.
5. Delete an existing order.

While this may seem overly simple, we will see shortly that even the most simple of use cases requires an acute attention to detail. It is important never to underestimate even the most simple of tasks in a web application, since they usually represent the most commonly used facets of our application, and therefore, the most highly scrutinized.

With our use cases enumerated, we can now jump into the actual design of the UI. While there are countless ways to start the design of a UI, we will start by creating a simple hand-sketch of what we want the application to do, including the various screens the user will see and the actions that each of the components on the screen will do when clicked or used. An example of such a sketch is illustrated in the figure below.

In our sketch, we have two simple components: (1) the order list component and (2) the save order component. Since this is a SPA, we will not reload the web page in our browser to move from one component to the other. Instead, we will transition from one to the other so that when a user clicks the create button, for example, we transition to the save order component (where a user can create a new order). While we could create a much more mature mock-up using a program such as Photoshop (or another visual design program), creating the first sketch by hand allows us to get our ideas on paper quickly. This step in the process is much more of an art than a science.

It is important to note that while this sketch lays out the basic ideas that we want to display to the user, it is by no means complete. As we work our way through the implementation of our web application, we will see that changes will be made and parts of our UI that we thought were good ideas may not be such good ideas. On an actual project, it is important to work through this process with the customer. The customer may expect that the components in our mock-up will be present in the final system, and therefore, it is important to communicate the desired changes to our mock-up before presenting their implementation in the final web application to the customer. We do not want to surprise the customer in the wrong way; instead, we want the customer to be an active part in tailoring the application to serve its purpose as best as possible.

It is also important to stress that there are two main aspects to designing the visual portion of a great web application: (1) UI and (2) UX. Although there are dozens and dozens of books on both topics, the difference between the two can be distilled down to the following:

UI design focuses on the statics of an interface of an application while UX focuses on the dynamics.

In general, UI design focuses on how an application looks. It's that first impression, much like the curb appeal of a new house. It says nothing about what the house offers, only how beautiful or aesthetically pleasing the house looks. UX, on the other hand, deals with the ease of use and the pleasure that the user derives from utilizing the application. This is a much more dynamic aspect to an application, much like the amenities and functionality of a house. For example, does the house have enough room in the driveway for all the cars a family needs? Does the house have enough bedrooms? How easy is it to get from the bedrooms to a bathroom in the middle of the night? Does the layout of the house fit the owner's lifestyle? 

Put another way, UX focuses on all aspects of how a user interacts with a product. Is it easy to retrieve an order? Do I need to perform tedious or superfluous steps to accomplish my goals? Does the product a company provides make my life easier or harder? Do I use an application because it brings me joy or do I reluctantly use it because I have to (or it is the only one)? All of these difficult to measure metrics combine to form the idea of UX. Although there are many tricks and tips to creating a good UI and implementing a positive UX, we can use the following rule to capture the general idea of both UI and UX:

Reduce the friction in the lives of the user.

That simple rule is borrowed from Jeff Rosenblum's Friction: Passion Brands in the Age of Disruption (warning to the reader: this book contains some adult language). Although intended as a rule for businesses, we can apply it to this narrower scope in the same manner: all of the design decisions that we make about how the applications looks and how it feels should revolve around reducing the friction in the lives of the user. In this way, we will simplify the UI and ensure that using the application is a pleasure.

Setting Up the Project

With our draft design complete, we can now work on putting the software together that will make our design come to life. Since we are going to create our web application using Angular, we first have to get the development environment setup and then we can create a simple project that will provide us with some scaffolding as we add new classes and components.

Setting Up the Development Environment

The first step in setting up the development environment is installing Node.js and the Node Package Manager (npm). Installing Node.js from here will also install npm. Once Node.js and npm are installed, we can then install the Angular Command Line Interface (CLI) tool using npm:

npm install -g @angular/cli

With two concise steps, we now have all of the packages needed to create a new Angular project.

Creating a Simple Project

When Angular was first released (in the AngularJS and then Angular 2 days), setting up the basics of a project required multiple steps and some manual configuration, but Angular now ships with the Angular CLI (using ng as the command name), which makes the creation of a basic project as simple as running a single command. To create a new Angular project, simply execute the following command:

ng new order-angular-frontend

Once the new project has been created, we can start the application using the following set of commands:

cd order-angular-frontend
npm install
npm start

Once the application has started, it can be viewed at http://localhost:4200. For more information on creating the Angular project, see the Angular Quickstart Guide. In the next article in this series, we will move onto designing the software layers of the application and implementing the various components within each layer.