How Codebots works: MVC architecture

by Lana Brindley, Mar 21, 2018

When using the Codebots platform, you need to tell the bots how the underlying technologies and capabilities fit together.

You can give the bots instructions in a number of different ways: to start with you create your initial project using a chatbot or a wizard, and then you can create epics and user stories in the Stories Backlog.

But to describe how you want your project to look and feel, and, more importantly, how the pieces of the puzzle fit together, you use the Diagram Editor.

To understand the pieces at your disposal within the Diagram Editor, first, you must understand MVC architecture.

MVC architecture

Lampbot uses the MVC pattern to structure its code on both the server-side and client-side, creating a clean microservice architecture. Developing web-based user interfaces becomes easier when using MVC architecture.

MVC architecture is used to describe the relationship between the data of a web app, and the way that that data is displayed to the end user. The important thing to remember is that the data (stored in a database) and the view of that data (the way the data is displayed to the user) is kept completely separate. This allows the same data to be presented in a multitude of different ways.
MVC architecture is kind of like how the same HTML can look and feel completely depending on the CSS. The same stuff can be used and reused in multiple ways.
MVC architecture has three components: the Model, the View, and the Controller. Let's go through each of these in more detail:

Model: The model is the most important part of the MVC structure. It is where the data itself is contained, and where the logic that controls that data is defined. When you start writing any code, the model must be defined first.

View: The view determines how the data contained in the model will be displayed to the user. The view could display charts, texts, or diagrams, for example. Because the MVC model separates the data (model) from the display (view), a developer can display the same data in different ways by applying different views. We will go through the views we use in Lampbot in more detail later on.

Controller: The controller handles the connection between the user and the data, by accepting user input, validating the input, and performing actions on the data. In Lampbot, we sometimes refer to the Controller as an 'application', we'll explain why in a later lesson.

The user (someone using the web app) uses a controller or application to manipulate a model. The model contains data. After any changes to the data inside the model, the model updates a view. The view then displays the manipulated data back to the user.

This diagram explains how the three components fit together: