Recuerdo que en la escuela el profesor de matemáticas nos decía que no memorizáramos las fórmulas, sino que intentáramos entender el principio detrás de cada una. De esa manera sería más fácil entender dónde y cuándo usarlas.
En mi opinión lo mismo aplica a las herramientas no-code. Entender cómo funcionan bajo el capó nos ayuda a tener el panorama completo y saber dónde va cada pieza.
Antes de entrar en detalle, quiero definir algunos términos que voy a usar.
Front-end
Cuando hablamos de front-end o cliente en el mundo web, nos referimos al navegador — la herramienta que descarga todos los archivos necesarios para ver nuestros sitios web.
Back-end
El back-end, o servidor, se encarga de obtener los datos que necesita el front-end desde una o más bases de datos, o de ejecutar operaciones con datos confidenciales, como en los pagos.
Para entenderlo mejor, pensemos en un restaurante. Cuando estamos en la mesa y queremos pedir, le hablamos al camarero, que nos dice qué podemos elegir. El camarero va a la cocina y comunica el pedido, la cocina lo lee, saca los ingredientes de la despensa, prepara el plato y el camarero lo lleva a la mesa.
La cocina es el backend, el salón es el frontend y el camarero es la API.
De este ejemplo también entendemos por qué es importante no usar datos sensibles en el front-end: al ser público, cualquiera puede verlos. El backend, en cambio, es privado.
Dicho esto, hablemos de Wized.
Cómo funciona Wized
Wized es una herramienta no-code para usar JavaScript dentro de un proyecto de Webflow. Podemos decir que Wized es un jQuery visual (aunque no lo usa), así que podemos manipular eventos del DOM como onClick y onChange, hacer llamadas a un servidor a través de su API y, en general, todo lo que harías con JavaScript.
Vive únicamente en el navegador, por lo que no tiene acceso al backend de Webflow — solo puede manipular las páginas que llegan al navegador. Este punto es muy importante.
Genera dos archivos JavaScript. El primero es el index.js (o wized.js) — es el archivo principal que contiene el núcleo de la lógica de Wized. El segundo contiene los datos específicos de nuestro proyecto, como las acciones, variables, etc. Estos dos archivos se pueden incluir en una o más páginas de nuestro proyecto de Webflow, donde queramos usar Wized.
Para manipular elementos como divs, textos y formularios hay que usar el atributo personalizado:
w-el = "elementName"Para el nombre podemos usar camelCase.
Estos atributos son la base de Wized porque todas las operaciones dependen de ellos. Le dicen a Wized qué elementos queremos manipular o cuándo hacer una llamada al servidor.
Me gustaría ver, en el futuro, si pudiéramos dividir el código por página y generar solo el código necesario para las funcionalidades que realmente usamos.
Ahora que entendemos mejor cómo funciona Wized bajo el capó, será más fácil entender cómo funciona la autenticación, uno de los temas más confusos.
