Mi ricordo che a scuola il professore di matematica ci diceva sempre di non memorizzare le formule, ma di cercare di capire il principio che c'è dietro. In questo modo sarebbe stato più facile capire dove e quando usarle.
Secondo me lo stesso vale per i tool no-code. Capire come funzionano sotto il cofano ci aiuta ad avere il quadro completo e a sapere dove mettere ogni pezzo.
Prima di entrare nei dettagli, voglio definire alcuni termini che userò.
Front-end
Quando parliamo di front-end o client nel mondo web, ci riferiamo al browser — lo strumento che scarica tutti i file necessari per visualizzare i nostri siti.
Back-end
Il back-end, o server, si occupa di recuperare i dati necessari al front-end da uno o più database, oppure di eseguire operazioni con dati riservati, come nei pagamenti.
Per capirlo meglio, pensiamo a un ristorante. Quando siamo al tavolo e vogliamo ordinare, parliamo con il cameriere che ci dice cosa possiamo scegliere. Il cameriere poi va in cucina e comunica l'ordine. La cucina legge l'ordine, prende gli ingredienti dalla dispensa, prepara il piatto e il cameriere lo porta in sala.
La cucina è il backend, la sala è il frontend e il cameriere è l'API.
Da questo esempio capiamo anche perché è importante non usare dati sensibili nel front-end: essendo pubblico, chiunque può vederli. Il backend invece è privato.
Detto questo, parliamo di Wized.
Come funziona Wized
Wized è un tool no-code per usare JavaScript all'interno di un progetto Webflow. Si può dire che Wized sia un jQuery visuale (anche se non lo usa), quindi possiamo manipolare eventi del DOM come onClick e onChange, fare chiamate a un server tramite API e in generale fare tutto quello che si farebbe con JavaScript.
Vive solo nel browser, quindi non ha accesso al backend di Webflow — può solo manipolare le pagine che arrivano nel browser. Questo aspetto è molto importante.
Genera due file JavaScript. Il primo è l'index.js (o wized.js) — è il file principale che contiene il cuore della logica di Wized. Il secondo contiene i dati specifici del nostro progetto, come le action, le variabili, ecc. Questi due file possono essere inclusi in una o più pagine del nostro progetto Webflow, dove vogliamo usare Wized.
Per manipolare elementi come div, testi e form dobbiamo usare l'attributo personalizzato:
w-el = "elementName"Per il nome possiamo usare il camelCase.
Questi attributi sono fondamentali per Wized perché tutte le operazioni si basano su di essi. Dicono a Wized quali elementi vogliamo manipolare o quando fare una certa chiamata al server.
Mi piacerebbe vedere, in futuro, se fosse possibile dividere il codice per pagina e generare solo il codice necessario per le funzionalità che effettivamente usiamo.
Ora che capiamo meglio come funziona Wized sotto il cofano, sarà più facile capire come funziona l'autenticazione, uno degli argomenti più confusi.
