Stack tecnologico
Prima di approfondire lo stack MERN, spieghiamo rapidamente cos'è uno stack tecnologico. Uno stack tecnologico è un insieme di tecnologie che si sceglie e si utilizza per creare un'applicazione web, un'applicazione mobile o applicazioni simili. Un buon stack tecnologico deve offrire un'esperienza utente agevole, oltre che essere scalabile ed economico. Un tipico stack tecnologico contiene un frontend, un backend e un database ed è noto come stack tecnologico completo.
Di solito, le tecnologie di base del frontend o dell'interfaccia utente rimangono le stesse, ad esempio HTML, CSS e JavaScript. A seconda dei requisiti del progetto, è possibile utilizzare librerie e framework, come React o Angular, basati su queste tecnologie di interfaccia utente.
Il backend è costituito da un server, in cui risiede la logica dell'applicazione. Puoi scrivere la logica dell'applicazione in uno o più linguaggi di programmazione come JavaScript, Java, Python o usare framework come Django, Spring o Express.js. Per eseguire i programmi, la sua applicazione necessita di un runtime come Node.js o JRE (Java Runtime Environment).
Il database è l'hub di archiviazione, dove vengono archiviati tutti i dati relativi all'applicazione. Puoi scegliere di archiviare i tuoi dati in una struttura tabulare (utilizzando sistemi di database relazionali) o utilizzando sistemi non relazionali, chiamati anche NoSQL, come la struttura del documento, la struttura del grafico e così via e selezionare il database di conseguenza. Alcuni esempi di database sono MongoDB, Oracle, MySQL.
Cos'è lo stack MERN?
Uno stack tecnologico può essere personalizzato (gli sviluppatori possono scegliere le tecnologie in base ai requisiti del progetto) o predefinito (dove le tecnologie sono state pre-decise).
MERN è uno stack tecnologico predefinito basato su tecnologie JavaScript. MERN sta per MongoDB, Express, React e Node, dal nome delle quattro tecnologie chiave che compongono lo stack.
- MongoDB: database di documenti
- Express(.js): framework web Node.js
- React(.js): un framework JavaScript lato client
- Node(.js): il principale server web JavaScript (runtime)
Express e Node costituiscono il livello intermedio (applicazione). Express.js è un framework web lato server e Node.js è la popolare e potente piattaforma server JavaScript. Indipendentemente dalla variante scelta, ME(RVA)N è l'approccio ideale per lavorare con JavaScript e JSON, fino in fondo.
Come funziona lo stack MERN?
L'architettura MERN ti consente di costruire facilmente un'architettura a tre livelli (frontend, backend, database) utilizzando interamente JavaScript e JSON.
Frontend React.js
Il livello superiore dello stack MERN è React.js, il framework JavaScript dichiarativo per la creazione di applicazioni dinamiche lato client in HTML. React ti consente di creare interfacce complesse tramite componenti semplici, collegarle ai dati sul tuo server backend ed eseguirne il rendering in formato HTML.
Il punto forte di React è la gestione di interfacce statiche e basate sui dati con codice e problemi minimi e ha tutte le funzionalità che si aspetterebbe da un framework web moderno: ottimo supporto per moduli, gestione degli errori, eventi, elenchi e altro ancora.
Livello server di Express.js e Node.js
Il livello successivo è il framework lato server Express.js, in esecuzione all'interno di un server Node.js. Express.js si definisce un "framework web veloce, senza pregiudizi e minimalista per Node.js", e in effetti è esattamente quello che è. Express.js dispone di potenti modelli per il routing degli URL (abbinamento di un URL in entrata con una funzione server) e la gestione delle richieste e delle risposte HTTP.
Effettuando richieste XML HTTP (XHR), GET o POST dal frontend React.js, puoi connetterti alle funzioni Express.js che alimentano la tua applicazione. Queste funzioni, a loro volta, utilizzano i driver Node.js di MongoDB per accedere e aggiornare i dati nel tuo database MongoDB.
Livello database MongoDB
Se la tua applicazione memorizza dati (profili utente, contenuti, commenti, caricamenti, eventi, ecc.), allora vorrai un database con cui sia facile lavorare tanto quanto React, Express e Node.js.
È qui che entra in gioco MongoDB: i documenti JSON creati nel frontend React.js possono essere inviati al server Express.js, dove possono essere elaborati e (supponendo che siano validi) archiviati direttamente in MongoDB per un successivo recupero. Ancora una volta, se stai sviluppando nel cloud, vorrai dare un'occhiata a MongoDB Atlas. Se stai cercando di creare il tuo stack MERN, continua a leggere!
Esempio di una semplice richiesta/risposta utilizzando lo stack MERN
Una tipica richiesta HTTP (da un client) esegue una delle 4 operazioni POST, GET, PUT e DELETE, corrispondenti alle quattro operazioni del database, rispettivamente Create, Read, Update e Delete (CRUD). Per soddisfare queste richieste, Express.js fornisce oggetti di richiesta e risposta che memorizzano i parametri richiesti. La richiesta HTTP memorizza i dati forniti dall'utente finale e la risposta HTTP memorizza i dati recuperati dal database.
Con il driver MongoDB Node.js, puoi connettere facilmente le tue distribuzioni MongoDB all'applicazione in pochi semplici passaggi.
Una delle caratteristiche più importanti dello stack MERN è che tutte le tecnologie archiviano i dati nello stesso formato.
Il livello frontend, React, memorizza i dati come oggetto JavaScript, il livello backend (applicazione) utilizza il codice JavaScript e il livello dati MongoDB memorizza i dati in formato BSON (Binary JavaScript ON). Express converte i dati tra JS e JSON utilizzando il metodo .json() .
Node.js consente agli sviluppatori di scrivere la logica dell'applicazione backend (lato server) in JavaScript. Sebbene Node.js fornisca i moduli HTTP di base, la scrittura degli stessi in Express offre un'esperienza di codice più pulita. Express offre anche potenti funzionalità di routing per ottenere i dati richiesti dall'endpoint corretto, un altro posto in cui gli sviluppatori non devono scrivere codice esplicito per il routing.
Poiché il codice è scritto nella stessa lingua (JavaScript) dall'inizio alla fine, viene risparmiato molto tempo che altrimenti sarebbe impiegato nelle conversioni durante la transizione da un livello all'altro.
Supponiamo che un cliente voglia aggiornare il suo numero di cellulare attraverso un portale online. Il frontend, costruito utilizzando React.js, avrebbe un modulo in cui l'utente può inserire il numero di cellulare. React utilizza l'hook "useState" per impostare il numero di cellulare inserito dal cliente nel parametro di richiesta.
Il codice Express.js prende il numero di cellulare dalla richiesta HTTP put, lo associa allo schema del modello di dati dell'applicazione e applica il metodo corrispondente (ad esempio, findByIdAndUpdate ()) per eseguire l'operazione di aggiornamento. La risposta viene quindi inviata tramite l'oggetto di risposta HTTP con un messaggio di esito positivo/negativo.
Un esempio completo è disponibile sulla pagina del tutorial dello stack MERN.
Stack MERN e sviluppo full stack
Lo stack MERN è un tipo di stack completo (full stack), in cui i livelli tecnologici sono predefiniti. Uno sviluppatore full stack ha una curva di apprendimento più elevata, in quanto deve essere esperto in più tecnologie, mentre uno sviluppatore di stack MERN deve conoscere solo le tecnologie corrispondenti. Di seguito sono riportate alcune importanti differenze che ti aiuteranno a scegliere tra un full stack personalizzato e uno stack MERN, a seconda dei requisiti del tuo progetto.