🏗️App architecture 101

In this lesson we are going to walk you through a high level overview of architecture on Dittofi. You are going to learn about:

• Frontend and backend

• Dittofi full stack architecture

• Intro to the Dittofi Design Studio

Frontend and backend

All software applications (e.g. landing pages, websites or web apps) that display dynamic data have a frontend and a backend. The frontend of a software application is the bit that you see and interact with. The backend is the bit that you don't see.

The frontend interacts with the backend. Below we show a small example. In this example, think about what happens when you load the message history for one of your contacts on Facebook, Instagram or Whatsapp.

The frontend of your mobile device will communicate with your backend to get your chat history.

When you have a frontend communicating with a backend, this is what is known as a full stack architecture. Full stack is frontend and the backend together. Below is an example of how this looks at a very very high level.

For more a more detailed look at what is a frontend and backend, watch our short introduction Web Developer Beginner Series and subscribe to our YouTube channel.

Dittofi full stack architecture

Dittofi is a full stack builder. This means you can build the frontend and backend visually. The diagram below shows you the details of the frontend, backend and connections that we are going to develop.

Reading the diagram from left to right, you can see that the device sends a message to the backend of your system asking for data. Next, the backend picks up this information at something called an "endpoint". The endpoint then starts a routine which we call an "action" and this action communicates with a data store (or database) to get the information and return it to the users.

A more detailed view of the same workflow is set out below.

Our introduction Web Developer Beginner Series - 20 min video based crash course in the technical terms such as endpoint if you are not familiar with these concepts. We will also cover these in more detail later on.

Dittofi Design Studio

The Dittofi Design Studio is broken down into tabs that correspond to full stack app architecture. The text on the left hand side of the screenshot below shows this in more detail.

There are four main tabs.

First, the frontend builder. This is where you can build your apps frontend.

Second, your endpoints. This is where you can configure your apps endpoints.

Third, your actions. This is where you can configure your apps actions.

Fourth, your data models (or database). This is where you can configure and administer your database.

Dittofi can also interact with third party systems using our API builder.

Onwards

Next up, let's look at how to build your backend in Dittofi in Backend app development 101.