Questo articolo non vuole essere la classica diatriba tra tecnologie citando i pro e i contro che dovrebbero – il condizionale è logico – far propendere per una tecnologia in fase di sviluppo rispetto ad un’altra. A mio avviso non esistono tecnologie sbagliate ma scelte sbagliate. Un esempio potrebbe essere la realizzazione di una landing page con l’ausilio di un CMS. L’utilizzo di un CMS come WordPress o Drupal con un tema premium acquistato non è di per sé sbagliata come scelta, ma lo diventa se lo si usa per realizzare quella che dovrebbe essere una semplice pagina html.

I motivi? Performance, qualità di scrittura codice, ottimizzazione SEO e potremmo andare avanti.

In Ribrain abbiamo adoperato diverse tecnologie con i nostri clienti e testato varie applicazioni attraverso il nostro laboratorio di sviluppo, e in questo articolo andremo ad esplorare proprio quelle tecnologie che abbiamo approfondito e incontrato in questi anni.

Il nostro percorso si dirama in lavori statici, dinamici e e-Commerce. Molti dei nostri progetti sono landing page e onepage, e per realizzarle abbiamo utilizzato:

• HTML5 con uso tag semantici;
• Preprocessore scss: sass scss è linguaggio utile per semplificare la scrittura di fogli di stile che permette di generare CSS standard facile da mantenere;
• VanillaJS, uso di javascript plain senza ausilio di librerie DOM manipulation (come ad esempio, jQuery);
• Per dare movimento abbiamo usato diverse librerie di animazione tra cui GSAP.

Utilizziamo questo stack tecnologico ogni qualvolta ci troviamo di fronte a delle landing page o siti statici con un numero limitato di pagine. A tal proposito, negli ultimi mesi ci siamo trovati di fronte a una problematica simile ma più complessa: realizzare un numero considerevole di pagine statiche, gestire diversi layout, component e non poter utilizzare un CMS per la gestione delle pagine; e in questo caso abbiamo fatto uso di Static Site Generator.

Gli SSG sono strumenti che permettono di realizzare, partendo da html, file markown (.md) o template delle pagine web, e noi abbiamo utilizzato GatsbyJs che ci ha permesso di:

• Usare React: una libreria che viene sfruttata per la realizzazione di interfacce web. In questo caso lavoriamo realizzando componenti che verranno importati nei singoli file .jsx;
• Di utilizzare Redux per la gestione avanzata di stati;
• Usare SCSS ed importare fogli di stile per singolo componente;
• Sfruttare i tanti plugin per GatsbyJs;
• Poter usufruire di GraphQL;
• Utilizzare le diverse librerie come GSAP per le animazioni.

GatsbyJs ci ha permesso di ottenere progetti ad elevata performance, forte manutenibilità e un approccio component based. 

Per chi non ha mai provato GatsbyJs e React, consiglio vivamente, non ve ne pentirete.

Gran parte dei nostri lavori sono soprattutto siti dinamici. Un sito web dinamico sfrutta un CMS, ossia un sistema di gestione dei contenuti. 

Ci piace WordPress, ed è il CMS che utilizziamo più spesso per i nostri lavori. Dai molti bistrattato perché con il tempo è stato associato all’idea di un qualcosa di non curato o fai da te. Noi, invece, rientriamo tra quelli che valorizzano WordPress per quello che è, un sistema di gestione di contenuti scalabile con un approccio sartoriale al lavoro.

In questi anni abbiamo utilizzato WordPress:

1. Full sia per quanto riguarda la gestione dei contenuti che sul Front. Gran parte dei nostri lavori sono realizzati su temi prodotti da blank theme, integrando librerie e tecnologie già accennate precedentemente. Il mio consiglio è: meno temi premium più temi realizzati sartorialmente.
   

1. HeadLess misto, ovvero sfruttiamo WordPress e le sue potenzialità attraverso Rest API mantenendo le rotte per il SSR (Server Side Rendering) delle pagine. SSR consiste nel rendering lato server, fondamentale per l’indicizzazione delle pagine; mentre nella parte Front utilizziamo React in CSR (Client Side Rendering) mode e il suo router. Quindi, in breve, Backend con WordPress sviluppato in php e realizzando moduli gutenberg e gestione SEO, Frontend con React e il suo ecosistema.

1. Headless puro, ovvero uso esclusivo Rest API e gestione SSR tramite NextJs. NextJs è un framework che permette a React di lavorare in SSR. In questo caso la gestione dei contenuti resta a WordPress mentre le rotte, SSR e Front, sono gestite con NextJs e NodeJs.

WordPress, inoltre, ti permette di trasformarlo in un e-Commerce attraverso Woocommerce, che può rappresentare la giusta soluzione per piccoli shop online. Con Woocommerce lavoriamo esattamente come lavoriamo su WordPress: soluzioni custom partendo da blank theme e stack tecnologico sopra menzionato. 

Se è necessaria una piattaforma scalabile, integrata con gestionali, Magento è una soluzione adatta. Abbiamo lavorato con Magento sviluppando temi custom con integrazione gestionali esterni e, non ultimo, integrandolo con AS400.

WordPress e Magento, ad esempio, solo uno due tanti CMS presenti sul mercato; come dicevo prima nulla è il bene o il male, tutto dipende esclusivamente da come lo si impiega. 

Questo è solo una parte del viaggio, non possiamo decidere oggi su quale tecnologia puntare nei prossimi anni, ma possiamo fare l’unica cosa realmente utile e importante: informarsi continuamente, studiare ed integrare le nuove tecnologie all’interno del proprio stack tecnologico. 

Io ho già preso appunti e ho un po’ di cose da tenere sott’occhio: web component, webassembly, webgl, GLSL, webGPU, PWA.

E voi invece?

Onofrio Napolitano

Frontend Creative Developer, vanta diverse collaborazioni con progetti di svluppo frontend per: Google, Sony, Microsoft, Samsung, Euronics.