Intro to MVC

Model-View-Controller

What is MVC?

MVC stands for Model–View–Controller

It is an architectural pattern commonly used for developing web applications, which are most websites you visit that have user interfaces and interactivity. As we build larger and larger applications, we need a better way to manage them.

MVC takes a large application and divides it into three interconnected parts:

  • The Model
  • The View
  • The Controller

Why Use MVC?

Separating our application into distinct parts does a few things:

  • First, it allows us to simplify our code. Thus, we can look only in the part that matches the functionality of interest rather than searching everywhere.

  • Next, it allows us to reuse our code. Instead of writing unique code for each part, we can write more generally and reuse the code where appropriate.

When Should MVC Be Used?

Traditionally used for desktop graphical user interfaces (GUIs), the MVC architecture has become popular for designing web applications and even mobile, desktop and other clients. MVC applications can also be referred to as a server side rendered application, or SSR for short.

You want to use these MVC applications when they are primarily consumed in a read-only fashion. Blogs, reference materials, and wikis are all examples of web applications that benefit from using MVC.

Another benefit of MVC applications is that they can be used without JavaScript.

Popular programming languages like Java, C#, Python, Ruby, and PHP have MVC frameworks that are used in web application development straight out of the box.

Model

The Model handles all of the data and contains the business logic.

It is the application's dynamic data structure, independent of the user interface.

For example, the classes you create for your application (with attributes and methods) belong in the model. The model represents what is being displayed. For example, if you check your email via Gmail, the content of your emails represents the model.

View

The View is how the model is shown to the user.

It is the front-end of the application where HTML, CSS, and JavaScript languages belong.

For example, the interface you’re looking at when you check Facebook, including its styling (fonts, borders, etc) represents the view. Different people checking their Facebook will see the same interface, but different content because their feeds are unique. In other words, different people will see the same view but different models.

Controller

The Controller is the link between a user and the system.

It is responsible for controlling the flow of the program, including the interactions between the models and the views. It receives user input, translates it into the appropriate messages, and passes these messages on to one or more of the views.

For example, when you want to create or delete an email in your email client, you’re sending a message to the controller. It is responsible for updating the model (creating or deleting the email), then refreshing the view (showing you what you see on the screen).

Interactions

In addition to dividing the application into three components, the Model–View–Controller design defines the interactions between them.

The Model is responsible for managing the data of the application. It receives user input from the Controller.

The View presents the Model to the user in a particular format.

The Controller responds to user input and performs interactions on the data model objects. It receives the input, optionally validates it, and then passes the input to the Model.

Spring MVC

Spring MVC is a rich framework for building web apps and APIs using the Model-View-Controller design pattern.

By providing a patterns-based way to build dynamic websites, Spring MVC enables a clean separation of concerns. It gives you full control over templates, supports TDD-friendly development and uses the latest web standards.

Spring MVC Features

  • Routing
  • Model binding
  • Model validation
  • Dependency injection
  • Filters
  • Web APIs
  • Testing
  • Thymeleaf view engine
  • View Components
  • Tomcat Web Server

Spring MVC's Workflow

Note, you have control over the italicized items.
  • Client sends a HTTP request.
  • Request is processed by the 'Front Controller' and directed to a controller and method set up to handle the request.
  • The controller method will execute and retrieve, modify, or create the proper model objects and give it to a data structure called the model.

Quick Sidebar Conversation:

Model model != 'Model' from MVC

At this point it is important to note that this is a quite a bit confusing. The data structure called the model is of the class Model and is provided from Spring MVC, but it isn't the same thing as the big picture 'Model' in MVC. You can think of this model as something akin to a hashmap. It will store the Java objects that make up the 'Model' that need to be rendered in our templates by the Thymeleaf template engine. In the picture of the preceding page you see the model going from the 'Controller' to the 'Front Controller' to the 'View Template'. This model exists to help us transfer the data from our 'Model' to the places it needs to go.

Spring MVC's Workflow continued…

Note, you have control over the italicized items.
  • The return of the controller method and the model are sent back to the 'Front Controller'.
  • The 'Front Controller' then sends a message to the View's template engine, Thymeleaf with the model containing the data that is needed to create a dynamic web page from the template that matches the name that was returned from the controller method.

Spring MVC's Workflow continued again…

Note, you have control over the italicized items.
  • The Thymeleaf template engine will then take the template, parse over it looking for Thymeleaf attributes to inject values from the model's data. When it is finished, it will have a custom HTML document that is sent to the 'Front Controller'.

  • And finally, the 'Front Controller' creates an HTTP response and sends it back to the client (think web browser).

We will use Java to create the Model and Controller parts of our application that we need to create, and Thymeleaf for the View parts of the application that we need to create.

What is Thymeleaf?

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

Thymeleaf uses natural templates to create both static prototypes and dynamic templates with the same file.

HTML templates written in Thymeleaf still look and work like HTML, allowing you to add CSS styling and layouts to template files and present your users with prototypes early in development.

Files containing Thymeleaf templates even use the .html file extension.

Thymeleaf Syntax

Thymeleaf uses Thymeleaf specific HTML attributes to replace static values in the template file with dynamic values from the Model object.

When ever you see an HTML attribute start with a th: in a Thymeleaf template, you are looking at a part of that HTML element that is being manipulated by the Thymeleaf template engine.

<p th:text="${article.content}">Lorem ipsum ...</p>

For this example the th:text attribute will tell the template engine to replace this element's text content with the model attribute named 'article's content instance variable.

<p th:text="'My name is ' + ${user.name} + '.'">My name is John Smith.</p>

The ${...} are important parts of the Thymeleaf syntax as well. It is part of the Thymeleaf attribute that is replaced with the value referenced inside the braces.