JavaScript (JS) è uno dei linguaggi di programmazione più diffusi al mondo, noto per la sua versatilità e capacità di funzionare su più piattaforme e applicazioni. Come linguaggio, JS è spesso usato per creare applicazioni web dinamiche, ma può essere utilizzato anche in una varietà di altri campi e stack. In questo articolo esploreremo alcuni dei diversi campi e stack in cui JavaScript può essere coinvolto.

Sviluppo Web
Uno dei campi più comuni in cui viene utilizzato JS è lo sviluppo web. JS viene utilizzato per aggiungere interattività e funzionalità alle pagine web, come la convalida dei dati dei moduli, la creazione di animazioni e la risposta agli eventi dell'utente. Viene anche utilizzato per creare applicazioni a pagina singola (SPA) e per sviluppare applicazioni lato server utilizzando Node.js.
Alcuni dei più diffusi stack di sviluppo web che utilizzano JS sono:

MEAN stack (MongoDB, Express, AngularJS, Node.js): Utilizzato per la creazione di applicazioni web dinamiche.
Stack MERN (MongoDB, Express, React, Node.js): Utilizzato per la creazione di applicazioni web scalabili ed efficienti.
Pila LAMP (Linux, Apache, MySQL, PHP): Utilizzato per creare applicazioni web dinamiche che girano su un server Linux.
Sviluppo di applicazioni mobili
JS viene utilizzato anche nello sviluppo di applicazioni mobili. Esistono diversi framework, come React Native, NativeScript e Ionic, che consentono agli sviluppatori di creare applicazioni mobili utilizzando JS. Questi framework offrono un modo per creare applicazioni mobili multipiattaforma che funzionano sia su dispositivi iOS che Android, senza dover scrivere codice separato per ogni piattaforma.


Sviluppo di applicazioni desktop
JS può essere utilizzato anche nello sviluppo di applicazioni desktop. Electron è un framework popolare che consente agli sviluppatori di creare applicazioni desktop multipiattaforma utilizzando JS, HTML e CSS. È utilizzato da aziende come Slack, Atom e Visual Studio Code per creare applicazioni desktop che funzionano su Windows, macOS e Linux.

Sviluppo di giochi
JS è utilizzato anche nello sviluppo di giochi. Esistono diversi motori di gioco, come Phaser e Three.js, che consentono agli sviluppatori di creare giochi 2D e 3D utilizzando JS. Questi motori di gioco consentono di creare giochi che vengono eseguiti in un browser web o su un dispositivo mobile.

Internet degli oggetti (IoT)
JS è utilizzato anche nel settore dell'Internet delle cose (IoT). I dispositivi IoT, come gli elettrodomestici intelligenti, gli indossabili e i sensori, utilizzano spesso JS per comunicare con Internet e per eseguire attività come l'elaborazione e l'analisi dei dati. Piattaforme come Johnny-Five e Node-RED forniscono un modo per utilizzare JS per interagire con i dispositivi IoT e per creare applicazioni IoT personalizzate.

In conclusione, JavaScript è un linguaggio versatile che può essere utilizzato in una varietà di campi e stack. Dallo sviluppo web a quello dei giochi, fino all'IoT, esistono molti modi diversi di usare JS per creare applicazioni innovative e dinamiche. Con la continua evoluzione della tecnologia, possiamo aspettarci di vedere JS utilizzato in un numero ancora maggiore di campi e applicazioni in futuro.

Benvenuti nell'homepage personale di Jacopo Vichi, sviluppatore fullstack appassionato di open source e sistemi Linux. In questo articolo descrivo come ho realizzato la mia homepage utilizzando le API offerte da Directus, NextJS e la pubblicazione tramite hosting Vercel

Le molteplici soluzioni offerte da JavaScript

Negli ultimi tempi mi sono dedicato allo studio e alla ricerca di nuove soluzioni e architetture per realizzare un sito web, imbattendomi in applicazioni definite No-Code APP e Headless CMS.

Dopo alcuni test e approfondimenti, ho deciso di iniziare a costruire la mia home page, secondo i seguenti requisiti:
- Memorizzare i vari contenuti su un database installato solo nel mio ambiente di sviluppo locale
- Rapido aggiornamento e creazione di nuovi contenuti
- Generazione di pagine web statiche in fase di pre-release
- Utilizzo di React per l'implementazione del frontend
- Tecnologia serverless
- Pubblicazione su hosting gratuito, non ho bisogno di gestire grandi flussi di visitatori
- SEO-friendly

Prima di tutto avevo bisogno di organizzare i contenuti in un database (uno a scelta tra PostgreSQL, MariaDB o SQLite), senza voler utilizzare CMS (come Wordpress), ma che mi consentisse, senza necessita' di programmazione, di: 
- Aggiornare schema e dati del database tramite un'interfaccia utente (da sviluppatore, voglio dedicare il mio tempo allo studio e progettazione di nuove tecnologie, senza re-inventarmi l'acqua calda)
- CRUD esposto tramite REST Webservices (o GraphQL)

 Dopo alcune ricerche, la scelta riguardava 2 HeadlessCMS:
- [Directus](https://directus.io/)
- [STRAPI](https://strapi.io/)

Sono entrambi opensource, offrono un'interfaccia utente per modellare lo schema e i dati del database ed espongono CRUD tramite l'API REST. Nella fase iniziale in cui ho messo alla prova i  2 strumenti, ho deciso di utilizzare Directus (l'interfaccia di amministrazione era migliore, piu' stabile - almeno al momento in cui ho eseguito i test - e più manutenibile in Docker).

L'adozione di [Directus](https://directus.io/) mi ha permesso di dedicarmi esclusivamente al frontend, il CMS è formidabile e mi permette di gestire da zero un intero database e organizzarlo secondo necessità, configurando le relazioni tra le tabelle e offrendo un potente interfaccia ADMIN. Fornisce anche la gestione multilingua grazie alla quale sono stato in grado di organizzare i contenuti internazionali in modo molto comodo.
Con un prodotto così ben organizzato, in grado di offrire anche supporto per l'archiviazione di risorse (come immagini e video), ho studiato le API esposte tramite REST Webservice, trovando questo metodo di implementazione davvero vantaggioso. 
In pochi passaggi, lo stack di backend necessario per gestire fruire i contenuti dell'homepage era completo.

> A questo punto mi sono dovuto concentrare sul frontend cercando un prodotto che mi permettesse di generare pagine statiche partendo dai contenuti disponibili nel mio ambiente di sviluppo estratti tramite chiamate HTTP offerte da Directus stesso

Date le mie competenze in ReactJS e l'estrema comodità e semplicità d'uso, cercavo qualcosa che mi permettesse di organizzare le mie pagine utilizzando Web Components per "aggregare" i vari building block di cui è composta una home page.
Dopo aver seguito alcuni corsi di Michele Riva, a Firenze, ho deciso di provare [NextJS](https://nextjs.org/). 

Questo framework offre varie tecniche di rendering,  soddisfando le mie esigenze. In particolare, avevo bisogno del suo motore per la SSG (Static Site Generation) in modo che il prodotto finale potesse essere composto da semplici pagine HTML SEO-friendly.

> NextJS offre 4 tipi di rendering: CSR (Client Side Rendering), SSR (Server Side Rendering), SSG (Static Site Generation) e ISR (Incremental Site Re-generation)

Ho iniziato a comporre il frontend costruendo i vari pezzi del puzzle (Web Components) utilizzando il comodo server di sviluppo incluso in NextJS. In questo modo ho sviluppato le interfacce necessarie, seguendo gli standard offerti da NextJS e configurando l'internazionalizzazione come spiegato nelle sue pagine di documentazione.

> Lo sviluppo della pagina web era finalmente completo e la versione compilata si componeva solamente di pagine HTML e risorse pubbliche

Da ultimo, dovevo gestire il deployment della versione compilata, escludendo il server di sviluppo NextJS, servendo staticamente le pagine HTML prodotte ed effettuando un re-deploy per aggiornare eventuali contenuti modificati.

> La mia esigenza era quella di utilizzare un servizio di hosting gratuito in grado di servire queste risorse statiche.

Dopo un po' di ricerche, i contendenti erano:
- [Vercel](https://vercel.com/), proprietario e manutentore del framework NextJS
- [Netlify](https://www.netlify.com/), molto famoso e utilizzato, ma senza alcuna esperienza personale
- [Render](https://render.com/), noto perché lo utilizzo come hosting per altri software grazie al suo piano gratuito (un valido successore di Heroku, oramai utilizzabile solo a pagamento)

Prendo la strada di [Vercel](https://vercel.com/), perché offriva la funzionalità di hosting per le pagine in modalita' SSG, SSR o CSR, permettendomi di generare la prebuild sul mio ambiente locale, pubblicando cosi' solo il prodotto finale . L'ho scelto anche perché essendo il manutentore ufficiale del framework NextJS, speravo in una perfetta integrazione. 
La soluzione si e' dimostrata vincente e in pochi minuti sono riuscito a pubblicare online la versione DEV della homepage.

> Vercel offre lo sviluppo DEV e PROD, consentendo agli sviluppatori di testare il loro sviluppo senza modificare la versione di produzione

**Urrà!** [La mia homepage](https://jacopovichi-dev.vercel.app/) è stata completata, aggiornabile e raggiungibile sul Web senza costi di hosting.
Tutti gli obiettivi sono stati completati senza scrivere tonnellate di righe di codice!!

In questo articolo descrivo lo stack software utilizzato per la sua realizzazione e le difficolta' incontrate durante l'implementazione.

Come ho realizzato la mia homepage

Blog

Benvenuti nell'homepage personale di Jacopo Vichi, sviluppatore fullstack appassionato di open source e sistemi Linux. In questo portale potrai conoscere me, i miei lavori e leggere le pubblicazioni sul mio blog