Per spiegare semplicemente il funzionamento di LiveView, partiamo da uno scenario comune.
Immaginiamo di avere una applicazione Phoenix, e in questa pagina c'è un pulsante. Cliccando su questo pulsante, viene cambiato uno stato sul server, e una nuova pagina HTML viene inviata dal server, e poi l'intera pagina viene ricaricata, anche se solo una parte di essa è cambiata.
Questo non è certo ideale. Il click su di un pulsante dovrebbe causare l'aggiornamento soltanto delle parti della pagina interessate. Questo risulterebbe più interattivo.
Per ottenere questo, un approccio possibile è quello di utilizzare del codice AJAX. Per farlo, sarebbe necessario scrivere del codice JavaScript nel front end, che sia JavaScript puro, o una libreria o framework Javascript lato client, come React, Vue o Angular. Poi dovremmo scrivere del codice Elixir nel back end. Facendo cosí, quando il pulsante viene cliccato, il nostro JavaScript invierebbe una richiesta Javascript asincrona, o AJAX, al server. Avremmo una route e un'azione nel controller creata per gestire la richiesta, e il server invierebbe dei dati JSON in risposta. A questo punto il nostro JavaScript aggiornerebbe dinamicamente le parti del DOM interessate dai cambiamenti.
Un altro approccio è quello di evitare il ciclo di richieste-risposte HTTP lasciando che client e server comunichino tramite una connessione WebSocket persistente.
Per fare questo, dovremmo impostare un canale Phoenix, e il nostro JavaScript si unirebbe a questo canale. Quando il pulsante viene cliccato, il nostro JavaScript invierebbe un evento attraverso il WebSocket al processo canale del server. Gestirebbe quell'evento, cambierebbe lo stato del processo, e invierebbe indietro dati JSON al client attraverso il WebSocket. E come con AJAX, il nostro JavaScript aggiornerebbe dinamicamente il DOM.
Tutti e due gli approcci renderebbero la pagina piú interattiva, ma dovremmo comunque scrivere del JavaScript lato client per gestire gli eventi del DOM, quali il clik del pulsante, la comunicazione tramite WebSocket e l'aggiornamento del client. Toccherebba a noi mantenere il client sincronizzato col server.
E se ci fosse un modo per evitare di scrivere del codice JavaScript, mantenere la connessione persistente tra client e server, e far sí che il client si aggiorni automaticamente a seconda dei cambiamenti che avvengono sul server, o addirittura aggiornare vari client allo stesso tempo?
Questo è ció che LiveView ci permette di fare.
Si tratta di una libreria che ci permette di astrarre tutti i dettagli, in modo da poterci concentrare sull'aggiungere funzionalit' interattive in tempo reale alla nostra app.
Ovviamente è necessario che del JavaScript venga eseguito nel browser, ma non dobbiamo scrivere noi questo javascript, ci pensa LiveView.
Se la nostra pagina utilizza Liveview, e viene cliccato il pulsante, questa piccola parte di Javascript scritta da liveview invia un evento attraverso il websocket verso un processo LiveView. Questo evento viene gestito, lo sdtato del processo viene cambiato e viene fornita una nuova view.
Mentre altre tecnologie che vengono eseguite lato server spesso mandano l'intera pagina dopo ogni evento del client, LiveView sa esattamente che cosa è cambiato, e invia solo i cambiamenti rilevanti alla pagina. Il JavaScript di LiveView unisce poi questi aggiornamenti nel DOM.
Cosí, quando il processo LiveView riceve nuovi eventi dal client, tutto viene automaticamente sincronizzato senza dover scrivere alcun Javascript.
Quindi, invece di scrivere Javascript lato client, scriviamo Elixir lato server.
Una LiveView è un modulo con tre funzioni callback:
Essendo le Liveview rese lato server, la richiesta iniziale è una normale richiesta HTTP, quindi il client riceve una veloce risposta iniziale in HTML statico, che ha il valore aggiunto di essere SEO friendly senza il bisogno di difficoltà aggiuntive.
LiveView utilizza una connessione websocket persistente dopo la richiesta iniziale, quindi i cambiamenti sul server possono essere inviati anche a molteplici client. Questo è molto importante per costruire applicazioni distribuite in tempo reale. E possiamo avere tutto questo senza il bisogno di intervenire sul client.