What is MEAN?

Video tutorial gratuito di Maximilian Schwarzmüller
AWS certified, Professional Web Developer and Instructor
66 corsi
3.445.225 studenti
Descrizione della lezione
What does "MEAN" stand for? Let's explore the different pieces (MongoDB, Express, Angular & Node.js) that make up the MEAN stack and let's see WHY we combine them.
Segui il corso completo per saperne di più
Angular & NodeJS - The MEAN Stack Guide [2025 Edition]
Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application
12:39:59 di video on-demand • Ultimo aggiornamento: Gennaio 2025
Build real Angular + NodeJS applications
Understand how Angular works and how it interacts with Backends
Connect any Angular Frontend with a NodeJS Backend
Use MongoDB with Mongoose to interact with Data on the Backend
Use ExpressJS as a NodeJS Framework
Provide a great user experience by using Optimistic Updating on the Frontend
Improve any Angular (+ NodeJS) application by adding Error Handling
Italiano [Auto]
-: Allora, che cosa significa "significare"? Quali sono i diversi componenti che impareremo a conoscere in questo corso? Mean comprende un insieme di quattro tecnologie e questo è il suo significato. La M sta per MongoDB ed è il database che utilizzeremo in questo corso. Quindi la parte in cui saremo in grado di persistere i dati che gli utenti della nostra applicazione generano, come i dati dell'utente stesso, ma anche i post o i messaggi che inviano, cose del genere. E sta per express ed express js è difficile da comprendere senza la N. Andiamo quindi rapidamente avanti. Abbiamo anche la A e la A sta per Angular. Ora tornerò alla N, che è collegata alla E, ma Angular è la nostra tecnologia client side. Si tratta di un framework JavaScript che utilizzeremo per creare un'interfaccia utente dinamica e piacevole per i nostri utenti. Funziona interamente nel browser, non sul server, e quindi ha un solo compito: presentare un'interfaccia utente interattiva e reattiva piacevole e piacevole. Qual è allora la N? Probabilmente avete già notato che manca qualcosa. Abbiamo un database e abbiamo qualcosa in esecuzione nel browser, ma certamente dobbiamo anche eseguire una logica sul server. Ad esempio, l'autenticazione degli utenti. Questo non è qualcosa che possiamo fare nel browser perché A, il codice del browser può essere facilmente violato o modificato e B, è troppo complesso. La N sta per node js ed è il tempo di esecuzione di JavaScript che il linguaggio lato server utilizzerà in questo corso per il nostro codice lato server. Quindi, per la nostra logica aziendale di base che viene eseguita sul server e ora la E è collegata ad essa perché mentre node js è il linguaggio che useremo sul server, express è un framework per node js che rende più facile lavorare con esso. Non si ha bisogno di express JS di per sé, ma rende molto più facile lavorare con esso, così come Angular è un framework per JavaScript nel browser. Non è necessario, ma rende le cose più facili. Ma diamo uno sguardo più dettagliato a tutti questi aspetti. Ora vogliamo dare un'occhiata ad Angular. Come ho già detto, Angular viene eseguito sul lato client del browser. È un framework che si basa su JavaScript o che utilizza JavaScript ed è utilizzato per creare le cosiddette applicazioni a pagina singola. Ciò significa essenzialmente che gestisce l'intera logica del front-end. Quindi, tutto ciò che l'utente vedrà è merito di Angular, ma ci tornerò tra qualche secondo. Il compito di Angular è quello di rendere l'interfaccia utente con dati dinamici. E la parte dei dati dinamici è importante. Naturalmente, il suo compito non è solo quello di eseguire il rendering di HTML statico e di CSS. Non avremmo bisogno di JavaScript per questo. Il suo compito è aggiornare l'interfaccia utente. Ogni volta che abbiamo nuove informazioni, ad esempio quando avete creato un nuovo post, vogliamo aggiornare immediatamente l'interfaccia utente per mostrare il nuovo post. È anche responsabile della gestione degli input dell'utente, quindi della loro convalida e dell'invio al server, perché questa è la terza parte. Comunica con il nostro backend. Quindi la combinazione di nodi e Mongo sembra essere responsabile di questo problema. Angular offre un'esperienza d'uso simile a quella di un'applicazione mobile perché, poiché gestiamo tutto nel browser tramite JavaScript, non abbiamo mai bisogno di ricaricare la pagina. Cambiamo solo parti della pagina con JavaScript attraverso Angular, e quindi tutto avviene istantaneamente in modo molto reattivo. E questa è la sensazione che proviamo con le applicazioni mobili. Ora, questo è ancora solo il front-end, come ho detto il nodo JS è il linguaggio che useremo per il back-end. Quindi, sul lato server, che abbiamo costruito in questo corso, node JS è una libreria lato server, un runtime JavaScript e sapete che JavaScript può essere eseguito nel browser, mentre node js semplicemente prende e aggiunge alcune cose che sono utili sul server, come lavorare con i file, lavorare con le richieste http e ora possiamo usare JavaScript anche sul server. Piuttosto sorprendente, node js ascolta le richieste in arrivo ed è in grado di inviare risposte. Ad esempio, la nostra applicazione Angular potrebbe inviare una richiesta per recuperare un elenco di tutti i post e il nodo potrebbe gestire la richiesta e fare qualcosa, raggiungere il database e inviare una risposta con tutti i post. Node js esegue la logica lato server in generale. Quindi l'autenticazione, tutto ciò che non vogliamo eseguire nel browser per motivi di sicurezza o di prestazioni. E node js è in grado di interagire con database e file. Angular non può farlo. Non ha accesso a nessun file system e soprattutto non ha accesso a un file system su una macchina remota su un server. Sebbene in teoria sia possibile connettersi a un database da Angular, poiché tutto il codice JavaScript del lato client è visibile agli utenti, è possibile dare un'occhiata agli strumenti per sviluppatori del browser. Sarebbe molto insicuro connettere il database lì, perché si esporrebbero tutte le credenziali e tutto il resto. Non è il caso di farlo. Pertanto, node js è un'alternativa a PHP, se lo conoscete, o a Ruby on the Rails, asp. rete, cose del genere. E raramente viene usato in modo autonomo, proprio come queste lingue. In genere si utilizza un framework e questo framework è di solito express. Express è un framework JS per nodi. Utilizza ancora node js, lo stesso linguaggio, ma aggiunge molte funzioni di utilità. Quindi offre funzionalità aggiuntive o, in generale, semplifica le cose. Express JS è basato sul middleware e vedremo cosa significa quando ci immergeremo nel codice. In pratica, incanala le richieste in arrivo attraverso una catena di passaggi intermedi in cui possiamo fare qualcosa con la richiesta, leggere alcuni dati da essa, manipolarla, controllare se l'utente è autenticato o, in sostanza, inviare immediatamente una risposta. Questa catena ci permette di scrivere codice molto strutturato e in questo corso imparerete tutto su di essa. E infine, ma non meno importante, include il routing, il che significa che possiamo rendere le viste. Quindi pagine HTML con esso. In questo corso, però, non lo faremo, perché Angular dovrebbe gestire l'intero front-end. E ancora, tutto questo è da vedere. Ma soprattutto possiamo gestire richieste diverse a endpoint diversi, il che sarà importante per collegare Angular al backend, perché se vogliamo recuperare un elenco di post, dobbiamo inviare alcune richieste a /posts. Quindi il nostro dominio/post, se vogliamo creare un nuovo post, vogliamo inviare una richiesta diversa al nostro dominio/post, per esempio. Express JS ci consente di implementare questa logica di instradamento, in modo che le richieste a URL diversi siano gestite correttamente. Anche in questo caso, tutto questo verrà implementato passo dopo passo nel corso del corso. In sintesi, express JS semplifica l'uso di no js. È uno strumento che vogliamo assolutamente utilizzare. Se avete un background PHP, ad esempio, potreste paragonarlo a Laravel per PHP, che rende le cose più semplici. Manca una cosa: MongoDB. Naturalmente MongoDB, come ho già detto, è un database. Si tratta di un database noSQL, per essere precisi, che memorizza i cosiddetti documenti nelle cosiddette collezioni. È probabile che abbiate sentito parlare di database SQL, come My SQL o Microsoft SQL, in cui le righe dei record vengono memorizzate in tabelle. Ora, noSQL ha una logica diversa rispetto ai database SQL, ma in generale è ancora un database. Quindi si memorizzano i dati dell'applicazione su un server, in modo che persistano anche dopo il ricaricamento della pagina da parte dell'utente, l'abbandono della pagina e cose del genere. Pertanto, tutti i dati che non sono solo temporanei devono essere archiviati in un database di questo tipo. Ora, il termine noSQL significa che questo tipo di database non applica alcuno schema. È quindi possibile avere documenti diversi con informazioni diverse nella stessa tabella o collezione, come viene chiamata qui. E non funziona nemmeno con le relazioni. In questo corso vedremo che possiamo mettere in relazione documenti diversi tra loro, ma in generale le relazioni sono molto meno rigide e flessibili di quelle di un database SQL. I database noSQL sono più adatti a memorizzare documenti multipli non strutturati, anche se è possibile inserire una certa struttura in essi e lo faremo in questo corso. Tornerò a parlare di cosa è esattamente MongoDB e di come funziona nelle rispettive sezioni. Non c'è da preoccuparsi. Infine, ma non meno importante, è facilmente collegabile a Node. È molto bello. È molto facile da integrare o, per essere precisi, da node express e non lo colleghiamo ad Angular. L'ho già detto. In teoria si potrebbe trovare un modo, ma non lo si vuole fare perché non si vogliono esporre le credenziali del database nel codice del sito del browser, che può essere facilmente visualizzato dall'utente. È accessibile negli strumenti per sviluppatori del browser. MongoDB è quindi un database potente che può essere facilmente integrato in un ambiente node express. E oggi è molto popolare perché è molto flessibile e altamente scalabile. È in grado di gestire un'ampia quantità di traffico. Quindi le richieste al secondo o le azioni di scrittura al secondo e le azioni di lettura al secondo; approfondiremo questo aspetto nelle sezioni in cui inizieremo a lavorarci. Ora si potrebbe teoricamente sostituirlo con un altro database. È possibile utilizzare un database SQL anche in un'applicazione Angular di node express. Non siete limitati a MongoDB e voglio solo sottolineare questo aspetto. Sto usando MongoDB perché fa parte di questo popolare stack di mezzi e ha alcuni vantaggi, ma a seconda dell'applicazione e del tipo di dati che si stanno memorizzando, se si tratta di dati con molte relazioni, forse un database SQL potrebbe essere migliore. Anche se nel discorso useremo MongoDB, voglio solo sottolineare che non è un obbligo. Si può utilizzare qualsiasi database. La logica di base sarà immersa nella connessione realistica di angular e node. Quindi, prima di immergerci nell'impostazione del corso e iniziare a costruire la nostra applicazione media, vorrei tornare rapidamente sul significato di questa applicazione a pagina singola e su come si presenta il quadro generale di un'applicazione media.