{"id":3705,"date":"2024-01-25T15:18:06","date_gmt":"2024-01-25T14:18:06","guid":{"rendered":"https:\/\/www.dotenv.it\/non-categorizzato\/jamstack-l-architettura-del-futuro"},"modified":"2025-02-27T09:51:07","modified_gmt":"2025-02-27T08:51:07","slug":"jamstack-l-architettura-del-futuro","status":"publish","type":"post","link":"https:\/\/www.dotenv.it\/en\/blog\/jamstack-l-architettura-del-futuro","title":{"rendered":"Jamstack: l&#8217;architettura del futuro"},"content":{"rendered":"<p><span style=\"color: #000000;\">Jamstack \u00e8 un approccio all&#8217;architettura delle applicazioni web che si basa su alcuni principi essenziali per la creazione di siti web e applicazioni web performanti, scalabili e sicuri. Il termine &#8220;Jamstack&#8221; \u00e8 un acronimo che sta per &#8220;JavaScript, APIs, and Markup&#8221;. <\/span><b><span style=\"color: #000000;\">Nello specifico, Jam\u201d sta per JavaScript <\/span><\/b><span style=\"color: #000000;\">(un linguaggio di programmazione utilizzato specialmente nelle applicazioni Web), <\/span><b><span style=\"color: #000000;\">APIs e Markup <\/span><\/b><span style=\"color: #000000;\">(un codice HTML e CSS che impartisce istruzioni di formattazione ai browser).<\/span><\/p>\n<p><span style=\"color: #000000;\">Il termine <\/span><b><span style=\"color: #000000;\">\u201cstack\u201d si riferisce invece alla combinazione dei tre elementi appena citati<\/span><\/b><span style=\"color: #000000;\">, una combo che \u00e8 in grado di garantire agli sviluppatori software la creazione di applicazioni oppure siti Web.<\/span><\/p>\n<p><span style=\"color: #000000;\">Tuttavia, per parlarti di Jamstack, devi prima aver chiaro cos\u2019\u00e8 un\u2019API.<\/span><\/p>\n<h2><span class=\"ProseMirror__styled\">API: cosa sono e a cosa servono<\/span><\/h2>\n<p><b><span style=\"color: #000000;\">Le API sono il modo in cui un\u2019applicazione chiede e recupera da un\u2019altra una serie di dati<\/span><\/b><span style=\"color: #000000;\">. Come avviene questo processo? Un\u2019applicazione manda una richiesta API (HTTP Get, ovvero un semplice messaggio HTTP) e le API rispondono con un JSON contenente l\u2019informazione che abbiamo chiesto e per cui abbiamo interrogato l\u2019API in questione.<\/span><\/p>\n<p><span style=\"color: #000000;\">Nello schema si indicano tutti i <\/span><b><span style=\"color: #000000;\">tipi di messaggi HTTP che si possono inviare alle API<\/span><\/b><span style=\"color: #000000;\">, ognuno con la propria funzione, eventualmente specificando anche l\u2019acronimo CRUD:<\/span><\/p>\n<p><span style=\"color: #000000;\">Vediamo insieme le diverse tipologie di messaggi HTTP e la loro funzione:<\/span><\/p>\n<ul>\n<li><b><span style=\"color: #000000;\">POST<\/span><\/b><span style=\"color: #000000;\"> \u00e8 indicato per creare qualcosa nell\u2019applicazione<\/span><\/li>\n<li><b><span style=\"color: #000000;\">GET<\/span><\/b><span style=\"color: #000000;\"> serve per leggere qualcosa nell\u2019applicazione<\/span><\/li>\n<li><b><span style=\"color: #000000;\">PUT<\/span><\/b><span style=\"color: #000000;\"> ha lo scopo di aggiungere qualcosa nell\u2019applicazione, nel senso che sostituisce l\u2019informazione stessa<\/span><\/li>\n<li><b><span style=\"color: #000000;\">PATCH<\/span><\/b><span style=\"color: #000000;\"> ha la stessa funzione di PUT ma, nell\u2019aggiungere qualcosa all\u2019applicazione, modifica l\u2019informazione esistente<\/span><\/li>\n<li><b><span style=\"color: #000000;\">DELETE<\/span><\/b><span style=\"color: #000000;\"> cancella qualcosa nell\u2019applicazione\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #000000;\">La risposta a questa domanda avviene <\/span><b><span style=\"color: #000000;\">tramite un JSON o un formato XML<\/span><\/b><span style=\"color: #000000;\">.<\/span><\/p>\n<p><img decoding=\"async\" title=\"\" src=\"https:\/\/www.dotenv.it\/wp-content\/uploads\/2024\/04\/crud.jpg\" alt=\"\" \/><\/p>\n<p><span style=\"color: #000000;\">Per capire cosa sono, <\/span><b><span style=\"color: #000000;\">come funzionano e a cosa servono le API<\/span><\/b><span style=\"color: #000000;\">, spesso si utilizza l\u2019esempio di un\u2019App per il meteo: chiunque pu\u00f2 realizzare un\u2019App per il meteo, ma senza i dati sui valori di temperatura, piovosit\u00e0 e venti \u00e8 completamente inutile.<\/span><\/p>\n<p><span style=\"color: #000000;\">Quindi, come recuperare tutti i dati esistenti sul meteo? \u00c8 praticamente impossibile. Se non esistessero delle API realizzate da qualcuno e messe a disposizione di chiunque desideri interrogarle con la propria App, recuperare i dati del meteo in tempo reale non sarebbe fattibile.<\/span><\/p>\n<p><span style=\"color: #000000;\">Dopo che la nostra App va a prendere le informazioni del meteo (che le abbiamo richiesto) inviando una GET alle API messe a disposizione per essere interrogate, torner\u00e0 indietro l\u2019informazione richiesta e la nostra App ce la mostrer\u00e0 nello stile e nella grafica che abbiamo pensato per lei.<\/span><\/p>\n<h2><span class=\"ProseMirror__styled\">Caratteristiche di un\u2019architettura Jamstack<\/span><\/h2>\n<p><span style=\"color: #000000;\">Come precedentemente accennato, il termine <\/span><b><span style=\"color: #000000;\">\u201cstack\u201d si riferisce alla combinazione di tre elementi<\/span><\/b><span style=\"color: #000000;\">, un\u2019unione che \u00e8 in grado di garantire agli sviluppatori software la creazione di applicazioni oppure siti Web.<\/span><\/p>\n<p><span style=\"color: #000000;\">La caratteristica di questi ultimi o di un\u2019applicazione Jamstack \u00e8 l\u2019essere costruita utilizzando solo questi tre elementi. Il sito Web o l\u2019applicazione Web visualizzati dall\u2019utente vengono realizzati mediante codice di markup HTML e CSS. In tutto questo, JavaScript \u00e8 utilizzato per tutte le funzionalit\u00e0 dinamiche necessarie a chiamare le API, che vanno a fornire il backend dell\u2019applicazione.<\/span><\/p>\n<p><i><span style=\"color: #000000;\">Perch\u00e9 il backend in Jamstack \u00e8 snello e leggero?<\/span><\/i><\/p>\n<p><span style=\"color: #000000;\">Perch\u00e9 gli sviluppatori che usano Jamstack per le loro applicazioni non devono costruire una rete di backend sotto il frontend; al contrario, <\/span><b><span style=\"color: #000000;\">possono basarsi su API gi\u00e0 esistenti per far funzionare i loro siti web o le loro applicazioni<\/span><\/b><span style=\"color: #000000;\">. Quando uno sviluppatore desidera creare nuove funzionalit\u00e0, implementare quelle esistenti oppure modificarle, non deve perdere ore per scrivere tutto il codice nel backend, ma limitarsi a <\/span><b><span style=\"color: #000000;\">creare una nuova API che vada a fornire il dato<\/span><\/b><span style=\"color: #000000;\"> ed, eventualmente, implementarla in un secondo momento anche per applicazioni future.<\/span><\/p>\n<h2><span class=\"ProseMirror__styled\">La differenza tra l\u2019approccio tradizionale in backend e un\u2019architettura Jamstack<\/span><\/h2>\n<p><span style=\"color: #000000;\">Per capire come funziona <\/span><b><span style=\"color: #000000;\">un\u2019applicazione o un sito web generato con un\u2019architettura Jamstack<\/span><\/b><span style=\"color: #000000;\"> pensa al settore finanziario e alle migliaia di continue fluttuazioni di quotazione che caratterizzano il mercato azionario europeo.<\/span><\/p>\n<p><span style=\"color: #000000;\">Tra <\/span><b><span style=\"color: #000000;\">un\u2019applicazione fatta in modo tradizionale <\/span><\/b><span style=\"color: #000000;\">e una con un\u2019architettura Jamstack c\u2019\u00e8 una grande differenza. Segui questo esempio: immagina che un developer sviluppi un\u2019<a href=\"https:\/\/www.dotenv.it\/it\/blog\/guida-completa-per-l-applicazione-web-adatta\">applicazione web<\/a> in modo tradizionale (ovvero con una grossa struttura in backend) capace di gestire, controllare e fornire continui aggiornamenti sulle fluttuazioni della quotazione dei titoli azionari dei mercati europei. In questo caso, il developer crea <\/span><b><span style=\"color: #000000;\">una struttura in backend che viene eseguita su un server<\/span><\/b><span style=\"color: #000000;\">. Cos\u00ec, quando l\u2019utente apre l\u2019applicazione per controllare le fluttuazioni, il server del developer genera pagine HTML che visualizzano i dati azionari e le invia all\u2019utente. Purtroppo, per\u00f2, l\u2019applicazione risulta <\/span><b><span style=\"color: #000000;\">molto lenta<\/span><\/b><span style=\"color: #000000;\"> perch\u00e9, prima che l\u2019utente visualizzi queste pagine, deve necessariamente attendere l\u2019esecuzione dell\u2019applicazione backend, la generazione delle pagine HTML e che l\u2019HTML raggiunga il suo dispositivo.<\/span><\/p>\n<p><span style=\"color: #000000;\">\u00a0Questo \u00e8 l\u2019approccio tradizionale e abbiamo realizzato anche questo schema riepilogativo:<\/span><\/p>\n<p><img decoding=\"async\" title=\"\" src=\"https:\/\/www.dotenv.it\/wp-content\/uploads\/2024\/04\/app1.png\" alt=\"\" \/><\/p>\n<p><span style=\"color: #000000;\">Ora pensa alla stessa applicazione, ma costruita usando l\u2019<\/span><b><span style=\"color: #000000;\">approccio Jamstack<\/span><\/b><span style=\"color: #000000;\">. In questo secondo caso Antonello non deve costruire l\u2019applicazione partendo dal backend, ma <\/span><b><span style=\"color: #000000;\">creare una serie di pagine HTML, che sono leggere, semplici e veloci da realizzare<\/span><\/b><span style=\"color: #000000;\">. Successivamente le archivia in una rete CDN (<\/span><i><span style=\"color: #000000;\">Content Delivery<\/span><\/i><span style=\"color: #000000;\"> o <\/span><i><span style=\"color: #000000;\">Distribution Network<\/span><\/i><span style=\"color: #000000;\">), ovvero una rete di computer distribuita geograficamente e ottimizzata per migliorare le prestazioni, che permetta di servire le risorse agli utenti del Web. Quando uno di questi ultimi apre l\u2019applicazione, <\/span><b><span style=\"color: #000000;\">la rete CDN gli fornisce immediatamente le pagine HTML richieste<\/span><\/b><span style=\"color: #000000;\">.<\/span><\/p>\n<p><b><span style=\"color: #000000;\">Questo processo \u00e8 pi\u00f9 rapido<\/span><\/b><span style=\"color: #000000;\"> rispetto al server tradizionale di Antonello, dato che la rete CDN \u00e8 molto pi\u00f9 vicina, per definizione. L\u2019applicazione intanto effettua anche una chiamata API (mediante una GET) per chiedere e leggere le variazioni dei listini del mercato azionario europeo direttamente sulla pagina HTML.<\/span><\/p>\n<p><span style=\"color: #000000;\">Ecco che l\u2019applicazione si carica e lavora molto pi\u00f9 velocemente e Antonello, per l\u2019aggiornamento continuo dei listini azionari, non ha bisogno di scrivere il codice che gestisca il lavoro del backend nel server.<\/span><\/p>\n<p><span style=\"color: #000000;\">Questo \u00e8 l\u2019approccio Jamstack, dove<\/span><b><span style=\"color: #000000;\"> lo sviluppatore crea soltanto delle pagine HTML<\/span><\/b><span style=\"color: #000000;\"> e lavora sulle API esistenti o, al massimo, le implementa.<\/span><\/p>\n<p><span style=\"color: #000000;\">Ecco uno schema anche di questo secondo metodo:<\/span><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.dotenv.it\/wp-content\/uploads\/2024\/04\/app2.png\" alt=\"schema-architettura-Jamstack-blog-dotenv\" width=\"482\" height=\"340\" \/><\/p>\n<h3><span class=\"ProseMirror__styled\">Tre vantaggi di un\u2019architettura Jamstack<\/span><\/h3>\n<p><span style=\"color: #000000;\">Ora che sai la differenza tra un\u2019applicazione fatta in modo tradizionale e una con un\u2019architettura Jamstack, riassumiamo i vantaggi che puoi ottenere con la seconda strategia:<\/span><\/p>\n<ol>\n<li><b><span style=\"color: #000000;\">Performance<\/span><\/b><span style=\"color: #000000;\"> \u2013 La quasi totalit\u00e0 del contenuto in un\u2019applicazione Jamstack \u00e8 creata da files HTML statici, serviti mediante un CDN, e questa \u00e8 sicuramente la maniera pi\u00f9 rapida di rendere disponibile all\u2019utente un contenuto web.<\/span><\/li>\n<li><b><span style=\"color: #000000;\">Scalabilit\u00e0<\/span><\/b><span style=\"color: #000000;\"> \u2013 Quando hai un\u2019applicazione \u201cscalabile\u201d hai un prodotto in grado di rispondere correttamente e perfettamente anche in caso di picchi di utilizzo, il tutto grazie al frontend veloce e al backend snello.<\/span><\/li>\n<li><b><span style=\"color: #000000;\">Coinvolgimento<\/span><\/b><span style=\"color: #000000;\"> \u2013 Un\u2019applicazione Jamstack permette una pi\u00f9 coinvolgente esperienza di sviluppo, poich\u00e9 gli sviluppatori possono concentrarsi sulla creazione dell\u2019interfaccia frontend, senza preoccuparsi troppo del backend o dei problemi di prestazione.<\/span><\/li>\n<\/ol>\n<p>Per sfruttare appieno i vantaggi di un\u2019architettura Jamstack e <strong>trasformare la tua esperienza digitale,<\/strong> contattaci oggi stesso. Siamo qui per guidarti verso il futuro del web.<\/p>\n<h4><a href=\"https:\/\/www.dotenv.it\/it\/contatti\"><strong>Contattaci ora! <\/strong><\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>Sai che cos\u2019\u00e8 un\u2019API (Application Programming Interface) e a cosa serve? Per parlarti dell&#8217;architettura Jamstack, che sta rivoluzionando il mondo dello sviluppo web e delle applicazioni rendendole performanti, scalabili e sicurev dobbiamo prima chiarire questo concetto. Immergiti nella lettura del nostro prossimo articolo blog!<\/p>\n","protected":false},"author":9,"featured_media":3493,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,11],"tags":[],"class_list":["post-3705","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-developer"],"_links":{"self":[{"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/posts\/3705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/comments?post=3705"}],"version-history":[{"count":4,"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/posts\/3705\/revisions"}],"predecessor-version":[{"id":4300,"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/posts\/3705\/revisions\/4300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/media\/3493"}],"wp:attachment":[{"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/media?parent=3705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/categories?post=3705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotenv.it\/en\/wp-json\/wp\/v2\/tags?post=3705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}