The high level architecture of a Dittofi app
Lesson 5 Dittofi onboarding series
In this tutorial we are going to give you a high level view of what the different tabs are inside the Dittofi Design Studio.
How to navigate the Dittofi Design Studio
In this lesson you are going to learn about:
  • Frontend and backend
  • Full stack architecture
  • Dittofi design studio

Frontend and backend

All software applications (e.g. landing pages, websites or web apps) that are display dynamic data all 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 of each of these common apps interacts with its own 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.
Frontend communicates with your backend the get the chat history
As you can see, 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.

General full stack architecture

Let's take a look at what frontend and backend look like in more detail. In the diagram below we can see how the frontend of our device gets saved information.
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 - covers these concepts in more detail.

Dittofi Design Studio

The Dittofi Design Studio is a full stack, software builder. True to form, we have broken down our studio into tabs that correspond to the full stack app. 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. This is where you can configure and administer your database.
Data models - actions interact with your data store
We also have the ability to interact with third party systems using our API builder and other tools.
Ditto tip: Each of the types of app that you are going to build e.g. frontend, backend, API & ETL, can work as standalone components within your existing tech stack OR as part of a complete, all in one, Dittofi solution.


Next up, we recommend that you read either the Getting Started series for the Frontend or the Backend, depending on where you feel most comfortable.
Last modified 16d ago