Blog Rubynetti

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() })

Chi siamo?

Rubynetti è una squadra di designer, sviluppatori e programmatori specializzata in applicazioni web. Il nostro focus è portare valore e automazione nei processi umani e aziendali attraverso l'uso delle tecnologie del web.

Operiamo da più di 20 anni nel settore e siamo specializzati su Vue.js, Nuxt, Rails e React.

Lavoriamo per lo più da Venezia centro storico.

Contatti

Se hai bisogno di una mano per portare avanti o creare dal nulla un progetto digitale siamo a disposizione.