La riscrittura del pulsante "like" di significatocanzone.it con stimulus.js
Ho deciso di riscrivere il codice che gestisce il pulsante like di significato canzone.
Per quale motivo?
- Prestazioni.
L'attuale applicativo significatocanzone.it (scritto con Ruby On Rails) ha un collo di bottiglia a livello performativo.
Tale collo riguarda il complesso rendering delle pagine.
Spesso i problemi di velocità di Rails riguardano infatti quasi esclusivamente ActionView (almeno per quanto riguarda siti con meno di 20.000 views giornaliere e che operano con normali richieste html).
Nel mio ambiente di sviluppo la canzone Preghiera in Gennaio di De Andrè ha un rendering time di 500ms.
Vorrei abbassare i tempi al di sotto di una media di 200ms.
Sono ben conscio che il tempo del server è poca cosa è che sia importante anche considerare il tempo lato client.
Ma da qualcosa bisogna iniziare :)
Vorrei quindi poter testare la soluzione raccomandata dalla guida ufficiale di Rails e da DHH stesso: il Russian Doll Caching.
Ho già sperimentato molte volte concretamente la sua efficacia in termini performativi.
Tale tecnica genera l'html lato server e poi decora il risultato attraverso l'uso di js quando necessario.
Purtroppo il codice di significato canzone è parecchio vecchio e anche parecchio complesso nella sua apparente semplicità.
Per poter seguire le raccomdanzioni della linea ufficiale di Rails ho quindi come prima operazione introdotto l'uso della libreria local-time.
Dopo aver installato la gemma e la libreria js (tramite webpacker che ormai uso sempre di più) mi sono dovuto occupare a mano della internalizzazione.
Di seguito lo snippet di codice utilizzato:
import LocalTime from "local-time"
LocalTime.config.i18n["it"] = { date: { dayNames: ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"], abbrDayNames: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"], monthNames: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"], abbrMonthNames: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"], yesterday: "ieri", today: "oggi", tomorrow: "domani", on: "il {date}", formats: { "default": "%e %b, %Y", thisYear: "%e %b" } }, time: { am: "am", pm: "pm", singular: "a {time}", singularAn: "an {time}", elapsed: "{time} fa", second: "secondo", seconds: "secondi", minute: "minuto", minutes: "minuti", hour: "ora", hours: "ore", formats: { "default": "%l:%M%P" } }, datetime: { at: "{date} alle {time}", formats: { default: "%B %e, %Y alle %l:%M%P %Z" } } };
LocalTime.config.locale = "it"
document.addEventListener('DOMContentLoaded', () => { LocalTime.start() })