Understanding MVC Services for the Front End: VanillaJS

A step-by-step JavaScript tutorial

Carlos Caballero
Oct 10, 2019 · 6 min read
Image designed by JComp / Freepik

Introduction

This piece is the first in a series of three that will understand how the MVC architecture works to create front-end applications. The objective of this series is to understand how to structure a front-end application by evolving a web page in which JavaScript is used as a scripting language towards an application in which JavaScript is used as an object-oriented language.


Project Architecture

There is nothing more valuable than an image to understand what we are going to build. there is a GIF below in which the application we are going to build is illustrated.

  • Views — A visual representation of the models
  • Controllers — Links between services and views
  • user.controller.js — The one in charge of joining the service and the view
  • user.service.js — Manage all operations on users
  • user.views.js — Responsible for refreshing and changing the display screen

Models (Anemic)

The first class built in this example is the application model, user.model.js, which consists of the class attributes, and a private method that is generating random IDs (these ids could come from a database on the server).

  • name — The name of the users
  • age — The age of the users
  • complete — Boolean that lets you know whether we can cross the user off the list

Conclusion

In this first post, we have developed a web application where the project has been structured following the MVC architecture, in which anemic models are used and the responsibility for the logic lies in the services.

Better Programming

Advice for programmers.

Carlos Caballero

Written by

Hi! My name is Carlos Caballero and I’m PhD. in Computer Science from Málaga, Spain. Teaching developers and degree/master computer science how to be experts!

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade