How Wized works under the hood

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 🙂

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