Cosa è FastHTML

Cosa è FastHTML

FastHTML è un framework web Python leggero per la creazione di applicazioni web veloci e scalabili. Nel nostro articolo descriviamo le caratteristiche principali, il processo di configurazione e i confronti con altri framework

Si tratta di è un framework web Python leggero per la creazione di applicazioni web veloci e scalabili.

Come da storico release, questa tecnologia nasce nell’Ottobre 2022, quindi molto di recente.

Ecco cosa dobbiamo sapere:

• E’ in Python puro : costruito interamente in Python, rendendolo facile da imparare e utilizzare
• Basato su componenti : utilizza componenti riutilizzabili per uno sviluppo efficiente
• Veloce e flessibile : adatto per progetti di piccole e medie dimensioni
• Facile installazione : semplice processo di installazione e creazione del progetto
• Caratteristiche principali : componenti, modelli, viste e modelli

Confronto rapido con altri framework:

Caratteristiche	FastHTML	Flask	Django
Complessità	Semplice	Medio	Complesso
Dimensione	Leggero	Medio	Pesante
Facilità d’uso	Facile	Medio	Difficile
Personalizzazione	Alto	Medio	Basso

FastHTML offre un equilibrio tra semplicità e potenza, rendendolo una buona scelta per gli sviluppatori che desiderano una soluzione Python pura, senza la complessità di framework più grandi.

Concetti fondamentali di FastHTML
Il framework applica queste idee principali per creare applicazioni web:

• Componenti : pezzi di codice riutilizzabili per le pagine web
• Modelli : file HTML con sintassi speciale per l’aggiunta di dati dinamici
• Visualizzazioni : Funzioni che gestiscono le richieste e le risposte web
• Modelli : classi che lavorano con dati e logica aziendale

Caratteristiche principali
FastHTML offre queste funzionalità chiave:

Caratteristica	Descrizione
Velocità	Veloce e leggero per progetti web di piccole e medie dimensioni
Curva di apprendimento	API semplice, facile da imparare
Flessibilità	Possiamo creare molti tipi di app web
Personalizzazione	Possiamo modificarlo per adattarsi a esigenze specifiche

Confronto tra FastHTML, Flask e Django

Ecco in che modo FastHTML si differenzia da Flask e Django:

FastHTML è più semplice e leggero di Flask e Django. È più facile da imparare, specialmente per i nuovi sviluppatori web. Possiamo anche modificarlo di più per adattarlo a ciò di cui abbiamo bisogno.

Impostazione di FastHTML

Cosa ci serve per eseguire FastHTML
Avremo bisogno di:

• Python 3.7 o più recente
• pip (programma di installazione del pacchetto Python)
• Un editor di codice o IDE

Come installare FastHTML

Per installare FastHTML, segui questi passaggi:

• Aprire un terminale o un prompt dei comandi
• Digita questo comando:

pip install fasthtml

Premere Invio per installare

Creazione del tuo primo progetto FastHTML
Ecco come avviare un nuovo progetto:
Apri un terminale e vai dove vuoi creare il tuo progetto

Digita questo comando (sostituisci “myproject” con il nome del tuo progetto):

fasthtml new myproject

Vai alla cartella del nuovo progetto:

cd myproject

Avviare il server di sviluppo

fasthtml run

Apriamo un browser web e andiamo su http://localhost:8000

step	azione	comando
1	Crea progetto	fasthtml new myproject
2	Inserisci la cartella del progetto	cd myproject
3	Avvia il server	fasthtml run
4	Visualizza nel browser	andiamo su http://localhost:8000

In questo modo avremo configurato FastHTML e creato il nostro primo progetto. Ora possiamo iniziare a creare la nostra app web.

Parti principali di FastHTML
Utilizzo dei componenti
FastHTML utilizza componenti per creare app web. I componenti sono pezzi di codice riutilizzabili che costituiscono parti del tuo sito web. Puoi inserire componenti all’interno di altri componenti per creare layout complessi. Ecco come utilizzare un semplice componente in FastHTML:

from fasthtml import FastHTML, Component

class HelloWorld(Component):
def render(self):
return "Hello, World!"

app = FastHTML()
app.component(HelloWorld())

Questo codice crea un HelloWorldcomponente che mostra “Hello, World!” e lo aggiunge all’app.

Gestione dei dati
FastHTML offre modi per gestire i dati nella tua app. Puoi usare la classe integrata Stateo altri strumenti come Redux. Ecco un esempio che utilizza la Stateclasse:

from fasthtml import FastHTML, State

app = FastHTML()
state = State({"count": 0})

def increment_count():
state.update({"count": state.get("count") + 1})

app.route("/increment", increment_count)

Questo codice imposta un contatore e una funzione per incrementarlo quando si accede all’URL “/increment”.

Impostazione dei percorsi
I percorsi in FastHTML collegano gli URL alle funzioni nella tua app. Ecco un semplice esempio:

from fasthtml import FastHTML

app = FastHTML()

def hello_world():
return "Hello, World!"

app.route("/hello", hello_world)

Questo codice fa sì che l’URL “/hello” visualizzi “Hello, World!” quando viene visitato.

Gestione degli eventi
FastHTML ti consente di rispondere alle azioni degli utenti come i clic. Ecco come gestire un evento clic:

from fasthtml import FastHTML

app = FastHTML()

def handle_click():
print("Button clicked!")

app.on("click", handle_click)

Questo codice stampa “Pulsante cliccato!” quando si verifica un evento clic.

Caratteristica	Descrizione	Esempio
Componenti	Pezzi di codice riutilizzabili	HelloWorld componente
Gestione dati	Archiviazione e aggiornamento dei dati dell’app	Utilizzo State della classe
Itinerari	Collegamento degli URL alle funzioni	Impostazione del percorso “/hello”
Gestione degli eventi	Rispondere alle azioni dell’utente	Gestione degli eventi di clic

Creazione di interfacce utente
Questa sezione spiega come creare interfacce utente in FastHTML. Vedremo come creare parti riutilizzabili, aggiungere stili e assicurarci che la tua app funzioni su diverse dimensioni dello schermo.

Costruire componenti riutilizzabili
I componenti sono i blocchi di base della tua app web. Puoi usarli più e più volte in diverse parti della tua app. Ecco come creare un componente semplice:

from fasthtml import FastHTML, Component

class Button(Component):
def render(self):
return "Click me!"

app = FastHTML()
app.component(Button())

Questo codice crea un Button componente che possiamo utilizzare ovunque nella nostra app.

Aggiungere stili all’ app
Possiamo usare CSS per dare un bell’aspetto alla tua app. Puoi aggiungere stili a un componente o all’intera app. Ecco come aggiungere uno stile a un componente:

from fasthtml import FastHTML, Component

class Button(Component):
def render(self):
return "Click me!"

app = FastHTML()
app.component(Button())

Questo codice modifica il Button componente in modo che abbia uno sfondo blu e testo bianco.

Come far funzionare la nostra app su schermi diversi
Per far sì che la tua app abbia un bell’aspetto su tutte le dimensioni dello schermo, possiamo usare il responsive design . Ciò significa usare le query multimediali CSS per cambiare gli stili in base alle dimensioni dello schermo. Ecco un esempio:

from fasthtml import FastHTML, Component

class Button(Component):
def render(self):
return """
Click me!
"""

app = FastHTML()
app.component(Button())

app.add_style("""
@media only screen and (max-width: 768px) {
button {
padding: 5px 10px;
}
}
""")

Questo codice modifica la Button spaziatura del componente quando lo schermo è largo 768 pixel o meno.

Caratteristica	Cosa fa	Esempio
Componenti riutilizzabili	Creiamo parti che possiamo utilizzare più e più volte	Button componente
Stili	Aggiunge CSS per rendere le cose più belle	Sfondo blu per Button
Responsive Disign	Fa sì che la l’ app funzioni su tutte le dimensioni dello schermo	Sostituzione dell’imbottitura per schermi piccoli

Lavorare con dati e API
Come gestire i dati in FastHTML
FastHTML ti consente di lavorare con i dati facilmente. Puoi usare oggetti Python per archiviare e usare i

dati nei tuoi componenti. Ecco un esempio:

from fasthtml import FastHTML, Component

data = {
"name": "John Doe",
"age": 30
}

class UserProfile(Component):
def render(self):
return f"

{data['name']}

Age: {data['age']}"

app = FastHTML()
app.component(UserProfile())

Questo codice memorizza le informazioni dell’utente in un dizionario e le mostra in un componente del profilo utente.

Connessione ad API esterne
Per usare API esterne, puoi usare la requestslibreria in Python. Puoi inviare diversi tipi di richieste (GET, POST, PUT, DELETE) alle API e lavorare con le risposte. Ecco come ottenere dati da un’API JSON:

import requests
from fasthtml import FastHTML, Component

class UserData(Component):
def render(self):
response = requests.get("https://api.example.com/users")
data = response.json()
return "

{user['name']}

"

app = FastHTML()
app.component(UserData())

Questo codice ottiene i dati utente da un’API e mostra un elenco di nomi utente.

Mantenere i dati aggiornati
Per mantenere aggiornati i tuoi dati, puoi usare WebSocket o Webhook. Questi strumenti ti aiutano a ottenere aggiornamenti immediati quando i dati cambiano. Ecco come utilizzare WebSocket con la websocket-client libreria:

import websocket
from fasthtml import FastHTML, Component

class RealtimeData(Component):
def render(self):
ws = websocket.create_connection("ws://example.com/ws")
data = ws.recv()
return f"

{data}"

app = FastHTML()
app.component(RealtimeData())

Questo codice imposta una connessione WebSocket e mostra dati in tempo reale.

Caratteristica	Cosa fa	Esempio
Gestione dati	Utilizza oggetti Python per archiviare e accedere ai dati	Dizionario per informazioni utente
Connessioni API	Invia richieste ad API esterne	requests libreria per dati JSON
Aggiornamenti in tempo reale	Ottiene aggiornamenti immediati tramite WebSocket o Webhook	websocket-client per dati in tempo reale

Rendiamo la nostra app più veloce
Come accelerare il caricamento della pagina

Per caricare più velocemente le pagine in FastHTML:

• Combina file CSS e JavaScript
• Utilizzare sprite immagine
• Utilizzare meno librerie esterne
• Utilizza la memorizzazione nella cache integrata di FastHTML per i dati comuni
• Comprimi le immagini e usa il formato corretto (JPEG per le foto, PNG per la grafica)
• Imposta le dimensioni dell’immagine nel codice

Caricamento del contenuto in base alle necessità
Per caricare i contenuti solo quando servono:

• Utilizzare il caricamento differito per le immagini e i video non visibili immediatamente
• Utilizzare la paginazione per caricare i dati in parti più piccole

Utilizzo della memorizzazione nella cache per migliorare la velocità
La memorizzazione nella cache aiuta a ridurre il carico del server e velocizza il caricamento delle pagine:

• Utilizza la memorizzazione nella cache integrata di FastHTML per i dati comuni
• Prova strumenti di caching esterni come Redis o Memcached

Tecnica	Cosa fa	Come farlo
Combina i file	Riduce le richieste HTTP	Utilizzare uno strumento come Gzip per i file CSS
Utilizzare la memorizzazione nella cache	Memorizza dati comuni	Utilizza la memorizzazione nella cache integrata di FastHTML
Ottimizzare le immagini	Rende il caricamento delle immagini più veloce	Utilizzare uno strumento come ImageOptim
Caricamento lento	Carica il contenuto quando necessario	Carica le immagini fuori dallo schermo in un secondo momento
Paginazione	Carica i dati in parti	Mostra i dati in blocchi più piccoli

Questi suggerimenti ci possono aiutare a far funzionare più velocemente la nostra app FastHTML e a offrire agli utenti un’esperienza migliore.

Test e correzione dei bug
Scrittura di test per app FastHTML
Testare la tua app FastHTML ti aiuta ad assicurarti che funzioni bene e a trovare i problemi in anticipo. Ecco alcuni suggerimenti per dei buoni test:

• Mantieni i test semplici e facili da capire
• Testa separatamente piccole parti della tua app
• Utilizzare gli strumenti di test integrati di FastHTML o altre librerie di test Python

Ecco un semplice test che utilizza gli strumenti di test di FastHTML:

from fasthtml import FastHTMLTest
class TestMyApp(FastHTMLTest):
def test_home_page(self):
response = self.client.get('/')
self.assertEqual(response.status_code, 200)
self.assertTemplateUsed('home.html')

Testare il funzionamento delle parti insieme
Dopo aver testato piccole parti, controlla come funzionano insieme. Questo è chiamato test di integrazione. Ecco alcuni suggerimenti:

• Testa il modo in cui gli utenti interagiscono con la tua app
• Controlla se la tua app comunica correttamente con altri servizi
• Utilizzare strumenti come Selenium o Playwright per testare situazioni complesse

Ecco un esempio con Selenium:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()
driver.get('http://localhost:8000')

Test login

username_input = driver.find_element(By.NAME, 'username')
password_input = driver.find_element(By.NAME, 'password')
login_button = driver.find_element(By.NAME, 'login')

username_input.send_keys('testuser')
password_input.send_keys('testpassword')
login_button.click()

Wait for login to finish

WebDriverWait(driver, 10).until(
EC.title_contains('Dashboard')
)

driver.quit()

Strumenti per trovare e risolvere i problemi
Ecco alcuni strumenti utili per individuare e risolvere i problemi nella tua app FastHTML:

Debugger – aiuta a guardare il tuo codice passo dopo passo – PDB, debugger PyCharm
Registrazione – Tieni traccia di ciò che accade nell’ app – Registrazione integrata di FastHTML, Loggly, Splunk
Monitoraggio degli errori- Troviamo e correggiamo gli errori nella nostra app – Selenium , Rollbar

Ecco come utilizzare PDB per trovare un problema:

import pdb

def my_view(request):
# Code that's causing a problem
pdb.set_trace()
return HttpResponse('Hello, world!')

Utilizzando questi strumenti e suggerimenti possiamo migliorare il funzionamento della nostra app FastHTML e offrire agli utenti un’esperienza ottimale.

Avvio dell’app FastHTML
Passaggi prima di andare online
Prima di avviare l’app FastHTML, procedi nel seguente modo:

• Esegui test approfonditi : controlla la tua app su diversi dispositivi, browser e sistemi operativi per individuare eventuali bug.
• Rendilo più veloce : usa gli strumenti di FastHTML per individuare le parti lente e velocizzarle.
• Mantieni la sicurezza : aggiungi sistemi di accesso e crittografa i dati per proteggere gli utenti.
• Imposta il monitoraggio : utilizza strumenti per monitorare il funzionamento della tua app e cosa fanno gli utenti.

Dove hostare la nostra app
Possiamo ospitare la tua app FastHTML in diversi luoghi:

Opzioni di hosting
Server di FastHTML – Buono per i test, non per l’uso reale
Python – ovunque Posto online dove mettere le app Python
Heroku- Piattaforma online facile da usare con opzione gratuita
AWS – servizio online con molti strumenti
Digital Ocean – Hosting online economico per app Python

Controllo delle prestazioni dell’app
Una volta pubblicata la nostra app, teniamo d’occhio il suo rendimento:

• Tempi di caricamento delle pagine : scopri la velocità con cui si aprono le pagine utilizzando strumenti come Google PageSpeed .
• Velocità del server : controlla la velocità con cui la tua app risponde alle richieste degli utenti.
• Errori : cerca i problemi che potrebbero rallentare la tua app o infastidire gli utenti.
• Comportamento dell’utente : scopri come le persone usano la tua app e cosa gli piace o non gli piace.

Cosa controllare	Perché è importante
Tempi di caricamento della pagina	Mostra se la nostra app è abbastanza veloce
Velocità del server	ci dice se la nostra app può gestire molti utenti
Errori	ci aiuta a trovare e risolvere i problemi
Comportamento dell’utente	Mostra quali parti dell’ app necessitano di lavoro

Tecniche avanzate FastHTML
Rendering delle pagine sul server
FastHTML ti consente di creare pagine sul server, il che può rendere la tua app più veloce e facile da usare. Questo è chiamato Server-Side Rendering (SSR). Per usare SSR in FastHTML, crei una funzione speciale che restituisce l’HTML per una pagina. Questa funzione è chiamata “funzione di visualizzazione”. Ecco una semplice funzione di visualizzazione:

from fasthtml import FastHTML

app = FastHTML()

@app.view("/hello")
def hello_world():
return "

Hello, World!

"

Questa hello_worldfunzione restituisce una semplice stringa HTML che dice “Hello, World!”. Quando qualcuno va sulla /hellopagina, FastHTML usa questa funzione e invia l’HTML al browser web dell’utente.

Creazione di strumenti personalizzati
Puoi creare i tuoi strumenti in FastHTML da usare nell’ app. Questi strumenti possono fare cose come controllare i dati, gestire gli accessi degli utenti e altro ancora. Per creare uno strumento personalizzato, crea una classe che usa FastHTML.Tool. Ecco uno strumento che controlla se un indirizzo email sembra corretto:

from fasthtml import FastHTML, Tool

app = FastHTML()

class EmailChecker(Tool):
def check(self, email):
if "@" not in email:
return False
return True

app.tools["email_checker"] = EmailChecker()

Questa EmailChecker classe ha un check metodo che cerca una “@” nell’email. Possiamo usare questo strumento nella tua app scrivendo app.tools[“email_checker”].check(email).

Utilizzo di FastHTML con altre librerie Python
Possiamousare FastHTML con altre librerie Python per aggiungere più funzionalità alla tua app. Ad esempio, puoi usare la requestslibreria per ottenere dati da altri siti web. Ecco come utilizzare la

requests libreria con FastHTML:
from fasthtml import FastHTML
import requests

app = FastHTML()

@app.view("/api/data")
def get_api_data():
response = requests.get("https://api.example.com/data")
data = response.json()
return data

Questa get_api_data funzione ottiene dati da un altro sito web usando la requests libreria. Quindi restituisce i dati come JSON.

Rendering lato server – Crea pagine sul server – Visualizza la funzione per la pagina “/hello”
Strumenti personalizzati – Ti consente di creare i tuoi strumenti- Controllo indirizzo email
Utilizzo di altre librerie – Aggiunge più funzionalità alla tua app – Ottenere dati da altri siti web

Queste tecniche avanzate possono aiutarti a realizzare app FastHTML migliori, che offrono maggiori prestazioni e lavorano più velocemente.

Comunità e risorse FastHTML
Componenti aggiuntivi utili per FastHTML
FastHTML ha componenti aggiuntivi che possono migliorare l’ app. Eccone alcuni utili:

Estensioni FastHTML – Fornisce parti pronte per attività comuni come gli accessi degli utenti
Interfaccia utente FastHTML – Fornisce pulsanti, moduli e tabelle predefiniti per l’aspetto della tua app
DB HTML veloce – Ti aiuta a lavorare con database come SQLite e PostgreSQL

Per usare un componente aggiuntivo, installalo con pip. Ad esempio:

pip install fasthtml-extensions

Dopo l’installazione, possiamo utilizzare il componente aggiuntivo nella tua app FastHTML.

Dove trovare aiuto
Se abbiamo bisogno di aiuto con FastHTML, prova questi:

Documentazione FastHTML – Spiega tutto su FastHTML
Forum della comunità FastHTML -Fai domande e ricevi aiuto da altri utenti
Repository GitHub FastHTML – Segnala bug o chiedi nuove funzionalità

Come contribuire a migliorare FastHTML
Puoi contribuire a migliorare FastHTML:

Segnala bug – Informa gli sviluppatori dei problemi che riscontri
Correggi bug o aggiungi funzionalità – Apportare modifiche e inviarle agli sviluppatori
Unisciti alla comunità – Parla con altri utenti e fornisci feedback

Quando utilizzare FastHTML
Ecco quando potresti voler utilizzare FastHTML:
Quando usare Perché
Progetti di piccole e medie dimensioni – FastHTML è adatto per progetti più piccoli o per testare idee
Costruzione rapida – FastHTML è semplice e facile da modificare, così puoi creare cose velocemente
Fan di Python – Se preferisci usare solo Python, FastHTML è una buona scelta

Imparare a costruire siti web FastHTML è semplice e facile da usare, quindi è ottimo per imparare Ma se stai lavorando su un’app grande e complessa o hai bisogno di un framework con molte funzionalità integrate, potresti prendere in considerazione Django o Pyramid.

Cosa c’è in serbo per FastHTML
Funzionalità in arrivo

Il team di FastHTML sta lavorando a nuove funzionalità per migliorare il framework:
WebSocket migliori : ciò aiuterà a creare app che si aggiornano in tempo reale.
Ulteriori funzionalità di sicurezza : il team sta aggiungendo modalità per controllare l’input degli utenti e bloccare gli attacchi web più comuni.
Supporto per numerose lingue : ciò renderà più semplice la creazione di app utilizzabili da persone in tutto il mondo.

Come FastHTML potrebbe cambiare lo sviluppo web Python
FastHTML potrebbe cambiare il modo in cui le persone creano siti web con Python. Ecco come:

App più semplici – Gli sviluppatori potrebbero concentrarsi sulla creazione di app piccole e veloci anziché su quelle grandi e complesse.
Più persone usano Python – La semplicità d’uso di FastHTML potrebbe indurre più persone a scegliere Python per la creazione di siti web.
Nuovi lavori per programmatori Python – Con la crescita di FastHTML, i programmatori Python potrebbero avere maggiori possibilità di lavorare su grandi progetti web.FastHTML mantiene le cose semplici, facili da modificare e veloci. Ciò potrebbe fare una grande differenza nel modo in cui le persone creano siti Web con Python. Man mano che più persone usano FastHTML, i programmatori Python potrebbero trovare nuovi modi per usare le loro competenze.

Conclusioni
Punti principali da ricordare
FastHTML è un framework web che ti consente di creare app web usando solo Python. Ecco le cose fondamentali da sapere:

• È facile da imparare e da usare, anche per i nuovi sviluppatori web
• Ha un modo semplice per creare app web, ottimo per progetti rapidi
• Puoi modificarlo per adattarlo a ciò di cui hai bisogno
• Funziona bene per i siti web molto frequentati
• Ha un gruppo di utenti in crescita e molto aiuto disponibile

Considerazioni finali su FastHTML
FastHTML è una nuova opzione per gli sviluppatori web Python. È facile da usare, funziona bene e puoi modificarlo per adattarlo alle tue esigenze. È adatto sia agli sviluppatori esperti che ai principianti. Man mano che più persone usano FastHTML, probabilmente migliorerà. Le persone che lo creano ascoltano ciò che vogliono gli utenti, quindi dovrebbe continuare a migliorare. Perché non provi FastHTML? È facile iniziare con esso e puoi creare rapidamente applicazioni web usando solo Python.

Cosa offre FastHTML Perché è buono
Facile da imparare Semplice da usare, ottimo per progetti rapidi
Può essere cambiato Adatto a ciò di cui hai bisogno
Funziona bene Adatto per siti web molto frequentati
Gruppo di utenti in crescita Un sacco di aiuto disponibile

Domande frequenti
Che cos’è FastHTML?
E’ un nuovo framework web per la creazione di app web tramite Python. Ecco cosa devi sapere:
Caratteristica Descrizione
Scopo Crea app web grandi e veloci con meno codice
Usi ASGI e HTMX per prestazioni migliori
Distribuzione Funziona con Vercel CLI o git pushFastHTML ti aiuta a:
Crea rapidamente app web
Usa meno codice
Crea app che funzionino bene per molti utenti
Puoi mettere la tua app online usando Vercel CLI o spingendo il tuo codice su git. Questo semplifica la condivisione della tua app con altri.

(fonte)

Innovaformazione, scuola informatica specialistica promuove la cultura IT e delle nuove tecnologie.

Trovate l’offerta formativa per aziende sul nostro sito QUI.

INFO: info@innovaformazione.net – tel- 3471012275 (Dario Carrassi)