Tuesday, November 21st, 2017

Classical MVC

Model, View, Controller

It is an application architectural pattern splitting the Model, the View (what the user sees), and controller into individual separate pieces. It is just way of organizing code. With MVC we’re able to reduce dependency of code so it can just process it and not worry about where it’s coming from. MVC is often used in AngularJS apps.

MVVM

Model, View, ViewModel

Vue and Ember use this architecture. The model represents a collection of classes that explains the business model and data model. It also defines the business rules for data and how it can be altered and manipulated.

The view is the same as in MVC where it represents what is displayed to the user. The key difference between MVC and MVVM is something called the ViewModel, its responsible for displaying methods, commands and other functions that assist in maintaining the state of the view manipulating the model as the result of the actions on the view such as clicking an “add to cart” button or “add item” button.

MVP

Model View Presenter

Although this wasn’t apart of the requirements I found this interesting as it wasn’t what I thought MVP stood for, I was used to it being “Minimimal Viable Product.” In this case MVP is Model View Presenter. It is preferred over MVC when the applications needs to provide support for multiple user interface technologies. I’m curious to see an app built this way in action to get a better understanding.

Component Based architectures

Facebook’s React.js is by far the easiest to explain component based architecture because so many people are familiar with its interface and how to interact with it. Components can be thought of small features such as the comment feed or the chat window. They work and update independently and modifying one won’t affect another. They can also be reused which I needed to do in my capstone project especially with the mapping and points updates. In the picture below we have 6 components that make up App.

• Homepage or <Homepage />
• Header <Header />
• SearchBar <SearchBar />
• EmployeeList <EmployeeList />
• EmployeeListItem <EmployeeListItem />
• EmployeePage <EmployeePage />

Each of these components can update and re-render on their own without affecting the others. This makes it so only a tiny of chunk of the application needs to reload rather than the whole thing.