elewa-academy / mvc-lh

MVC-LH

Learning this will prepare you for the transition to Express and allow you to reuse your week 3 and 4 projects in Express applications.

Table of Contents

• Prerequisite Knowledge
• A Diagram
• A Checklist
• A Chart
• An Example

---

Prerequisite knowledge:

• Separation of concerns :
  • WHY -
    • makes your code easier to read and debug
  • HOW -
    • by organizing your code based on what it does and where it runs
    • by having self-contained objects
      • to the outside world, methods behave like pure functions
      • everything they need to do their job is a property, method or argument
    • by having the least possible interaction between objects
  • WHAT -
    • MVC-LH architecture
• Dependancy Injection :
  • WHY -
    • to reuse as much of your code as possible
    • to use the same application in any environment with the fewest changes
  • HOW -
    • swapping out different code that fits the same specs depending on where you run your project
  • WHAT -
    • having a different view and handler for each environment
    • reusing your model, controller and logic behind different handlers and views.

TOP

---

A Diagram

Each shape represents an object in your program. The arrows show which objects arer allowed to call which other objects (objects can use 'this' to call themselves). What you should notice is that there is a one-directional flow from the user event (handler) to a change in the UI (view).

This is because your app is event driven. It sits idle until the user prompts it to change. After a user triggers an event, tha event is set in motion, triggering a series function calls ending in a state change (new data in memory) -->

1. The handler recieves and parses the user's action, passing cleaned input values to the controller object.
2. The controller retrieves the application state from the model.
3. Passing the state and user input as arguments, the controller asks the logic to decide what changes are necessary. The logic returns the new application state.
4. The controller saves the new state to the model.
5. The controller calls the view with whatever data is needed to redraw the UI.

Component Details:

• Model: Object with methods & properties to store and protect data
• View: Object with methods for drawing to the UI
• Controller: Object with methods for use cases & properties for Model, Logic, View
• Logic: Object with pure function methods
• Handler: Object with event-driven UI listeners, calls Controller

TOP

---

A Checklist

Use this checklist to grade your own project.
If your objects do anything that is not on this list your code is probably wrong.

M	V	C	L	H
saves data	draws to the UI	calls the M, V, L	takes in app state	listens to events
returns data		use temporary variables	makes decisions	cleans user data
			returns new app state	passes it to controller
---	---	---	---	---
can call itself	can call the UI	can call M, L, V	can call itself	can call controller

TOP

---

A Chart

See how this architecture makes your life easy, you only have to change the L and H to run your project in different environments.

	M	V	C	L	H
Terminal	js	console.log	js	js	process.argv
Browser	js	DOM stuff	js	js	events
Node webapp	js	res.send	js	js	Express Routes

TOP

---

An Example

Code to Study

TOP

---

Articles

this is about layers

---

---