...for Better Code Separation What is this Model, View, Controller (MVC) architectural pattern? Sources: Rails Documentation The architecture divides your code into three (3) layers , and separating the different responsibilities of the program. MVC Models Views Controllers Image from Wikipedia Model Layer This layer in contains the domain model, which generally represents a specific object class (e.g. a Person, Animal, Books). This is where the is usually handled since this model is linked to the and its data is derived from the relative table’s rows. Ruby on Rails business logic database View Layer Handles the representations of the responses provided by the controllers. Since the controller can return information as HTML, XML, JSON, etc. visual Controller Layer In this layer is responsible for with the , its and providing suitable responses to various requests. Rails interacting model manipulating data HTTP Now, what would this MVC pattern look like in JavaScript? Source: MDN web docs Since generally does not involve the use of databases (although it could), nor HTTP request handling (Once again it could), the pattern will have to be tweaked a bit to fit the language specificity. JavaScript MVC Image from MDN Model Layer The can literally be as simple as an but usually it would be a . An application can have and these classes (models) would contain the needed for the app to function. model layer array class multiple models basic data Take for instance a which tracks which classes a person is taking. The models in this case can be divided into classes such as a Classroom, Person and an Array based model called Subjects. E.G. Classroom App Base Model Classes { (id, subject = 'Homeroom') { .id = id; .persons = []; .subject = subject;
  }
} class Classroom constructor this this this The contains data variables which will hold information for each classroom. This would be a list of all the currently enrolled in this classroom, the associated with this classroom and it's . Classroom model persons subject ID { (id, firstN = 'John', lastN = 'Doe') { .id = id; .firstName = firstN; .lastName = lastN; .subjects = []; .classrooms = [];
  }
} class Person constructor this this this this this The contains data variables which will hold information for each person. This would be their and , the that they are studying and which they are apart of. Person model first last name subjects classrooms subjects = [ , , , , , ]; const "English" "Math" "Computer Science" "Business" "Finance" "Home Economics" The will simply be an array, since for this example I have no intention in allowing the subjects model to be manipulated. Subjects model Controller Layer The controller would be a class which translates the user input into changes to the model's data. In the – the controller receives user input from view elements such as text input or select options and button clicks which is used to modify the model. E.G. Classroom App classroomModel ; { () { .lastID = ; .classrooms = []; .selectedClass = ;
  }

  selectClassroom(classroomID) { .selectedClass = .classrooms
    .filter( c.id === (classroomID, ))[ ];
  }

  addClassroom(subject) { .classrooms.push( classroomModel( .lastID, subject)
      ); .lastID += ;
  }

  removeClassroom(classroomID) { .classrooms = .classrooms
      .filter( c.id !== (classroomID, ));
  }

  setSubject(subject, classroomID) { classroom = .classrooms
      .filter( c.id === (classroomID, ))[ ];
    classroom.subject = subject;
  }

  addPerson(person, classroom) { (!person) ;
    classroom.addPerson(person);
  }

  removePerson(person, classroomID) { classroom = .classrooms
    .filter( c.id === (classroomID, ))[ ];
    classroom.removePerson(person);
  }
} import from "../models/classroom" class ClassroomController constructor this 0 this this null this this => c parseInt 10 0 this new this this 1 this this => c parseInt 10 const this => c parseInt 10 0 // const classroom = this.classrooms // .filter(c => c.id === parseInt(classroomID, 10))[0]; if return const this => c parseInt 10 0 The in this case could be seen as a in reference to how operates and each row in this "Table" would be information linked to each classroom object already created. classroom controller Table Rails This controller has variables of its own, " " (Every time a classroom object is created and added to the classrooms array this variable's value increments), " " (an array of all created classroom objects) and " ". three lastID classrooms selectedClass View Layer This layer handles the representation of the app’s data. This layer contains classes which allows the to see and with the . visual User interact data In the – the view would provide elements such as , and (<div/>, <span/ >, <p/>…etc.) to display the various persons and classrooms and their related data. E.G. Classroom App ( ) Document Object Model DOM Buttons Inputs containers classroomController ; subjects ; { (appDiv) { .classroomController = classroomController(); .classroomSectionDiv = .createElement( ); .classroomsDiv = .createElement( ); .addclassBtn = .createElement( ); .selectSubjectInput = .createElement( ); .classroomSectionDiv.classList.add( ); .classroomsDiv.classList.add( ); .selectSubjectInput.innerHTML = subjects.map( ( )); .addclassBtn.textContent = ; .addclassBtn.addEventListener( , () => .addClassroom()); .classroomSectionDiv.append( .classroomsDiv, .selectSubjectInput, .addclassBtn,
      );
    appDiv.appendChild( .classroomSectionDiv);
  }

  updateView() { { classroomController, classroomsDiv } = ; allClassrooms = classroomController.classrooms.map( { removeBtn = .createElement( ); classDiv = .createElement( );
        classDiv.classList.add( ); (classroomController.selectedClass === c) {
          classDiv.classList.add( );
        }
        classDiv.addEventListener( , () => .selectClassroom(classDiv.getAttribute( )));
        classDiv.setAttribute( , c.id);
        removeBtn.addEventListener( , () => .removeClassroom(removeBtn.getAttribute( )));
        removeBtn.setAttribute( , c.id);
        removeBtn.classList.add( );
        removeBtn.textContent= ; allPersons = c.persons.map( ( ));
        classDiv.innerHTML = ;
        classDiv.appendChild(removeBtn); classDiv;
      }
    );
    classroomsDiv.innerHTML= ;
    allClassrooms.map( classroomsDiv.append(div));
  }
  
  selectClassroom(classroomID) { { classroomController } = ;
    classroomController.selectClassroom(classroomID); .updateView();
  }

  addClassroom() { {
      classroomController,
      selectSubjectInput,
    } = ; subjectChosen = selectSubjectInput.value;
    classroomController.addClassroom(subjectChosen); .updateView();
  }

  removeClassroom(classroomID) { { classroomController } = ;
    classroomController.removeClassroom(classroomID); .updateView();
  }

  addPerson(person, classroomID) { { classroomController } = ;
    classroomController.addPerson(person, classroomID); .updateView();
  }
} import from "../controllers/classroom" import from "../models/subjects" class ClassroomView constructor this new this document 'div' this document 'div' this document 'button' this document 'select' this 'classroom-section' this 'classroom-container' this ( ) => option, index `<option key= value= > </option>` ${index} ${option} ${option.toUpperCase()} this 'New Class' this 'click' this this this this this this const this const => c const document 'button' const document 'div' 'classroom' if 'selected' 'click' this 'data-classroom-id' 'data-classroom-id' 'click' this 'data-classroom-id' 'data-classroom-id' 'remove-btn' 'remove' const => p `<div class="person-inline">
            <span class="fname"> </span>
            <span class="lname"> </span>
            <span class=" "> </span>
          </div>` ${p.firstName} ${p.lastName} ${p.occupation} ${p.occupation} `<div class="m-b">
            <span class="id"> </span>
            <span class="subject"> </span></div>
            <div class="all-persons"> </div>` ${c.id} ${c.subject} ${allPersons.join( )} '' return '' => div const this this const this const this const this this const this this The class contains a variable that links to a which is created upon construction. This allows communication with the controller from the view. ClassroomView ClassroomController The function is ran after every change as a result from user Interactions. This function simply updates all related view elements with the appropriate data obtained from the associated model. updateView() DOM All functions within the view simply grab values from the ( elements and transfer them as variables to the controller's functions. The functions , and are all added to the elements via the function as events through the function. User Interface UI) DOM selectClassroom() addClassroom() removeClassroom() DOM updateView() addEventListener() Accessing all controllers and views through a single view Now, since for this example we have two controllers, a and a ( ). We would also have two views and if we wanted these two views to be able to interact with one another we would create a single overarching view. We could call this view the . Classroom Controller Person Controller Shown in full project Application View classroomView ; personView ; { (appDiv) { .classroomView = classroomView(appDiv); .personView = personView(appDiv); .addPersonToClassBtn = .createElement( ); .addPersonToClassBtn.textContent = ; .addPersonToClassBtn.addEventListener( , () => .addPersonToClass());
    appDiv.appendChild( .addPersonToClassBtn);
  }

  addPersonToClass() { { classroomView, personView } = ; { classroomController } = classroomView; { personController } = personView; selectedClassroom = classroomController.selectedClass; selectedPerson = personController.selectedPerson;
    classroomView.addPerson(selectedPerson, selectedClassroom);
    personView.updateView();
  }
} import from './classroom' import from './person' class AppView constructor this new this new this document 'button' this 'Add selected Person to Selected Class' this 'click' this this const this const const const const This class would have it's own variables that would link to both the and views. Since it has access to those two views it also has access to their controllers. ApplicationView classroom person This button above is generated by the view. It grabs the and values from their respective controllers and runs the function in the classroom view upon interaction. Application selectedClassroom selectedPerson addPerson() For a full look at the Classroom App check out the CodeSandBox Here! Some Advantages of Using the MVC Framework Sources: , , , Brainvire c-sharpcorner StackOverflow Wikipedia 1. Separation of Concerns All code related to the is handled by the . All base data variables are contained by the and all model data is changed through the . User Interface view Model Controller 2. Simultaneous Development Since this model clearly separates the project into three (3) layers it becomes a lot easier to separate and assign tasks to multiple developers. MVC 3. Ease of Modification Can easily make changes to each layer without immediately affecting the other layers. 4. Test Driven Development (TDD) With clear separation of concerns it allows the testing of each individual component independently.

Different

Creating a Forum CMS with React.js and Ruby on Rails

How I Adopted the Model, View, Controller (MVC) Architectural Pattern in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Creating a Forum CMS with React.js and Ruby on Rails

10x Rockstar Ninja Wizard Vampires

10 Prioritization Techniques for Agile Product Development

10 Online Free Courses That Can Help to Learn Agile Development

140 Stories To Learn About Agile Software Development

4 Ways to Manage Remote Teams

Creating a Forum CMS with React.js and Ruby on Rails

10x Rockstar Ninja Wizard Vampires

10 Prioritization Techniques for Agile Product Development

10 Online Free Courses That Can Help to Learn Agile Development

140 Stories To Learn About Agile Software Development

4 Ways to Manage Remote Teams

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps