{"id":33073,"date":"2025-05-28T10:00:00","date_gmt":"2025-05-28T08:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=33073"},"modified":"2025-05-22T11:56:57","modified_gmt":"2025-05-22T09:56:57","slug":"vanillacreamjs-javascript-con-i-superpoteri","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/","title":{"rendered":"VanillaCreamJS: JavaScript con i superpoteri"},"content":{"rendered":"\n<p><strong>VanillaCreamJS <\/strong>\u00e8 una libreria JavaScript che permette letteralmente di aggiungere &#8220;super poteri&#8221; al JavaScript nativo, rendendo possibili operazioni potenti e moderne, come la <strong>reattivit\u00e0<\/strong>, senza la necessit\u00e0 di implementare build-tool e build-step.\u00a0<\/p>\n\n\n\n<p>\u00c8 una tecnologia unica nel suo genere, perch\u00e9:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Consente di &#8220;donare&#8221; la reattivit\u00e0 al Vanilla JavaScript<\/li>\n\n\n\n<li>Lavora con performance straordinarie, essendo privo di algoritmi di diffing e ricalcolo<\/li>\n\n\n\n<li>Fornisce strumenti potenti, ma senza API complesse<\/li>\n\n\n\n<li>Permette di incrementare le proprie skills relative al JavaScript puro<\/li>\n\n\n\n<li>Permette di affiancare qualsiasi tecnologia back-end, e quindi di essere integrato in ogni stack di sviluppo<\/li>\n\n\n\n<li>Incrementa la produttivit\u00e0 degli sviluppatori rispetto al Vanilla JavaScript e ai framework tradizionali nei progetti di piccole e medie dimensioni<\/li>\n\n\n\n<li>Combina le migliori potenzialit\u00e0 di strumenti come HTMX, Vue e Alpine<\/li>\n<\/ul>\n\n\n\n<p>Il suo nome indica proprio il suo obiettivo: raffinare il Vanilla <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/evitare-la-duplicazione-del-codice-sfruttando-le-high-order-function-in-javascript\/\">JavaScript <\/a>e portarlo ad un livello \u00e8litario, ma senza allontanarsi da esso.<\/p>\n\n\n\n<p>VanillaCream \u00e8 realizzato e mantenuto da <strong><a href=\"https:\/\/www.riccardodegni.com\/projects\/vanillacreamjs\">Riccardo Degni<\/a><\/strong>, senior web developer italiano.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uperpoteri-e-operazioni-dom\">$uperpoteri e operazioni DOM<\/h2>\n\n\n\n<p>Il nucleo di VanillaCream passa dalla funzione $, che a prima vista potrebbe sembrare la vecchia funzionalit\u00e0 di jQuery, ma in realt\u00e0 offre un universo estremamente differente e moderno di potenzialit\u00e0.<\/p>\n\n\n\n<p>Questa funzione restituisce un elemento o un set di elementi dotati di super poteri, e permette di agganciare uno stato reattivo:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"el\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">const<\/span> &#91;el, s] = $(<span class=\"hljs-string\">'#el'<\/span>, {<span class=\"hljs-attr\">counter<\/span>: <span class=\"hljs-number\">10<\/span>})\n    el.text = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> s.counter\n    el.onClick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> s.counter++)\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Qui vediamo come $, restituisca un elemento, identificato dalla variabile el (il nome \u00e8 a libera scelta) e un oggetto reattivo, collegato all&#8217;elemento.<\/p>\n\n\n\n<p>Ogni elemento prodotto con $ ha a disposizione le seguenti propriet\u00e0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>text: permette di impostare un valore testuale per il contenuto<\/li>\n\n\n\n<li>html: permette di impostare un valore HTML per il contenuto<\/li>\n\n\n\n<li>class: permette di impostare classi CSS\u00a0<\/li>\n\n\n\n<li>on: permette di impostare eventi (anche con la forma on[Event])<\/li>\n\n\n\n<li>attr: permette di impostare attributi HTML<\/li>\n\n\n\n<li>data: permette di impostare attributi data-<\/li>\n<\/ul>\n\n\n\n<p>Quando a una di queste propriet\u00e0 viene assegnata una funzione, la caratteristica dell&#8217;elemento o del set di elementi a cui puntano diventa reattiva.<\/p>\n\n\n\n<p>Infatti, nell&#8217;esempio precedente, quando clicchiamo sul div con id &#8220;el&#8221; incrementiamo il valore di counter nell&#8217;oggetto s, modificando automaticamente il textContent dell&#8217;elemento stesso.<\/p>\n\n\n\n<p>Ad esempio, per effettuare un &#8220;toggle&#8221; di una classe, basta scrivere:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"el\"<\/span>&gt;<\/span>box<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">const<\/span> &#91;el, s] = $(<span class=\"hljs-string\">'#el'<\/span>, {<span class=\"hljs-attr\">hl<\/span>: <span class=\"hljs-literal\">true<\/span>})\n    el.class.highlighted = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> s.hl\n    el.on.click(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> s.hl = !s.hl)\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In questo caso, all&#8217;elemento con id &#8220;el&#8221; viene impostata la classe CSS highlighted, dato che il valore di s.hl \u00e8 true.<\/p>\n\n\n\n<p>Al click sull&#8217;elemento variamo il valore booleano del valore di stato assegnato a class, attivando o disattivando di conseguenza la classe CSS sull&#8217;elemento in modo reattivo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-reattivita-di-massa\">Reattivit\u00e0 di massa<\/h2>\n\n\n\n<p>Possiamo anche usare il metodo set per impostare infinite caratteristiche reattive in un solo colpo:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">el<\/span><span class=\"hljs-selector-class\">.css<\/span><span class=\"hljs-selector-class\">.set<\/span>({\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-string\">'blue'<\/span>,\n    backgroundColor = () =&gt; state.bg,\n    width = () =&gt; state.x + <span class=\"hljs-string\">'px'<\/span>\n})  \n\n<span class=\"hljs-selector-tag\">el<\/span><span class=\"hljs-selector-class\">.class<\/span><span class=\"hljs-selector-class\">.set<\/span>({\n    <span class=\"hljs-attribute\">active<\/span>: () =&gt; state.active,\n    box: () =&gt; state.counter &gt;= <span class=\"hljs-number\">10<\/span>,\n    otherClass: () =&gt; state.active &amp;&amp; state.counter &gt;= <span class=\"hljs-number\">10<\/span>\n})  \n\n<span class=\"hljs-selector-tag\">el<\/span><span class=\"hljs-selector-class\">.attr<\/span><span class=\"hljs-selector-class\">.set<\/span>({\n    <span class=\"hljs-attribute\">title<\/span>: () =&gt; `Title: ${state.title}`\n})\n\n<span class=\"hljs-selector-tag\">el<\/span><span class=\"hljs-selector-class\">.data<\/span><span class=\"hljs-selector-class\">.set<\/span>({\n    <span class=\"hljs-attribute\">x<\/span>: () =&gt; state.x * <span class=\"hljs-number\">10<\/span>\n})<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-reattivita-profonda\">Reattivit\u00e0 profonda<\/h2>\n\n\n\n<p>Il sistema di reattivit\u00e0 di VanillaCream \u00e8 tra i pi\u00f9 potenti e flessibili in assoluto: permette di monitorare valori primitivi ma anche valori reference come array, oggetti e matrici. Possiamo infatti azionare la reattivit\u00e0 semplicemente variando il valore di una propriet\u00e0 di un oggetto o di un elemento di un array, oppure usando metodi di mutazione come push, pop, slice e cosi via!<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"box\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    Insert fruit: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"fruit\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>Add Fruit<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">const<\/span> {box, fruit, btn, state} = $.refs(<span class=\"hljs-string\">'#app'<\/span>, {<span class=\"hljs-attr\">fruits<\/span>: &#91;<span class=\"hljs-string\">'apple'<\/span>, <span class=\"hljs-string\">'pear'<\/span>, <span class=\"hljs-string\">'kiwi'<\/span>]})\n\n    box.text = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">'Fruits: '<\/span> + state.fruits.join(<span class=\"hljs-string\">', '<\/span>)\n\n    btn.onClick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n       state.fruits.push( fruit.attr.value )\n       fruit.attr.value = <span class=\"hljs-string\">''<\/span>\n    })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In questo esempio, il valore del div con ref box riflette gli elementi dell&#8217;array di stato concatenati da virgole. Cliccando sul pulsante btn possiamo aggiungere all&#8217;array di stato, semplicemente con push, il valore del campo di input fruit.<\/p>\n\n\n\n<p>Nessun hook da utilizzare, nessuna API complessa, solo puro Vanilla JavaScript!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-riferimenti\">Riferimenti<\/h2>\n\n\n\n<p>Il grande potere di VanillaCream deriva dalla funzione $.refs, che prende in considerazione un elemento radice e produce variabili dotate di super-poteri (sono istanze prodotte internamente con $) che hanno lo stesso nome dei valori degli attributi ref nel template HTML:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"el\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>Update state<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">const<\/span> {el, btn, state} = $.refs(<span class=\"hljs-string\">'app'<\/span>, {<span class=\"hljs-attr\">counter<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">bg<\/span>: <span class=\"hljs-string\">'lightblue'<\/span>, <span class=\"hljs-attr\">boxClass<\/span>: <span class=\"hljs-literal\">false<\/span>})\n\n    el.html = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">`Counter: <span class=\"hljs-subst\">${state.counter}<\/span>`<\/span>\n    el.css.backgroundColor = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> state.bg\n    el.class.box = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> state.boxClass\n\n    btn.onClick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        state.counter++\n        <span class=\"hljs-keyword\">if<\/span>(state.bg != <span class=\"hljs-string\">'lightgreen'<\/span>) state.bg = <span class=\"hljs-string\">'lightgreen'<\/span>\n        state.boxClass = !state.boxClass\n    })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In questo caso:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>la variabile el si riferisce all&#8217;elemento con ref &#8220;el&#8221;<\/li>\n\n\n\n<li>la variabile btn si riferisce all&#8217;elemento con ref &#8220;btn&#8221;<\/li>\n\n\n\n<li>la variabile state \u00e8 l&#8217;oggetto reattivo di questa istanza di lavoro<\/li>\n\n\n\n<li>el avr\u00e0 un testo che riflette reattivamente il contenuto di state.counter<\/li>\n\n\n\n<li>el avr\u00e0 un background-color che riflette nativamente il valore di state.bg<\/li>\n\n\n\n<li>el avr\u00e0 la classe CSS chiamata box impostata se state.boxClass \u00e8 true<\/li>\n\n\n\n<li>al click sul pulsante btn, counter incrementa, bg assume il valore lightgreen e boxClass cambia il suo valore. Questi settings alterano reattivamente le caratterisitche di el<\/li>\n<\/ul>\n\n\n\n<p>Possiamo anche usare namespace nei riferimenti, per ridurre il numero di variabili destrutturate da $.refs e raggrupparle logicamente, ad esempio:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn.AZ\"<\/span>&gt;<\/span>Sort A-Z<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn.ZA\"<\/span>&gt;<\/span>Sort Z-A<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn.Random\"<\/span>&gt;<\/span>Randomize<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"el\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">const<\/span> { el, btn, state } = $.refs(<span class=\"hljs-string\">'#app'<\/span>, {...});\n    <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-reattivia-dal-template-html\">Reattivi\u00e0 dal template HTML<\/h2>\n\n\n\n<p>VanillaCream permette di aggiornare lo stato direttamente dal template HTML, attraverso gli attributi x- che permettono di targetizzare le relative propriet\u00e0 che abbiamo analizzato:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">x-text<\/span>=<span class=\"hljs-string\">\"`Counter: ${state.counter}`\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">x-event.click<\/span>=<span class=\"hljs-string\">\"() =&gt; state.counter++\"<\/span>&gt;<\/span>Increase counter<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">x-if<\/span>=<span class=\"hljs-string\">\"state.counter === 10\"<\/span>&gt;<\/span>Counter is 10!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">const<\/span> {state} = $.refs(<span class=\"hljs-string\">'#app'<\/span>, {<span class=\"hljs-attr\">counter<\/span>: <span class=\"hljs-number\">0<\/span>})\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In questo esempio, all&#8217;interno di #app:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>il contenuto del primo div riflette reattivamente il valore di counter<\/li>\n\n\n\n<li>cliccando sul pulsante si incrementa il valore di counter<\/li>\n\n\n\n<li>il terzo div compare nel DOM se il valore di counter \u00e8 uguale a 10<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-richieste-ajax-controllo-totale\">Richieste AJAX: controllo totale<\/h2>\n\n\n\n<p>Possiamo realizzare richieste ajax in molteplici modi, ottenendo un controllo totale su tutte le loro caratteristiche.<\/p>\n\n\n\n<p>Ad esempio, per creare una richiesta POST da JavaScript:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> $.post(<span class=\"hljs-string\">'https:\/\/jsonplaceholder.typicode.com\/posts'<\/span>, {\n    <span class=\"hljs-attr\">data<\/span>: {\n        <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">'VanillaCream.js'<\/span>,\n        <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-string\">'Best Vanilla JS framework'<\/span>,\n        <span class=\"hljs-attr\">userId<\/span>: <span class=\"hljs-number\">1<\/span>\n    }\n});\nel.html = result<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Per caricare direttamente in un elemento HTML il risultato di una richiesta:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"el\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n     <span class=\"hljs-keyword\">const<\/span> {el} = $.refs(<span class=\"hljs-string\">'#app'<\/span>)\n\n     el.post(<span class=\"hljs-string\">'https:\/\/jsonplaceholder.typicode.com\/posts\/'<\/span>, {\n        <span class=\"hljs-attr\">start<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> el.text = <span class=\"hljs-string\">'Loading...'<\/span>,\n        <span class=\"hljs-attr\">data<\/span>: {<span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">'VanillaCream.js'<\/span>, <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-string\">'Best Vanilla JS framework'<\/span>, <span class=\"hljs-attr\">userId<\/span>: <span class=\"hljs-number\">1<\/span>}\n     })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Inoltre, abbiamo la possibilit\u00e0 di creare richieste ajax direttamente dal template HTML, senza utilizzare codice JavaScript:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">&lt;div x-<span class=\"hljs-keyword\">get<\/span>=\"{\n    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/httpbin.org\/html'<\/span>,\n    <span class=\"hljs-attr\">headers<\/span>: {<span class=\"hljs-string\">'Content-type'<\/span>: <span class=\"hljs-string\">'application\/json'<\/span>, <span class=\"hljs-string\">'X-Custom'<\/span>: <span class=\"hljs-string\">'Ciao!'<\/span>}\n    <span class=\"hljs-attr\">on<\/span>: <span class=\"hljs-string\">'click'<\/span>\n}<span class=\"hljs-string\">\"&gt;Click here&lt;\/div&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Con questo codice, cliccando sull&#8217;elemento creiamo una richiesta ajax di tipo GET grazie all&#8217;attributo x-get settando determinate intestazioni HTTP e caricando automaticamente il contenuto al termine della richiesta.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-componenti-e-back-end\">Componenti e back-end<\/h2>\n\n\n\n<p>Anche se VanillaCream offre la possibilit\u00e0 di realizzare componenti front-end, possiamo affiancarlo a qualsiasi tecnologia back-end e delegare a questa la componentizzazione, in modo da modularizzare le applicazioni.<\/p>\n\n\n\n<p>Ad esempio, in Laravel potremmo avere un componente che recupera stringhe dal database e le collega al front-end, dove VanillaCream attua la reattivit\u00e0:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">!\u2014add-fruit.blade.php<\/span> <span class=\"hljs-attr\">--<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"box\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    Insert fruit: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"fruit\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>Add Fruit<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">const<\/span> {box, fruit, btn, state} = $.refs(<span class=\"hljs-string\">'#app'<\/span>, {\n        <span class=\"hljs-attr\">fruits<\/span>: @json($fruits)\n    });\n\n    box.text = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">'Fruits: '<\/span> + state.fruits.join(<span class=\"hljs-string\">', '<\/span>)\n\n    btn.onClick(<span class=\"hljs-keyword\">async<\/span> () =&gt; {\n       <span class=\"hljs-keyword\">const<\/span> v = fruit.attr.value\n       <span class=\"hljs-keyword\">await<\/span> $.<span class=\"hljs-keyword\">get<\/span>('\/my-backend\/add-fruit', {\n        <span class=\"hljs-attr\">data<\/span>: {<span class=\"hljs-attr\">fruit<\/span>: v}\n       });\n\n       state.fruits.push( v )\n       fruit.attr.value = <span class=\"hljs-string\">''<\/span>\n    })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-molto-altro\">\u2026 molto altro!<\/h2>\n\n\n\n<p>Come puoi ricavare, VanillaCream \u00e8 uno strumento rivoluzionario e molto potente, ma le sue potenzialit\u00e0 non finiscono qui. Abbiamo a disposizione:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>computed properties<\/li>\n\n\n\n<li>side effects<\/li>\n\n\n\n<li>componenti<\/li>\n\n\n\n<li>subset di elementi<\/li>\n\n\n\n<li>stati globali<\/li>\n\n\n\n<li>\u2026 e molto altro!<\/li>\n<\/ul>\n\n\n\n<p>Si tratta di una tecnologia moderna e flessibile che consente di creare UI\/UX reattive in modo semplice e raffinato.<\/p>\n\n\n\n<p>Sul sito ufficiale \u00e8 possibile trovare:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La documentazione completa<\/li>\n\n\n\n<li>Una serie di demo illustrative<\/li>\n\n\n\n<li>Un playground per testare VanillaCream sul campo<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>VanillaCreamJS \u00e8 una libreria JavaScript che permette letteralmente di aggiungere &#8220;super poteri&#8221; al JavaScript nativo, rendendo possibili operazioni potenti e moderne, come la reattivit\u00e0, senza la necessit\u00e0 di implementare build-tool e build-step.\u00a0 \u00c8 una tecnologia unica nel suo genere, perch\u00e9: Il suo nome indica proprio il suo obiettivo: raffinare il Vanilla JavaScript e portarlo ad&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/\">Read more<\/a><\/p>\n","protected":false},"author":94,"featured_media":33075,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10263],"tags":[10329,10327,10438],"collections":[11549],"class_list":{"0":"post-33073","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-backend-it","8":"tag-framework","9":"tag-javascript-it","10":"tag-sviluppo-software-it","11":"collections-il-meglio-della-settimana","12":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>VanillaCreamJS: JavaScript con i superpoteri<\/title>\n<meta name=\"description\" content=\"VanillaCreamJS \u00e8 una libreria JavaScript che aggiunge &quot;super poteri&quot; al JavaScript nativo, permettendo operazioni moderne come la reattivit\u00e0 senza la necessit\u00e0 di build tools.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"VanillaCreamJS: JavaScript con i superpoteri\" \/>\n<meta property=\"og:description\" content=\"VanillaCreamJS \u00e8 una libreria JavaScript che aggiunge &quot;super poteri&quot; al JavaScript nativo, permettendo operazioni moderne come la reattivit\u00e0 senza la necessit\u00e0 di build tools.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-28T08:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Riccardo Degni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Riccardo Degni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/\"},\"author\":{\"name\":\"Riccardo Degni\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb\"},\"headline\":\"VanillaCreamJS: JavaScript con i superpoteri\",\"datePublished\":\"2025-05-28T08:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/\"},\"wordCount\":966,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\",\"keywords\":[\"Framework\",\"JavaScript\",\"sviluppo software\"],\"articleSection\":[\"Backend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/\",\"name\":\"VanillaCreamJS: JavaScript con i superpoteri\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\",\"datePublished\":\"2025-05-28T08:00:00+00:00\",\"description\":\"VanillaCreamJS \u00e8 una libreria JavaScript che aggiunge \\\"super poteri\\\" al JavaScript nativo, permettendo operazioni moderne come la reattivit\u00e0 senza la necessit\u00e0 di build tools.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\",\"width\":1792,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Backend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"VanillaCreamJS: JavaScript con i superpoteri\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb\",\"name\":\"Riccardo Degni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"caption\":\"Riccardo Degni\"},\"description\":\"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.\",\"sameAs\":[\"http:\/\/www.riccardodegni.com\/\",\"https:\/\/www.linkedin.com\/in\/riccardodegni\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"VanillaCreamJS: JavaScript con i superpoteri","description":"VanillaCreamJS \u00e8 una libreria JavaScript che aggiunge \"super poteri\" al JavaScript nativo, permettendo operazioni moderne come la reattivit\u00e0 senza la necessit\u00e0 di build tools.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/","og_locale":"en_US","og_type":"article","og_title":"VanillaCreamJS: JavaScript con i superpoteri","og_description":"VanillaCreamJS \u00e8 una libreria JavaScript che aggiunge \"super poteri\" al JavaScript nativo, permettendo operazioni moderne come la reattivit\u00e0 senza la necessit\u00e0 di build tools.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2025-05-28T08:00:00+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","type":"image\/webp"}],"author":"Riccardo Degni","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Riccardo Degni","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/"},"author":{"name":"Riccardo Degni","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb"},"headline":"VanillaCreamJS: JavaScript con i superpoteri","datePublished":"2025-05-28T08:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/"},"wordCount":966,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","keywords":["Framework","JavaScript","sviluppo software"],"articleSection":["Backend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/","name":"VanillaCreamJS: JavaScript con i superpoteri","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","datePublished":"2025-05-28T08:00:00+00:00","description":"VanillaCreamJS \u00e8 una libreria JavaScript che aggiunge \"super poteri\" al JavaScript nativo, permettendo operazioni moderne come la reattivit\u00e0 senza la necessit\u00e0 di build tools.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","width":1792,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/vanillacreamjs-javascript-con-i-superpoteri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Backend","item":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/"},{"@type":"ListItem","position":3,"name":"VanillaCreamJS: JavaScript con i superpoteri"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb","name":"Riccardo Degni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","caption":"Riccardo Degni"},"description":"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.","sameAs":["http:\/\/www.riccardodegni.com\/","https:\/\/www.linkedin.com\/in\/riccardodegni\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-600x600.webp","author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp",1792,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-300x171.webp",300,171,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-768x439.webp",768,439,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-1024x585.webp",1024,585,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-1536x878.webp",1536,878,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp",1792,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-896x504.webp",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_comment_info":0,"uagb_excerpt":"VanillaCreamJS \u00e8 una libreria JavaScript che permette letteralmente di aggiungere &#8220;super poteri&#8221; al JavaScript nativo, rendendo possibili operazioni potenti e moderne, come la reattivit\u00e0, senza la necessit\u00e0 di implementare build-tool e build-step.\u00a0 \u00c8 una tecnologia unica nel suo genere, perch\u00e9: Il suo nome indica proprio il suo obiettivo: raffinare il Vanilla JavaScript e portarlo ad&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/33073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=33073"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/33073\/revisions"}],"predecessor-version":[{"id":33078,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/33073\/revisions\/33078"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/33075"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=33073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=33073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=33073"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=33073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}