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