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
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.
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).
Visual (no-code) builder
Code View
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 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 {username}". You can do this in four steps.
Creating a new frontend variable from the variables tab.
Fill in the variables form, setting the Name to "username", the Kind to "Text" and set a fixed initial value to "Bob Dylan".
Add a new header element, bind your header element to your variable (or placeholder) and change your title to greet your new user.
Build your code and launch your app. You can see that when you hit the preview button, the variable "{username}" is substituted out for the Initial Value which, in out case is the username "Bob Dylan".
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.
Add an Text input element to your page.
Bind the Text input element to the "{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.
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 "{username}" variable.
Frontend workflows 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.
Frontend workflows can be added from inside the Dittofi page builder, under the "Workflows" tab.
Inside the workflow, 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 workflow.
Note, this variable is global to our workflow, this means the variable can be used inside any event that we add to our workflow. 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 workflow 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 workflows tab and (4) add the workflow "My First Workflow" to trigger on click. Now, whenever someone clicks on this button, that will trigger your workflow to start.
Build and launch your app to test your first workflow.
Take note, workflows 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.
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 workflows: these can be configured to perform any type of frontend functionality for example, displaying an alert box on a user click.
Last modified 1yr ago