() translation by (you can also view the original English article)
Sviluppare applicazioni web significa utilizzare tecnologie e strumenti diversi, aver a che fare con manipolazione di database, operazioni lato server, e anche gestione e visualizzazione lato client di dati provenienti dal server. Prima di iniziare un nuovo progetto, tutti gli strumenti e la struttura del progetto stesso devono essere impostati, e questo è un processo che porta via tempo. Utilizzare un framework o uno stack per questa attività può velocizzare lo sviluppo e facilitare il lavoro dello sviluppatore.
Cos'è MEAN
"MEAN è una piattaforma JavaScript fullstack per applicazioni web moderne".
Questo è il modo in cui gli autori definiscono lo stack MEAN sul proprio sito web. È estremamente chiaro che MEAN ha come target tutte le tipologie di sviluppatori JavaScript (sia server che client) e che è una piattaforma stack che coinvolge diverse componenti.
Questi componenti sono:
Come potete vedere, MEAN racchiude quattro delle più usate e apprezzate tecnologie per lo sviluppo JavaScript, che stabiliscono il fondamento per lo sviluppo semplificato di complesse applicazioni web.
Installazione
Lo stack MEAN può essere installato in due modi:
Installare MEAN dal sito
Il metodo è abbastanza semplice. Dovete visitare il sito mean.io e potrete effettuare il download del framework come file zip cliccando sul pulsante grande verde.
Un'altra opzione disponibile da qui è clonare la repository Git. Aprite un terminale e inserite la seguente istruzione:
1 |
git clone https://github.com/linnovate/mean.git |
Installare MEAN usando Yeoman
Esistono svariati generatori Yeoman, scritti da diversi sviluppatori. L'utilizzo di un generatore per installare MEAN prevede due passaggi, il primo dei quali è installare il generatore:
1 |
npm install -g generator-meanstack |
per poi usare yo per creare l'app:
1 |
yo meanstack |
L'esempio qui sopra dà per scontata l'installazione del generatore meanstack e l'installazione di Yeoman. Per una lista di generatori MEAN, controllate questo link e filtrate per "mean". Per informazioni sull'installazione di Yeoman, controllate il sito di Yeoman.
Addy Osmani ha scritto un blog post molto interessante riguardo lo stack MEAN e i generatori di Yeoman ad esso dedicati. Raccomandiamo fortemente di leggerlo, per capire come installare lo stack utilizzando i generatori.
Ai fini di questo articolo userò l'approccio Git cloning.
Post installazione
Dopo l'installazione, digitate l'istruzione cd per andare nella cartella dove avete installato lo stack MEAN ed eseguite il comando grunt (dovreste avere grunt-cli installato). Questo comando avvierà un server in ascolto sulla porta 3000, in modo che visitando http://localhost:3000 nel browser vedrete qualcosa del genere:
Cosa otteniamo dopo l'installazione
Lo stack MEAN è infatti un motore applicativo altamente funzionale per blog. Si viene autenticati usando diversi metodi: Facebook, Github, Twitter o Google, anche semplicemente tramite email e password.
Immaginiamo siate curiosi di vedere del codice ora... Andiamo quindi a scoprirlo. La struttura delle cartelle dello stack MEAN dovrebbe essere simile alla seguente:
Il lato Server
Il server viene diviso in due cartelle e un file:
- cartella
app- contiene i controllers, modelli e views che compongono l'applicazione - cartella
config- contiene i files che gestiscono il comportamento dell'applicazione. -
server.js- è il punto di avvio dell'applicazione
Guardiamoli uno alla volta:
Il file server.js
Questo è il file che avvia l'intera applicazione. Se non volete usare grunt potrete usare node server.js per avviare il server.
Il file server.js è responsabile per:
- Caricare la configurazione. Vengono caricati i files di configurazione dell'applicazione stessa, l'autenticazione e la connessione al database.
- Modelli di avvio automatico. Svolto tramite l'iterazione attraverso la cartella dei modelli e caricando i files all'interno della cartella (o le sue sotto directories).
- Bootstrap passport
- Inizializzazione dell'applicazione express
- Configurazione dell'applicazione express
- Configurazione del routing dell'applicazione express
- Ascolto della porta configurata
Cartella config
Questa cartella contiene i files di configurazione dell'applicazione. All'interno troverete una cartella env contenente configurazioni per sviluppo, produzione e tests per sviluppare l'applicazione.
Inoltre sono presenti files contenenti la configurazione dell'applicazione, la parte express e la configurazione di passport per il login.
La cartella app
All'interno della cartella app risiede il codice lato server. Questa cartella contiene sotto-cartelle per i controllers, modelli e views che compongono l'applicazione server MVC e anche una cartella per le routes che vengono gestite.
Di default sono presenti controllers per gli articoli, gli utenti e un file di indice per il percorso principale. Vengono inoltre creati modelli per gli articoli e gli utenti e le routes per articoli, utenti e percorso principale vengono creati durante l'installazione.
Per quanto riguarda le views di default viene creata la seguente struttura:
La cartella includes contiene le parti footer e header inserite in tutte le pagine dell'applicazione. La cartella layout contiene l'HTML base per il layout della pagina. Questo layout viene esteso al file index.html dalla cartella views.
La cartella users contiene il codice di markup per il sign in, sign up e l'autenticazione.
Nel percorso principale della cartella views, accanto al file index.html, sono presenti i files contenenti il markup per gli errori 404 e 500.
Il lato Client
Il codice lato client è situato nella cartella public. Questa cartella contiene una sottocartella css per creare lo stile dell'applicazione e una cartella img contenente le immagini usate nell'applicazione.
Dovrebbe essere prestata particolare attenzione alla cartella js che contiene il codice Angular per l'applicazione lato client, il codice di inizializzazione, alcune direttive e codice di filtro (attualmente files vuoti), i controllers e services per gli articoli e la sezione header dell'applicazione. La cartella views contiene il markup per la creazione dell'articolo, l'editing e la visualizzazione.
Infine, la cartella lib contiene il codice della libreria Angular.
Testare l'applicazione
La cartella test contiene i files per testare l'applicazione. Principalmente ci sono files per il test lato server utilizzando Mocha e files per testare la parte client utilizzando Karma.
Strumenti forniti
Nell'utilizzo dello stack MEAN, come sviluppatori, avete anche accesso a npm, bower e grunt, che dovrebbe essere già installato.
Importante menzionare che viene fornito JSHint e che tutto il codice JavaScript viene controllato tramite lint. Inoltre, usando Grunt, il progetto può essere osservato in tempo reale durante le modifiche e ricaricato automaticamente.
Conclusione
Questo articolo sarà seguito da un secondo tutorial nel quale verrà sviluppata un'intera applicazione sfruttando lo stack MEAN, mostrandovi come MEAN può essere configurato e adattato per essere utilizzato in altre tipologie di applicazione.
Rimanete sintonizzati per la seconda parte!
