Recuerdo que en la escuela el profesor de matemáticas a menudo nos decía que no memorizáramos las fórmulas, sino que intentáramos entender el principio detrás de la fórmula. De esta manera, sería más fácil entender dónde y cuándo usarlas.
En mi opinión, lo mismo ocurre con las herramientas sin código (no-code). Entender cómo funcionan bajo el capó nos ayuda a tener el panorama completo del rompecabezas y comprender dónde encaja cada pieza.
Antes de entrar en detalles, quiero definir algunos términos que utilizaré.
Front-end
Cuando hablamos de front-end o cliente en el mundo web, nos referimos al navegador: la herramienta que recupera todos los archivos necesarios para ver nuestros sitios web.
Back-end
El back-end, o servidor, se encarga de recuperar los datos necesarios para el front-end a partir de una o más bases de datos, o de realizar operaciones con datos confidenciales, como en los pagos.
Para entender esto mejor, imaginemos un restaurante. Cuando estamos en la mesa y queremos pedir, hablamos con el camarero que nos dice qué podemos elegir, luego el camarero va a la cocina y comunica el pedido, la cocina lee el pedido y recupera los ingredientes necesarios de la despensa, preparan el plato y el camarero lo lleva de vuelta a la sala.
La cocina es el backend, el comedor es el frontend y el camarero la API.
A partir de este ejemplo, también entendemos por qué es importante no utilizar datos sensibles en el frontend, ya que, al ser público, cualquiera puede verlo, mientras que el backend 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 (incluso si no lo usa), de modo que podemos manipular y gestionar eventos del DOM como onClick y onChange, hacer llamadas a un servidor a través de su API y, en general, todo lo que puedes hacer con JavaScript.
Vive íntegramente en nuestro navegador, por lo que no tiene acceso al backend de Webflow, solo puede manipular y leer el código que ha sido cargado. Esta característica lo es todo.
Al exportarlo para publicar un proyecto, genera dos archivos JavaScript. El primero es el index.js (o wized.js): es el archivo principal que contiene el núcleo y la lógica en Wized; mientras que el segundo incluye todas sus acciones, variables, etc. Estos dos ficheros se acoplan al HTML base y a cada componente o vista del proyecto final de cara al navegador.
Para manipular elementos, como divs, textos o componentes tenemos que usar el atributo:
w-el = "nombreDelElemento"El nombre puede implementarse con "camelCase".
Estos atributos son los que sirven de base, que conectan a la aplicación con su motor. Indican qué partes del sitio cambiarán dinámicamente o responderán.
Podríamos visualizar, con el tiempo, la posibilidad de fragmentar por páginas e identificar elementos que queremos ver o ejecutar y usar. De esta manera mejoraríamos muchísimo y se consumiría solo los módulos que necesitamos en ciertos lugares.
Cosas como el login y acceso funcionan un poco diferente, será un alivio la próxima vez.
