in questa prima parte mi sono concentrato nella creazione del progetto Webflow e collegamento con Wized
nel progetto Webflow uso client-first per gestire la struttura e nome delle classi
Developer-starter
siccome Wized per ora non offre tante funzionalità (è ancora in beta) ho deciso di utilizzare il developer-starter di finsweet per 4 motivi principali:
1. poter usare javascript
2. usare le wized api
3. velocizzare di molto lo sviluppo con codice perche posso utilizzare typescript e quindi avere un feedback immediato su quello che scrivo invece di dover pubblicare il sito ogni volta
4. il codice si trova su NPM quindi non ho più il limite delle 10.000 righe di codice
questa soluzione non è obbligatoria, ma può tornare utile se dobbiamo sviluppare funzionalità più complesse
Preload
ho deciso di creare un preloader per aspettare che wized sia caricato, in questo modo evito questo leggero delay che vedi nel video
un'altra soluzione è nascondere gli elementi ed attivare un loader o ghost-loader su webflow per poi sostituirli con il contenuto finale una volta che wized è pronto
Mostra/Nascondi elementi protetti
wized nasconde gli elementi dalla ui usando display:none gli elementi sono sempre visibili nel codice
quindi è IMPORTANTE che il backend sia protetto e non ci siano chiavi private nel front-end altrimenti chiunque può vederle
l'obiettivo è integrare il codice dove necessario per richiamare le azioni, variabili e richieste che posso creare direttamente su wized
per il backed sto utilizzando Xano ma potrei usa firebase, supabase, Airtable o qualsiasi backend che espone delle api
Vantaggi e Svantaggi
uno dei piu grossi vantaggi è che utilizzando webflow come ui builder non fa percepire l'effetto MVP (una ui poco fluida e con animazioni basiche), cosa che invece si vede con altri strumenti come bubble o weweb
le animazioni ed il comportamento in generale della ui è uguale al twitter reale
la parte di logica con wized per ora è ancora molto semplice ma integrando un po di codice si possono gia fare app interessanti
xano è molto potente e sopratutto è un backend pensato per scalare e creare progetti complessi con molta flessibilità
i prossimi step che vorrei realizzare sono:
[ ] email auth
[ ] google auth
[x] hide/show private info
[ ] user profile
[ ] home tweets
[ ] create a new tweet
[ ] like and comment tweet
[ ] real-time messaging
[ ] nested navigation
se non vuoi perderti i prossimi step puoi iscriverti alla mia newsletter
Newsletter
se pensi che puo piacere ad altri condividilo
fammi sapere che ne pensi o se hai domande qui sotto 🙂