Indice articolo

Ketchup non è una semplice libreria di componenti grafici; è speciale e può essere utilizzata per potenziare e rivoluzionare qualsiasi applicazione web. vediamo come.

Showcase: https://ketchup.smeup.com/ketchup-showcase
Progetto : https://github.com/smeup/ketchup

Partendo dall’aspetto tecnico, Ketchup, è una libreria open source di Web Components.

Già questo dice molto; essere open source significa poter dare accesso alla community per il miglioramento della libreria stessa e, soprattutto, dare la possibilità a chiunque di poterla utilizzare in modo semplice e veloce.

Dal punto di vista tecnologico, un Web Component, viene tradotto in un tag HTML puro. Questo significa che il browser è in grado di leggerlo e renderizzarlo senza l’ausilio di nessun motore esterno.

Questo porta a tanti vantaggi, il principale è che la libreria Ketchup, essendo gli Web Components uno standard web, può essere usata con qualsiasi tecnologia web, dai framework a vanilla javascript, non c’è limite di compatibilità.

Esempio di tag HTML di un Web Component Ketchup:

<kup-data-table></kup-data-table>

Ketchup può quindi essere considerata una libreria a prova di futuro, o perlomeno LTS (Long Time Support).
Nel corso degli anni possiamo pensare di aggiornare la tecnologia del nostro frontend più volte, sempre interfacciandoci con Ketchup e senza mai toccare la sua parte di logica.
Tutto questo è possibile perché quello che viene generato dai componenti Ketchup è codice HTML puro.

Customizzazione dei componenti

Altro aspetto che caratterizza Ketchup è la sua flessibilità, che si traduce in un’ampia possibilità di customizzazione; è possibile modificare con semplicità tutta la parte grafica e funzionale del componente e settare facilmente temi predefiniti o custom. Tutte le informazioni a riguardo sono presenti nello showcase.

Struttura dei componenti

Un ultimo aspetto tecnico che voglio sottolineare è la struttura JSON dei componenti, questo vedremo che è un punto fondamentale per rilasciare la completa potenza della libreria.
Ogni componente è strutturato attraverso un JSON e diversi componenti hanno JSON simile o comunque compatibile.
Questo significa che si può pensare di separare la logica di struttura dati da quella grafica, dando la possibilità di poter, per esempio, cambiare tipologia di componente da renderizzare indipendentemente dai suoi dati.

Ketchup Magic Box – Con la stessa struttura JSON è possibile renderizzare più tipologie di componenti

Ricchezze Funzionali

Proseguendo nelle caratteristiche che differenziano Ketchup da tutte le altre librerie presenti in rete, vorrei parlare di quella che ho definito come “ricchezza funzionale” della libreria, ovvero tutte quelle funzioni che Ketchup mette a disposizione dell’utente.
Nonostante alcune di queste funzioni siano decisamente avanzate, possono anche non essere considerate come novità assolute in ambito frontend, ma il vantaggio di Ketchup è che, oltre ad integrarle, le rende disponibili direttamente out of the box, senza dover configurare, o addirittura comprare, nulla.

Tutte le funzioni sono facilmente consultabili direttamente nello showcase, ma vorrei sottolinearne un paio prima di proseguire con le varie caratteristiche della libreria.

La prima funzionalità che vorrei segnalare è il kup manager, un gestore di operazioni avanzate richiamabile facilmente ovunque dall’applicazione che integra Ketchup.
Attraverso il kup manager è possibile settare la lingue e le traduzioni, gestire e attivare il debug, registrare elementi per lo scroll on hover, e tante altre funzionalità avanzate.

kupManager.language.set('es');

kupManager.debug.toggle(true);

Una seconda caratteristica da sottolineare in questo ambito è la completezza funzionale di ogni componente Ketchup.

Come esempio esplicativo, mi focalizzerei esclusivamente sulla data table Ketchup, un componente molto potente e flessibile.

Data Table Ketchup – Panoramica delle funzionalità principali

Per tutte le funzioni rimando, anche qui, allo showcase, ma vorrei sottolineare l’intelligenza della data table che automaticamente riconosce il tipo dato ed è in grado di aiutare l’utente nell’editabilità delle celle e nel filtro di colonna.

L’esempio in figura mostra infatti un filtro su una colonna di tipo “data” che viene gestito automaticamente attraverso dei date picker, al fine di aiutare l’utente nella digitazione del contenuto.

Altre funzionalità avanzate presenti nella data table Ketchup sono le cosiddette trasformazioni sui dati, per esempio è possibile trasformare una data table nella sua rispettiva tabella dei totali, oppure trasporre i dati cambiando colonne con righe.
Queste trasformazioni possono essere eseguite sia da default che programmaticamente.

Oggetto Applicativo

Siamo arrivati al punto focale di questo articolo; Ketchup, a differenza di tutte le altre librerie presenti sul mercato, ha previsto che un certo campo tu possa tipizzarlo come vuoi. Un vero e proprio Custom Type.

"columns": [
  {
    "name": "COL01",
    "title": "Active Project",
    "business object": {
      "type": "project"
    }
  },
  {
    "name": "COL02",
    "title": "Customer",
    "business object": {
      "type": "customer"
    }
  }

Attraverso un evento è possibile mandare questa informazione al backend, permettendogli di ragionare in base a questo concetto.

“customEvent”: {
  “type”: "kup-box-click",
  “target”: “kup-box”,
  “srcElement”: “kup-box”,
  “detail”: {
    “id”: “BOX01”,
    “index”: 1,
    “business object”: {
      “type”: “city”
    }
  }
}

Questo Custom Type, noi di Smeup lo chiamiamo Oggetto Applicativo.

Prima di proseguire c’è bisogno di un paio di precisazioni.
La prima è che il Custom Type è assolutamente facoltativo in Ketchup, la maggior parte delle funzioni che abbiamo visto fino ad ora restano del tutto utilizzabili.
La seconda è che il concetto di oggetto applicativo non è una prerogativa di Smeup, tutte le applicazioni hanno un concetto analogo.

Questa è la caratteristica che più di tutte rende Ketchup così speciale; la possibilità di arricchire il componente con un’informazione applicativa.
Questo trasforma il componente grafico in un componente applicativo.

Facciamo una breve panoramica sugli oggetti; che cos’è un oggetto applicativo?
Semplicemente potremmo definirlo come un’entità composta da attributi che, a loro volta, possono essere altri oggetti applicativi.

Un esempio concreto

Oltre ad avere già intuito la potenza di tutto ciò, è il mix con la naturalezza delle interazioni tra oggetti che rende il tutto estremamente speciale.
Per esempio è possibile sfruttare queste interazioni per arricchire la nostra applicazione e poter fare delle operazioni che sarebbero troppo complesse da fare senza tutti questi concetti.

vogliamo visualizzare i collaboratori con il responsabile nato in provincia di BG o BS

Se non avessimo Ketchup e la sua gestione degli oggetti applicativi, come potremmo risolvere questa query lato frontend?

L’unico modo sarebbe quello di programmare e cablare le informazioni che ci servono in una tabella.

Grazie invece a quanto abbiamo appreso fino ad adesso, possiamo gestire eventi che interrogano gli oggetti applicativi del nostro componente e fare operazioni, di conseguenza, sui loro attributi.

Collaboratori con il responsabile nato in provincia di BG o BS

Al collaboratore chiediamo il suo responsabile, al responsabile chiediamo la sua provincia di nascita e infine filtriamo sul contenuto.

Questo è solo un esempio che mostra la potenza di utilizzare Ketchup rispetto ad un’altra libreria agnostica al concetto di oggetto applicativo.
Interrogando il backend attraverso eventi che integrano l’oggetto applicativo è possibile aggiungere features come questa alla nostra applicazione e il tutto in modo sia potente che semplice, il limite è solo l’immaginazione.

10 secondi per risolvere un filtro che sarebbe stato impossibile da fare se non avessimo avuto Ketchup e la gestione attraverso oggetti applicativi.

Per questo Ketchup è così speciale e rivoluzionario.

Per vedere la registrazione dello speech di questo intervento, CLICCA QUI.