I remember that at school the math teacher often told us not to memorize the formulas but to try to understand the principle behind the formula. In this way it would be easier to understand where and when to use them
In my opinion the same goes for no-code tools. Understanding how they work under the hood helps us to have the complete picture of the puzzle and understand where to place each piece
Before going into detail, I want to define some terms that I will use
Front-end
When we talk about front-end or client in the web world, we refer to the browser - the tool that retrieves all the files necessary to view our websites
Back-end
The back-end, or server, takes care of recovering the data necessary for the front-end from one or more databases or performing operations with confidential data such as in payments
To understand this better, let’s think of a restaurant. When we are at the table and want to order, we talk to the waiter who tells us what we can choose, then the waiter goes to the kitchen and communicates the order, the kitchen reads the order and retrieves the necessary ingredients from the pantry, they prepare the dish and the waiter brings it back to the dining room.
The kitchen is the backend, the dining room is the front end and the waiter the API
From this example we also understand why it is important not to use sensitive data in the front-end, because being public anyone can see it, while the backend is private
having said that, let’s talk about Wized.
How Wized works
Wized is a no-code tool to use javascript within a webflow project. We can say that wized is a visual jquery (even if it doesn't use it), so we can manipulate and manage DOM events like onClick and onChange, make calls to a server through its API and in general everything you can do with javascript
it lives only in our browser, so it does not have access to the webflow backend, it can only manipulate the pages that arrive in the browser; this aspect is very important
It generates two javascript files. The first is the index.js (or wized.js) It is the main file that contains the core of the wized logic while the second contains the specific data of our project, for example the actions, variables etc. These two files can be included in one or more pages of our webflow project, where we want to use wized
to manipulate elements, such as div, texts and forms we have to use the custom attribute
w-el = "elementName"
for the name, we can use the camelCase
these attributes are fundamental to wized because all operations are based on these elements. They tell wized which elements we want to manipulate or when to make a certain call to the server.
I would like to see, in the future, if we could split the code by page and generate the code needed only for the features we actually use
now that we better understand how Wized works under the hood, it will be easier to understand how authentication works, one of the most confusing topics