Developing a Spring Boot back-end and Angular front-end Application

 

In this series of posts, I will be developing a simple web application for a fictional movie store called “Movie Craze”. I will be using Spring Boot for the back-end and Angular for the front-end of the application.

This is the first part of the series. It will cover the basic understanding of technologies and tools that I’m going to use. I will also highlight some of the key features of these technologies. Warning: this part will have a lot of terminology and theory that is required to understand how the application works. I will give more practical explanations and examples as we go.

Who is this series of tutorials for?

This series could be useful to someone who does not have a lot of experience with Angular/Spring Boot. If you already are an expert in these technologies, you probably won’t learn much here 🙂

Prerequisites

1. Core Java

2. Just a little Java EE wouldn’t hurt

A High-level Overview of the Architecture

The app will have an Angular frontend that consumes a Spring Boot backend API.

image

What will we use for this project?

Backend:

1. Spring Boot. Spring Boot is a project based on the Spring Framework, meant to simplify the development process.

 

2. Spring Data JPA, which is a part of the Spring Data project. Spring Data aims to provide an easier way for performing data access. Spring Data JPA helps remove boilerplate code and ease the creation of JPA repositories. All we need to do to get a basic movie repository is to implement an interface provided by Spring Data JPA. A repository is a class that will perform CRUD operations with Movie objects against the database. If you are wondering what a repository is, here’s a diagram showing our Backend service’s structure:

image

Bottom line: Spring Data JPA exposes repository interfaces that my classes can implement and save me from writing boilerplate database connectivity code.

 

 

 

 

 

3. Spring MVC. This framework enables developers to implement the MVC (Model, View, Controller) pattern in their web apps. For the purpose of our project, we will not be using the View layer of the Spring MVC and only rely on Spring MVC for creating a backend API. Angular frontend will consume our Spring MVC backend API. We will let the service layer (MovieRepository) manage the Movie objects. This is how the project is going to look:

image

 

4. Java version 10. Specifically, JDK 10.0.2 . This is the latest version of JDK as of August 2018.

 

5. SQLite is a lightweight relational database management system that we will use for this app. Given the simplicity of the app, a full-featured server-based RDBMS (MySQL or PostgreSQL) will not be necessary. https://www.sqlite.org/whentouse.html Read more about SQLite here.

 

Frontend:

1. Angular is a front-end web app development platform maintained by Google and built in Typescript. Angular makes use of client-side rendering instead of server-side rendering.

 

 

 

Tools:

1. Spring STS is a free customized Eclipse IDE, built for the purpose of developing Spring applications. You can download Spring STS here https://spring.io/tools/sts.

2. Maven is a build automation tool that we are going to use for this project. It handles transitive dependencies. I found that to be a beneficial advantage compared to Ant or similar tools. Using Maven also enables us to use Spring Initializr to quickly get up and running.

Thank you for reading this post and see you in part two of this series!

Leave a Reply

Your email address will not be published. Required fields are marked *