App architecture 101
In this tutorial we are going to give you a high level view of what the architecture of a app built on Dittofi looks like.
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
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.
Everyday apps where we interact with the frontend only
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.
Frontend communicates with your backend the get the chat history
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.
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.
Dittofi Full Stack Architecture
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.
Full stack Dittofi app architecture
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.
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.
High level view of the Dittofi Design Studio
There are four main tabs.
First, the frontend builder. This is where you can build your apps frontend.
Frontend builder - Dittofi Design Studio
Second, your endpoints. This is where you can configure your apps endpoints.
Endpoints tab - endpoints start actions
Third, your actions. This is where you can configure your apps actions.
Actions tab - actions give your endpoints functionality
Fourth, your data models (or database). This is where you can configure and administer your database.
Data models - actions interact with your data store
Dittofi can also interact with third party systems using our API builder.