No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md

README.md

Intro to MVC (Model View Controller)

Objectives

  1. Describe MVC Architecture
  2. Understand what a Model, View and Controller are and how they interact

What is MVC

MVC is a style of architecture for building software. The idea behind it is the separation of concerns principle

Seperation of concerns states that a section of code should only be concerned with one kind of thing, for example, handling a route. It also states that code involved in handling a route should be grouped with other things handling routes, for example.

MVC represents a basic, big picture seperation of concerns for your application, seperated into a Model, which "models" or describes your data, a "View" which deals with what will be displayed to a user, and a "Controller" which builds the view with data from the model.

Note: there are other styles, which we will not get into in this course, for example MVVM.

Understanding MVC

MVC stands for Model View Controller.

Model - The model refers to the data objects that we use. It's the object oriented approach to design. The data in our database will be the most common type of object that we'll put there.

View - The view is the Presentation layer. It's what the user sees and interacts with, essentially the web pages. The HTML, the CSS and the JavaScript. The controller processes and responds to user events, such as clicking on links and submitting forms.

Controller - The controller will make decisions based on the request and then control what happens in response. It controls the interaction with our models and with our views.

MVC Diagram

A tiny MVC application.

// Model
// "models" our data. Our resource is a trick, this sets up what a trick looks like:

function Trick(args) {
	this.name = args.name;
	this.videoUrl = args.videoUrl;
	this.description = args.description;
}

// View
// Is soley concerned with displaying data for our user, in this case with a simple console.log
const displayToUser = (output) => {
	console.log(output)
}

// Controller
// Calls on the model and the view, and any other methods it needs, tying it all together
const controller = () => {
	let args = returnHardCodedData();
	let trick = new Trick(args);
	displayToUser(trick)
}

// This is a helper method that is being called by the controller
const returnHardCodedData = () => {
	let args = {
		name: "backside over-crooks",
		videoUrl: "https://www.youtube.com/watch?v=Jq9oV2v3v8I",
		description: "Like a frontside crooks, but you come at it back side and ollie over the obstacle into it."
	}

	return args;
}

// The controller is being called here
controller()

Note: The model and view NEVER talk to one another. You would never have a call to the model in the view, nor would you have any mention of the view in the model. That's what the controller is for. Handling interaction between the model and controller.

Routes

  • Routes are what handle the client interaction. The user input.
  • Routes are either part of the Controller or they are separete, but talk directly to the controller.