Four fundamental concepts to master Wized

In a recent video entitled 'Key Concepts to become a Wized Expert', Alex Iglesias, Finsweet's CTO and Wized's new Product Owner, and Rohan Ganachari, Wized's Marketing Manager, guided us through four fundamental concepts for mastering up to 90% of Wized's use cases. In this article, we'll explore these four ideas in detail, sharing what we've learned and how these concepts can be applied in your own projects.

Wized, the Javascript Webflow

Wized is a no-code tool that lets you build complex web applications in Webflow. It lets you use Webflow as the interface for your web application, and natively integrate your website with the most common databases, or any database with a REST API. Wized lets you create custom login features, Stripe payment flows, complex user interactions and much more.

Finally, to quote Alex Iglesias, Finsweet's CTO and Wized's new Product Owner,

"Wized is to Javascript what Webflow is to HTML and CSS.

So, just as Webflow democratized website creation by making HTML and CSS accessible to all, Wized aims to do the same for web application programming with Javascript.

Note: Development (Webflow) vs. Programming (Wized)

Note that when we talk about Wized, the language used changes and is not the same as Webflow. We never speak of "development", but always of "programming".

Wized's 4 key concepts

These four JavaScript concepts are essential to understanding how Wized works.

1. Variables

In the context of Wized and JavaScript development, variables play a fundamental role. They act as "containers" for storing "values".

A useful analogy for understanding variables is to think of them as dynamically evaluated conditions. This means they can change value according to user actions or other events in your application. For example, you may have a variable that determines whether a user is logged in or not. This variable could be set to "true" when the user logs in, and to "false" when the user logs out.

Depending on the value of this variable, different actions can be triggered in your application. If the variable is "true" (the user is logged in), you can display a personalized welcome message. If it is "false" (the user is logged out), you can redirect the user to the login page.

2. Expressions

An expression is an instruction that produces a value from one or more other values. To illustrate this concept, let's take a simple mathematical example: 2+2=3

Here, "2+2" is the expression and "4" is the result of this expression.

But programming expressions aren't limited to simple calculations. They can also be used to control the behavior of your application. For example, imagine you have a button on your website. You can create an expression that changes the value of a variable when that button is clicked. If the variable is initially "true", the expression could change it to "false" when the button is clicked, and vice versa.

This is where the real power of expressions lies: they allow you to manipulate values and control the behavior of your application in a dynamic and interactive way.

3. Functions

When it comes to programming, functions are essential elements for structuring and organizing your code. A function is a kind of "machine" that takes an input (or several inputs), performs operations, often using expressions, and produces an output. A function can therefore contain a group of expressions.

To make a comparison with Webflow lightboxes, you can think of a function like a lightbox. A lightbox is a tool that takes an image (the input), displays it enlarged with a dark background (the operation), and allows the user to close it to return to the original page (the output). In the same way, a function takes inputs, performs operations on them, and produces an output.

Tips for generating and writing JavaScript functions? Use ChatGPT (be sure to give it the full context)

Find out how I use ChatGPT to help me with JavaScript in this video →

4. Http Requests

HTTP requests are used to send and receive data between the front-end and back-end of your application, enabling you to add, update and delete data via these requests.

HTTP, which stands for Hypertext Transfer Protocol, is the means by which these two parties communicate and exchange data.

Conclusion (Recap)

By mastering these four concepts, you'll be well equipped to make the most of Wized!

• Variables: These act as "containers" for storing "values" and can be used to control the dynamic behavior of your application.
• Expressions: These are instructions that produce a value from one or more other values. They are essential for manipulating values and controlling the behavior of your application dynamically and interactively.
• Functions: These are essential elements for structuring and organizing your code. A function takes an input, performs operations, often using expressions, and produces an output.
• HTTP Requests: Send and receive data between the front-end and back-end of your application, enabling you to add, update and delete data.

Learn more about the Wized programming tool?

• Watch the Wized presentation video (French version by Digidop)
• See the Key Concepts to become a Wized Expert video from Wized.