Part 1: Frontend terms and concepts
The Dittofi Essentials give you a "top down" introduction to essential concepts in Dittofi. In this tutorial we cover frontend terms and concepts.
WHAT YOU'LL LEARN
Key Dittofi terms and concepts (frontend only)
Frontend elements
Frontend variables
Two way variable binding
Frontend workflows
Creating a frontend workflow
Dittofi terms and concepts (frontend only)
Before we dive into some actual visual app development, let's talk about some of the terms and concepts you'll need to know to use Dittofi's frontend builder. In the next lesson we will cover the key terms and concepts for Dittofi's backend builder.
Frontend Elements
Dittofi empowers anyone to build beautiful, high performance frontends. To start with users are able to select from a list of prebuilt frontend elements that let them design their app. Users can then click the build code button to turn these designs into code (HTML5, CSS, React and Redux and golang).
Note that the "build code" button also launches the app into a docker container inside a pre-configured and scalable Amazon Web Services environment.
Frontend Variables
Frontend variables are like placeholders. They can be used to store data in the frontend of your app. For example, if you want to write a custom message to your new users like "Welcome Bob Dylan". You can do this in four steps.
Step 1. Create a frontend variable
Creating a new frontend variable from the variables tab.
Step 2. Complete variable form
Fill in the variables form, setting the Name to "username", the Kind to "Text", and the Expression to "Bob Dylan".
Step 3. Bind your header to your variable
Add a new header element and type "My username" in the content of the header element, bind your header element to your variable by clicking the Show button in the dropdown and selecting "Variable".
Step 4. Build and launch your app
We will first ensure the element is getting the data from the variable and then we build your code and launch your app. You can see that when you hit the preview button, the binded variable ("My username") is substituted out for the Initial Value which, in out case is the username "Bob Dylan".
Two way variable binding
In the last step we created a variable with an initial, fixed, text value set to "Bob Dylan". It is also possible to populate the variable with dynamic information. One way to do this is to bind the variable to and Text input box. You can do this in three steps.
Step 1. Add a Text input element
Add an Text input element to your page.
2. Bind {username} variable
Bind the Text input element to the "My username" variable that we created in the last step.
Once out text input element is bound to our "{username}" variable, whenever someone types into the text input element, this text will immediately populate inside of our "{username}" variable.
Step 3. View the result
Finally, to see the result in action, build and launch your code. Then test your code by typing into the text input element as shown below. You can see that the contents of the text input element immediately populates our "My username" variable.
Front-end actions
Front-end actions allow your users to trigger certain types of functionality. For example, you might want to alert one of your app users with a custom message if they clicks on a button, as below.
Creating a front-end action
Front-end actions can be added from inside the Dittofi page builder, under the "Front-End Actions" tab.
Inside the front-end action, you're able to chain together events to perform any type of functionality for example, validating form data, running conditional checks, loops and much more. In our example, we want to trigger an alert popup. To do this, we add the Alert event.
Next we create a message that we want to display inside our Alert. To do this, we create a text variable inside of our action.
Note, this variable is global to our action, this means the variable can be used inside any event that we add to our action. Note also that the variable kind is set to text and the Expression field is set to a fixed value "Yo... you just clicked my dope button".
Next, we can use our variable to set the Message value inside of our Alert event.
The last step (before you build and launch) is to set your action to trigger when the user clicks on a button. To do this, (1) add a button element to the page, (2) select the button element, (3) open up the front-end action tab and (4) add the front-end "My First Action" to trigger on click. Now, whenever someone clicks on this button, that will trigger your action to start.
Build and launch your app to test your first workflow.
Take note, front-end actions are incredibly flexible. Depending on how you chain together the events, you can achieve pretty much anything. We will build more extensive workflows in Parts 3 and 4 of this tutorial.
What you've learned
Dittofi's frontend has a number of new terms and concepts to remember. As a reminder, here's what we just covered:
Frontend elements: these are a list of prebuild elements that you can add to the frontend of your app.
Frontend variables: these are placeholders that can store data. You can bind each variable to a frontend element.
Two way variable binding: variables can be bound to page elements that are used to display outputs as well as store data input by our apps users.
Frontend actions: these can be configured to perform any type of frontend functionality for example, displaying an alert box on a user click.
Next up
You will learn key terms and concepts required to use Dittofi's Backend Builder.
Last updated
