Day 2 -- August 6th, 2018 -- MVC Notes -- Chapter 3

A theoretical and practical survey of advanced concepts and practices in current JavaScript technology using Angular 2, and 4 (like there is a big difference -- not). Angular Framework is a method of implementing Full Stack Development; this class uses the MVC development model to exemplify this (particular) implementation of JavaScript. NodeJS and npm and a bunch of provided compilers (TypeScript => JavaScript) help us understand the code. This course teaching reading code; there are no big projects in this course; the course jumps into the environment the first day. Along the way we spend time reviewing particular JavaScript principles that are needed to understand the code we study. Welcome Travis, Maria, Sumani, Daniel, Yi, and David.
Post Reply
User avatar
Site Admin
Posts: 28
Joined: Wed Apr 11, 2018 8:22 am

Day 2 -- August 6th, 2018 -- MVC Notes -- Chapter 3

Post by admin » Mon Aug 06, 2018 3:45 pm

Chapter 3 The MVC Design Pattern

Pattern: A design Pattern is HOW YOU SOLVE A PROBLEM. Don't become a Pattern Zealot. Design patterns are flexible tools -- they are not RULES.

Business Logic is the "meat and potatoes" of what your application does -- not the extraneous logic to move data around.

Angular excels to bring the Server side processing to the html code in the browser

Round Trip And Single Page

Round Trip Applications:

Browser requests an initial HTML document. User interactions cause the browser to request a new HTML document. All of the data resides on the Server and the Server generates the HTML dynamically. This frees up the browser; but the bandwidth demands are high on the network; and, of course, the server has to build those pages before it handles the request from the Browser.

Single Page Applications:

Browser requests and initial HTML document. User interactions use AJAX requests to upload only the data that is needed for that request. The HTML document is never reloaded completely.

Most pages are a mixture of both of these methods allowing libraries like jQuery and Angular to solve problems.

jQuery explicitly manipulates the browser's Document Object Model (DOM); while Angular includes the browser to be the foundation of the application development. Using jQuery gets difficult when writing large applications (because of the plug-ins being separate units); while Angular focuses on the date in the application and how it is connected to the HTML elements. The price for this is the higher development set-up.

Conclusion: use jQuery for low-complexity web apps; use Angular for single-page applications when you can do careful planning.

The MVC Design pattern
MVC_diagram.jpg (37.61 KiB) Viewed 1163 times

The MVC pattern uses "separation of concerns"

The data model is separated from he business and presentation logic; the data, the logic (that operates on the data), and the HTML elements (that display the data) are separated.


Contain the data. There is the View Models just contain the data passed from he component to the template and there is the Domain Models which contain the data in the business domain, AND the operations, transformations and rules for creating, storing, and manipulation that data (this last part is the model logic). (note that there is logic in the model data that is used to handle the data {after you got it} ) Also, Domain Models include the logic to Create, Read, Update, and Delete (CRUD) (does this sound like SQL ? ). OR a separate model called the Command and Query Responsibility Segregation (CQRS) pattern. But this is usually taken care of RESTful web services to take care of database operations.

Contains the logic for creating, managing, and modifying the domain data (this might include executing remote logic via web services).

Provide a clean API to expose the data.


(known as components in Angular) are the code that connect the Model (data) and the Views. Controllers also add the Business Logic to the application.

Contain the logic required to set-up the template.

Contain the logic / behaviors by the template to present the data from the model.

Contain the logic / behaviors to update the model based on user interaction.

Views / Templates:

(known as templates in Angular) HTML elements that are enhanced by data bindings. These data bindings make the HTML seem dynamic.

Contain the logic and markup required to present the data to the user.

RESTful Services:

You do not want the client-code to access the data directly off the server (that would connect the client and the server too closely). The client is responsible for getting the data TO and FROM the server and DOES NOT CARE how the data is stored or accessed.

AJAX is a great way to get data to and from the server. This is the foundation of RESTful services. Hence, HTTP requests perform CRUD operations on the data. (some people say that RESTful services dong us JSON; please get over it! JSON services are RESTful.) So what happens here? An URL is created that is sent to the server by the RESTful services that connect and transfer data to and from the server.

Design problems when using the MVC Model:

• Putting the logic in the wrong place:
• Putting Business Logic in the templates rather than the components.
• Putting Domain logic in the components rather than the model.
• Putting data store logic in the client model rather than letting the RESTful services take care if it.


• Template logic should prepare data only for the display and NOT modify the model.
• Component logic should never create, update, or delete data from the model.
• Templates (Views) and Components should never directly access the data store.
• Don't build an application that depends on the intricacies of the data store.
• Angular is a complex framework. Take it slow. Understand the building blocks.


Post Reply