First of all, we would like to thank you for getting a copy of this book, which was created for developers to learn how to build a full-stack web application using the standards that are being used in the development industry. This book is tailored based on the applications we have developed from our training and workshops. So, let’s begin our adventure.

This chapter will serve as a short recap regarding the Java Spring Boot and Angular foundations to give you an idea of what lies ahead in terms of conducting web development for them. You will also learn how large the community is and that the support that’s available for Angular makes it reliable for developing applications.

In this chapter, we will cover the following topics:

• Introducing Spring Boot
• The advantages of using Spring Boot
• What’s new in Java 17
• Introducing Angular
• The advantages of using Angular

The GitHub repository for the application we will be building can be found at https://github.com/PacktPublishing/Spring-Boot-and-Angular.

Every chapter has a directory where the completed portion of the project is located.

Note

No directories will be available for Chapter 1, Spring Boot and Angular – The Big Picture, to Chapter 4, Setting Up the Database and Spring Data JPA because most of the topics we will be covering will consist of theories and some sample code. The actual project will begin in Chapter 5, Building APIs with Spring.

Spring Boot is an open source micro framework from Pivotal. It is an enterprise-level framework for developers to create standalone applications on Java Virtual Machines (JVMs). Its primary focus is to shorten your code so that it’s easier for you to run your application.

The framework extends the Spring Framework, which provides you with a more opinionated way of configuring your applications. In addition, it comes with built-in autoconfiguration capabilities that configure both the Spring Framework and third-party packages based on your settings. Spring Boot uses this knowledge to avoid code errors at configuration time as it reduces boilerplate code when you’re setting up our application.

Now, let’s discuss the main advantages of using Spring Boot.

The following are the four main advantages of using Spring Boot to develop applications:

• Autoconfiguration: When you’re configuring your Spring Boot application, it downloads all the dependencies that will be needed to run your application. It will also configure your Spring Framework with the relevant third-party packages, depending on the settings you have applied. Thus, Spring Boot avoids boilerplate code and configuration errors, and you can directly start developing your Spring application.
• Opinionated approach: Spring Boot uses a narrow approach to installing dependencies based on your application needs. It will install all the required packages of your application and removes the idea of configuring it manually.
• Spring starters: You can choose a list of starter dependencies to define your application’s expected needs during the initialization process. One example of a Spring Starter is Spring Web, which allows you to initialize a Spring-based web application without configuring the dependencies that are required to run the application. Instead, it will automatically install the Apache Tomcat Web Server and Spring Security for authentication features.
• Create standalone applications: Spring Boot can run standalone applications that have no dependencies on external web servers. For example, we can embed servers such as Tomcat and run the application.

Differences between Spring and Spring Boot

So, what is the difference between Spring and Spring Boot? And do you need to learn about the Spring Framework before working with Spring Boot? Let’s start with the first question.

The following table shows the difference between the two frameworks:

We can identify that Spring Boot is built on top of Spring and that the main difference is that Spring Boot automatically configures the dependencies we need to run a Spring application. So, to answer the question about needing to learn about the Spring Framework before working with Spring Boot, the answer is no – Spring Boot is just an extension of Spring, which makes configuring it faster because of its opinionated approach.

Now, let’s look at the dependencies we need in Spring and Spring Boot to configure a web application.

Dependency examples for Spring and Spring Boot

In Spring, the minimum dependencies that we need for our application to run are Spring Web and Spring Web MVC:

<dependency>
     <groupId>org.springframework</groupId>
     <artifactId>spring-web</artifactId>
     <version>5.3.5</version>
</dependency>
<dependency>
     <groupId>org.springframework</groupId>
     <artifactId>spring-webmvc</artifactId>
<version>5.3.5</version>
</dependency>

Spring Boot only requires spring-boot-starter-web, which is a Spring Starter for our application to run. The necessary dependencies are added automatically at build time as the starter will be responsible for the configuration:

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>2.4.4</version>
</dependency>

Another thing to consider in Spring is that we need to define some configurations, such as dispatcher servlets and mappings, for our application to run on the server:

public class SpringInitializer implements WebApplicationInitializer {
@Override
public void onStartup(ServletContext container) {
AnnotationConfigWebApplicationContext context =
    new AnnotationConfigWebApplicationContext();
context.setConfigLocation("com.springexample");
container.addListener(new        ContextLoaderListener(context));
 ServletRegistration.Dynamic dispatcher =
     container.  addServlet("dispatcher",
         new  DispatcherServlet(context));
 dispatcher.setLoadOnStartup(1);
 dispatcher.addMapping("/");
   }
}

After initializing the dispatcher servlets, we also need to use @EnableWebMvc and have a Configuration class with a @Configuration annotation where we will instantiate a view resolver for the applications.

A new InternalResourceViewResolver() instance will be created in the configuration class. This will be a bean for Spring. Here, all the files that are under the /WEB-INF/view path with a .jsp file extension will be resolved:

@EnableWebMvc
@Configuration
public class SpringWebConfig implements WebMvcConfigurer {
   @Bean
   public ViewResolver viewResolver() {
       InternalResourceViewResolver bean =
           new  InternalResourceViewResolver();
   bean.setViewClass(JstlView.class);
   bean.setPrefix("/WEB-INF/view/");
   bean.setSuffix(".jsp");
   return bean;
   }
}

In Spring Boot, all these configurations will be omitted because this code is already included in the Spring Starters. We only need to define some properties for our application to run using the web starter:

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

After defining these properties, our application will run since all the necessary configurations, such as the Web Initializer and MVC Configuration, have been included.

With that, we have discussed the advantages of Spring Boot and, at the same time, the main differences between Spring Boot and the Spring Framework and how it reduces boilerplate code at configuration time.

As you may already know, the primary language of Spring is Java, and Java 17 has now been released. In the next section, we’ll learn about the new features in Java 17.

We have decided to discuss Java 17 in this book as this is the next long-term support (LTS) version of Java, meaning that this version will be maintained for a more extended period. It was released on September 14, 2021, and includes several new security and development features.

Let’s look at some of the new features that have been included, as well as some modifications that have been applied to Java 17.

Sealed classes

Sealed classes were in the second preview stage in Java 16. Let’s say, for example, that we have a class that we have created in our code. We can assume that this class can be extended with any subclasses in our application. Thus, by making our classes sealed, we can ensure that our class can’t be extended by subclasses. If we want to allow some subclasses to extend our class, we can use the permits keyword to identify the specific classes we want to grant permission to, as shown in the following example:

public sealed class Animal permits Cat, Dog, Horse

The foreign function and memory API

A new API was introduced for accessing and using code outside the Java runtime, which it did by applying foreign functions (code outside the JVM) and safely accessing foreign memory (memory not handled by the JVM). The API allows a Java application to call native libraries without the Java Native Interface (JNI).

The API aims to replace the JNI with a pure Java development model and better performance while accessing off-heap data and omitting insecure operations.

Foreign memory

One common problem in Java today is accessing off-heap data. Off-heap data is data that’s stored in memory outside the Java runtime. We can say that this is a third-party library. Accessing this data is very critical to performance in that Java garbage collectors work only on on-heap data, which lets them avoid the unpredictability of garbage collections. The following APIs are used to handle off-heap data:

• The ByteBuffer API: This API allows you to create direct ByteBuffers in off-heap data so that data can be managed outside the Java runtime. However, the major drawback of ByteBuffer is that its maximum size is 2 GB and that it is not deallocated promptly, causing the application’s runtime performance to slow down.
• The Sun.misc.Unsafe API: The Unsafe API exposes access operations that work on off-heap data. This API makes this process efficient since the Just-in-Time (JIT) compiler optimizes access operations. However, using the Unsafe API is discouraged as we are allowing access to any memory location.
• The Foreign Function and Memory API: This API solves the dilemma of accessing the memory’s location and sacrificing runtime performance as it provides classes and interfaces where applications can do the following:
  • Allocate Foreign Memory
  • Manipulate and access foreign memory
  • Call Foreign Functions

Pattern matching with switch statements

Pattern matching is the idea of testing patterns and complicated expressions in switch statements. This new feature allows for more extensible and flexible usage of switch statements to accept complex expressions.

The Applet API

The Applet API is rarely used in Java as all browsers have removed support for Java browser plugins.

The experimental AOT and JIT compilers

The experimental Java-based ahead-of-time (AOT) and JIT compilers have been removed since their features have limited usage.

These are just some of the changes that have been applied to Java 17. Now, let’s learn about Angular, one of the top JavaScript frameworks today, and the advantages of using the Angular framework to develop your frontend.

Angular is a free and open source JavaScript framework that’s maintained by Google. It was built mainly for developing web applications and has expanded its capabilities to being used to create mobile and desktop applications using plugins. Angular uses component-based code, is progressive, and offers many libraries and extensions that shorten the time of developing large-scale applications.

At the time of writing, Angular is very popular for building frontend applications. It is the primary framework for developing applications for large and well-known companies such as Samsung, Upwork, PayPal, and Google. It also has a very active community and has 76,000 stars on GitHub, with around 1,500 people contributing to the framework. In addition, it has thousands of functional NPM libraries that you can use to speed up your development.

History of Angular

Before it became Angular, the first developed framework by Google was AngularJS or Angular Version 1. Although developers are typically confused by this, due to thinking that AngularJS and Angular are similar, AngularJS was released as an open source framework by Miško Hevery, a Google employee, who was developing AngularJS to develop web applications faster.

AngularJS, where you use JavaScript or Dart, became popular as its community became more extensive. At the same time, the Ionic framework was released, which allowed developers to use AngularJS to build native mobile applications.

The Great Rewrite

The fast and rapid development of JavaScript technology has affected the popularity of AngularJS, and the team came to the end of the road regarding the framework – no improvements were to be made. From 2014 to 2015, the Google team and the community decided to support mobile and large enterprise applications with the framework. Their first port of call was The Great Rewrite and not incrementing the design of AngularJS. The Great Rewrite is where Angular 2.0, or simply Angular, was released.

The problem with action

Many applications were already running on AngularJS, which meant that if a completely new version of Angular was released, support would come to an end for AngularJS users. So, another main question here was, "How would those applications be supported after several years?"

The other issue that emerged is that there was no direct way to migrate from AngularJS to Angular 2.0, which was difficult for developers. This was a massive step for teams – so much so that new concepts and breaking changes were introduced on every release.

The framework’s comeback

Even though migrating Angular was painful, the enterprise applications that had been created by Google were supported. Around 2018, this became more stabilized as the framework had a large set of features that were ready to be used to build large applications. In addition, it didn’t depend on third-party libraries to create forms and call HTTP requests because all the dependencies were already included. Google also released some documentation to help developers migrate AngularJS to the latest version of Angular.

Angular is very popular and is very effective at developing enterprise applications. Now, let’s look at the advantages of Angular and why it is effective for development.

Angular is a component-based framework, which means that we develop parts of our applications into smaller pieces, and we can reuse these pieces throughout the application. This feature reduces boilerplate code and code errors by ensuring there’s not as much repetitive code. One of the main advantages of Angular is its language. Let’s take a closer look.

TypeScript-based framework

Angular is a TypeScript language-based framework. This language is a significant advantage since TypeScript offers features that are beneficial to development. In addition, it is a superset of JavaScript, which added new concepts that make code maintainable and effective:

Figure 1.1 – TypeScript – a superset language

As we can see, TypeScript is built on top of ES6 and JavaScript, which is intended to add more features for development. Some of TypeScript’s components include Generics, Types, and Interfaces, which we know are directly related to object-oriented programming (OOP). Now, let’s look at another advantage.

Static type data

TypeScript can define static type data, which allows variables to be strictly typed. Compared to plain JavaScript, the compiler alerts you if there are any type-related mistakes – that is, which errors were caught at runtime. Thus, TypeScript can avoid mistakes in production by prompting you with these issues at compile time.

Predictability and maintainability

Since TypeScript is strictly typed, this contributes to the concept of predictability. For example, a variable is declared as a number. Therefore, it will always stay a number throughout the application, and functions will specify how to implement them as all parameters are also strictly typed. Furthermore, TypeScript is also maintainable as it gives developers the power to debug applications at compilation time.

IDE support

Since TypeScript is becoming a more widely used language, more IDEs are supporting it. IDEs offer several features such as code navigation, autocompletion, and plugins.

Microsoft Visual Studio is the primary IDE that’s used for TypeScript. However, some IDEs and editors are also available for running TypeScript:

• Atom: A cross-platform editor
• Eclipse: An IDE that has a plugin for TypeScript
• Visual Studio Code: A lightweight cross-platform editor by Microsoft

OOP

TypeScript is an object-oriented language, which means it supports concepts such as classes, interfaces, and inheritance. OOP is very scalable as we develop our applications into objects, which can be an advantage if we’re developing growing applications.

Early spotted bugs

Browsers do not understand TypeScript directly. Instead, they use transpilers, which compile the code into plain JavaScript. Here, all errors related to syntax and types are caught, allowing developers to worry about the code logic instead.

These are just the advantages of the TypeScript language. Now, let’s look at the benefits of Angular itself.

Support for large enterprise applications

Angular is considered an all-in-one package framework in that most of the standard features that are needed to build an application are already included. This includes modules. For example, to use forms in an Angular application, we must import FormsModule and ReactiveormsModule. Other examples are navigation and routes. Angular provides RouterModule so that you can create routes within the application.

Single-page application

Angular is a single-page application (SPA), which means that when a user navigates from one page to another, the page doesn’t reload as it’s the data that’s being fetched by the server. In addition, the client’s resources are independent and are already loaded in the browser, which contributes to the loading performance of the application.

Progressive web apps (PWAs)

Progressive web apps (PWAs) are becoming a trend nowadays. They are a solution that allows web applications to run on mobile apps, as well as different platforms, both online and offline. It is straightforward to configure Angular as a PWA thanks to its schematics – with just a single line of code, your Angular app is configured. PWAs can also be uploaded into the Android Play Store and Microsoft Store using PWA Builder.

The following command uses the Angular CLI to convert our application into a PWA:

ng add @angular/pwa

The Angular CLI

We don’t need to create or configure Angular from scratch. Instead, we can use the Angular CLI, which helps install the necessary dependencies to run our Angular application successfully. Although the schematics features are responsible for creating the required files, installing the packages, and configuring the values that we need for our application, the Angular CLI generates boilerplate code for modules, components, services, and directives for faster development.

In the following code, we’re using npm to install the Angular CLI and generate our code using the ng command:

//command for installing angular CLI
npm install -g @angular/cli
//command for creating a new Angular App
ng new –project-name
// command for creating a new Component
ng generate component –component-name
// command for creating a new Service
ng generate service –component-name
// command for creating a new Module
ng generate module –component-name

Module and component-based framework

Angular is grouped into modules, which makes it easier to maintain the code’s structure. In addition, each part of the application can be grouped by its function and placed in a single module, making it easier to navigate the application’s features. It is also beneficial in unit testing as the code is tested separately, allowing for complete quality control.

Creating code as components promotes reusability and boilerplate reduction. Let’s look at an example of a navigation menu:

<!— Example code for nav bar -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nav bar</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>

The navigation bar must be present on every page of our application. This process will cause redundant code, which means we will have to repeat this code over and over again. However, in Angular, it has been developed into a component, allowing us to reuse the code in different parts of the application. A specific selector is assigned to the navigation bar code and used as the HTML tag for the component, as shown in the following code:

<!—example selector for the navigation bar component-->
<app-navigation-bar/>

Cross-platform-enabled

Angular is used to build applications for the web, as well as native mobile and desktop applications. This is now possible through frameworks, such as Ionic, NativeScript, and Electron. Aside from PWAs, Ionic and NativeScript are also used to create mobile apps using Angular. On the other hand, Electron is a framework that transforms your Angular app into a desktop application using a similar code base. This feature makes Angular very flexible as a single framework can cover all the platforms for your application.

Web components

Angular supports web components, which are also known as Angular elements. Here, the idea is to break an application into smaller pieces and distribute it into an independent application or package that can be distributed and used on other applications. Angular elements cover the concepts of micro frontends. Every element has a pipeline for deployment. This component can also be used in different JavaScript frameworks, such as React and Vue.

Supports lazy loading

Loading all the JavaScript code in the client browser could introduce some issues. If the applications get more extensive, more code would be packed into one chunk. We don’t want to bootstrap all of our code as this would cause our application to load slowly when it’s started for the first time. We only want to load what is needed on demand. The lazy loading feature by Angular solves this. It only loads the modules, components, services, directives, and other elements of the application that are needed for a specific route. This feature reduces the loading time as the user initially opens the application.

In the following code, we’ve defined some routes as an array where we add new routes as an object. To enable lazy loading, we must use the loadChildren properties to load the modules on demand:

const route: Routes = [
    {
     path: "about",
 loadChildren: () =>
   import("./src/app/AboutModule").then(m =>
      m.AboutModule)
    },
   {
     path: "contact",
     loadChildren: () =>
       import("./src/app/ContactModule").then(m =>
         m.ContactModule)
    }
];

In the preceding code, as the user navigates to the about path, it will only load AboutModule, which contains the resources for that specific route. It will not load the resources under ContactModule unless the user navigates to the contact path.

In this chapter, you learned that Spring Boot is an open source framework extension for Spring and that it mainly solves the boilerplate code when you’re configuring the Spring Framework. In addition, it provides Spring Starters, which developers can use to allow Spring Boot to configure the required dependencies automatically.

On the other hand, Angular is a component-based framework that’s built with the TypeScript language to give it OOP powers. Moreover, it has cross-platform support, which allows developers to create applications on the web, mobile, and desktop. Angular is one of the top JavaScript frameworks as it is used by several large companies and is supported by Google and a large community.

In the next chapter, you will learn about the software that you must install on your computer and set up the development environment for full stack development.