In a recent video titled 'Key Concepts to Become a Wized Expert', Alex Iglesias, the CTO of Finsweet and the new Product Owner of Wized, alongside Rohan Ganachari, Wized's marketing lead, guided us through four fundamental concepts essential for mastering up to 90% of Wized's use cases. In this article, we will explore these four ideas in detail, sharing what we've learned and how these concepts can be applied to your own projects.
Wized, the Webflow of JavaScript
Wized is a no-code tool that allows you to build complex web applications within Webflow. It enables you to use Webflow as the interface for your web application and natively integrate your website with the most common databases or any database that has a REST API. Wized allows you to create custom login features, Stripe payment flows, complex user interactions, and much more.
Finally, to quote Alex Iglesias, the CTO of Finsweet and new Product Owner of Wized,
“Wized is to JavaScript what Webflow is to HTML and CSS."
So, just as Webflow has democratized website creation by making HTML and CSS accessible to everyone, Wized aims to do the same for web application programming with JavaScript.
Note: Development (Webflow) vs Programming (Wized)
It’s important to observe that when discussing Wized, the terminology used shifts and differs from that of Webflow. We never use the term "development" but always refer to "programming".
The 4 Key Concepts of Wized
These four JavaScript concepts are essential for understanding how Wized works.
1. Variables
In the context of Wized and JavaScript development, variables play a fundamental role. They act as "containers" to store "values".
A helpful analogy for understanding variables is to think of them as dynamically evaluated conditions. This means they can change value based on user actions or other events in your application. For instance, you might 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 "false" when they log out.
Depending on the value of this variable, different actions could be triggered in your application. If the variable is "true" (the user is logged in), you might display a personalized welcome message. If it’s "false" (the user is logged out), you could redirect them to the login page.
2. Expressions
An expression is a statement that produces a value from one or more other values. To illustrate this concept, let’s take a simple math example: 2+2=4.
Here, "2+2" is the expression and "4" is the result of that expression.
However, expressions in programming are not 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 webpage. You could create an expression that changes the value of a variable when the button is clicked. If the variable is initially "true", the expression might change it to "false" when the button is clicked, and vice versa.
This is where the true power of expressions lies: they allow you to manipulate values and control the behavior of your application in a dynamic and interactive manner.
3. Functions
In the field of programming, functions are essential elements that allow you to structure and organize your code. A function is a sort of "machine" that takes an input (or multiple inputs), performs operations, often using expressions, and produces an output. Therefore, a function can contain a group of expressions.
To draw 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). Similarly, a function takes inputs, performs operations on them, and produces an output.
Tips for generating and writing your JavaScript functions? Use ChatGPT (Make sure to provide all the context).
Discover how I use ChatGPT to assist me with JavaScript in this video →
4. HTTP Requests
HTTP requests allow for sending and receiving data between the front-end and back-end of your application, thus enabling the addition, updating, and deletion of data through these requests.
HTTP, which stands for Hypertext Transfer Protocol, is the means by which these two parts communicate and exchange data.
Conclusion (Recap)
By mastering these four concepts, you will be well-equipped to get the most out of Wized!
- The Variables: They act as "containers" for storing "values" and can be used to control the dynamic behavior of your application.
- The 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.
- The Functions: They are essential elements that allow you to structure and organize your code. A function takes an input, performs operations, often using expressions, and produces an output.
- The HTTP Requests: They enable the sending and receiving of data between the front-end and back-end of your application, thus allowing the addition, updating, and deletion of data.
Want to learn more about the Wized programming tool?
- Watch the Wized presentation video (French version by Digidop)
- Watch the Key Concepts to Become a Wized Expert video from Wized (English version only)
