Primi Passi

2

Percentuale Tradotta

In questo capitolo imparerai:

  • Installare Meteor & Meteorite.
  • I 5 tipi di pacchetti Meteor.
  • Organizzare la struttura dei file della tua applicazione Meteor.
  • Le prime impressioni sono importanti, e l'installazione di Meteor dovrebbe essere indolore. Nella maggior parte dei casi, sarai operativo in meno di 5 minuti.

    Per cominciare, possiamo installare Meteor aprendo una finestra della riga di comando e scrivere:

    $ curl https://install.meteor.com | sh
    

    Questo comando installerà l'eseguibile meteor nel tuo sistema e sarai pronto per usare Meteor.

    Non Installare Meteor

    Se non puoi (o non vuoi) installare Meteor localmente, ti suggeriamo di dare un'occhiata a Nitrous.io.

    Nitrous.io è un servizio che ti permette di eseguire applicazioni e editare il loro codice direttamente dal tuo browser: abbiamo scritto una breve guida per aiutarti ad utilizzarlo.

    Puoi seguire la guida anche solo fino alla sezione “Installing Meteor & Meteorite” (inclusa), dopodiché tornare a seguire il libro ripartendo dalla sezione “Creare una semplice App” di questo capitolo.

    Meteorite

    Dato che Meteor non supporta ancora pacchetti di terze parti nativamente, Tom Coleman (uno degli autori di questo libro) e alcuni membri della comunità hanno creato Meteorite, un wrapper per Meteor. Meteorite si prende anche cura di installare Meteor per te collegandolo a qualsiasi pacchetto tu possa trovare.

    Visto che ci appoggeremo a pacchetti di terze parti per alcune delle funzionalità di Microscope, installiamo Meteorite.

    Installare Meteorite

    Dovrai assicurarti che node e git siano installati sulla tua macchina. Installali nel modo standard tipico del tuo SO, oppure prova questi link:

    Dopodiché, installa Meteorite. Siccome è un eseguibile di npm (Node Packaged Module, formato standard dei moduli di Node), lo installiamo con il seguente comando:

    $ npm install -g meteorite
    

    Problemi con i Permessi?

    Su alcune macchine potresti aver bisogno dei permessi di root per installare Meteorite. Per evitare problemi, assicurati di usare sudo -H:

    $ sudo -H npm install -g meteorite
    

    Puoi leggere di più riguardo questo argomento nella documentazione di Meteorite.

    Tutto qua! Da qui in poi Meteorite gestirà tutto.

    Nota: al momento non c'è ancora supporto per Meteorite in Windows, ma puoi dare un'occhiata al nostro tutorial per windows.

    mrt vs meteor

    Meteorite installa l'eseguibile mrt, che useremo per installare pacchetti dentro la nostra applicazione. Quando invece vogliamo eseguire il nostro server, useremo l'eseguibile meteor.

    Creare una semplice App

    Ora che abbiamo installato Meteorite, creiamo una applicazione. Per farlo, utilizziamo il comando mrt di Meteorite da riga di comando:

    $ mrt create microscope
    

    Questo comando scaricherà Meteor e imposterà per te un semplice e basilare progetto Meteor pronto all'uso. Quando ha terminato, dovresti vedere la cartella, microscope/, con all'interno quanto segue:

    microscope.css
    microscope.html
    microscope.js
    smart.json
    

    L'applicazione che Meteor ha creato per te è un semplice modello standard di applicazione che dimostra alcuni semplici schemi.

    Anche se la nostra applicazione non fa granché, possiamo lanciarla. Per eseguirla, torna al tuo terminale e digita:

    $ cd microscope
    $ meteor
    

    Ora apri un browser e vai all'indirizzo http://localhost:3000/ (o l'equivalente http://0.0.0.0:3000/) e dovresti vedere qualcosa come questo:

    Meteor's Hello World.
    Meteor’s Hello World.

    Commit 2-1

    Created basic microscope project.

    Congratulazioni! Hai eseguito la tua prima applicazione Meteor. A proposito, tutto quello che devi fare per fermarla è tornare alla finestra del terminale da dove l'hai lanciata e premere ctrl+c.

    Aggiungere un Pacchetto

    Ora useremo Meteorite per aggiungere un pacchetto smart che ci permetterà di includere Bootstrap nel nostro progetto:

    $ mrt add bootstrap
    

    Commit 2-2

    Added bootstrap package.

    Una Considerazione sui Pacchetti

    Quando si parla di pacchetti nel contesto di Meteor, è meglio essere precisi. Meteor utilizza cinque tipi base di pacchetti:

    • Il nucleo stesso di Meteor è diviso in diversi core packages. Questi vengono inclusi in ogni applicazione Meteor, e non dovrai quasi mai preoccupartene.
    • Gli smart packages di Meteor sono un gruppo di circa 37 pacchetti (puoi ottenere la lista completa con meteor list) che vengono forniti assieme a Meteor e che puoi importare facoltativamente dentro la tua applicazione. Puoi aggiungerli anche se non usi Meteorite, usando il comando meteor add nomepacchetto.
    • I Local packages (pacchetti locali) sono pacchetti personalizzati che puoi creare tu stesso e mettere nella cartella /packages. Per usarli non serve nemmeno Meteorite.
    • Gli Atmosphere smart packages sono pacchetti Meteor di terze parti la cui lista si trova su Atmosphere. Per importarli ed utilizzarli è necessario Meteorite.
    • Gli NPM packages (Node Packaged Modules) sono pacchetti di Node.js. Nonostante non siano pacchetti pronti all'uso per Meteor, possono essere utilizzati dai precedenti tipi di pacchetti.

    La Struttura Dei File Di Una Applicazione Meteor

    Prima di cominciare a scrivere codice, dobbiamo organizzare il nostro progetto in maniera adeguata. Per assicurarsi di avere una struttura pulita, aprite la cartella microscope e cancellate microscope.html, microscope.js, e microscope.css.

    Di seguito create cinque cartelle all'interno di /microscope: /client, /server, /public, /lib, e /collections, e create due file vuoti, main.html e main.js, all'interno di /client. Non preoccupatevi se questo compromette temporaneamente la vostra applicazione, inizieremo a riempirli nel prossimo capitolo.

    È necessario notare che alcune di queste cartelle sono speciali. Quando si tratta di struttura dei file, Meteor ha alcune regole:

    • Il codice nella cartella /server viene eseguito solo sul server.
    • Il codice nella cartella /client viene eseguito solo sul client.
    • Tutto il resto viene eseguito sia sul client che sul server.
    • I file nella cartella /lib vengono caricati prima di ogni altra cosa.
    • I file main.* sono caricati dopo ogni altra cosa.
    • Le risorse statiche (font, immagini, ecc.) vanno messe nella cartella /public.

    È bene notare che, anche se Meteor ha queste regole, non vi obbliga ad usare una struttura predefinita per la vostra applicazione se non ne avete intenzione. Perciò la struttura che vi suggeriamo è semplicemente il nostro modo di procedere, non una regola scolpita nella roccia.

    Vi invitiamo a controllare la documentazione ufficiale di Meteor se volete maggiori dettagli su questo argomento.

    Meteor è un MVC?

    Se ti stai avvicinando a Meteor venendo da altri framework come Ruby on Rails, ti starai forse chiedendo se le applicazioni Meteor adottano lo schema MVC (Model View Controller).

    La risposta breve è no. Diversamente da Rails, Meteor non impone nessuna struttura predefinita alla tua applicazione. Quindi in questo libro organizzeremo il codice nel modo che secondo noi ha più senso, senza preoccuparci più di tanto degli acronimi.

    Nessuna Cartella public?

    OK, abbiamo mentito. Non ci serve la cartella public/ per la semplice ragione che Microscope non usa nessun asset statico! Ma visto che la maggior parte delle applicazioni Meteor includeranno almeno un paio di immagini, abbiamo pensato fosse importante parlare anche di questo.

    A proposito, potresti anche notare una cartella nascosta chiamata .meteor. Questo è il posto dove Meteor salva il proprio codice: modificare cose lì dentro è di solito una gran brutta idea. Infatti, in realtà non ti servirà mai guardare dentro questa cartella. L'unica eccezione è per i file .meteor/packages e .meteor/release, che sono utilizzati rispettivamente per elencare i tuoi smart packages e la versione in uso di Meteor. Quando aggiungi pacchetti o cambi versione di Meteor, può essere utile controllare le modifiche a questi file.

    Underscores vs CamelCase

    L'unica cosa che possiamo dire a proposito dell'ormai storico dibattito tra underscore (my_variable) e camelCase (myVariable) è che non è importante quale modalità si scelga, l'importante è che una volta scelta la vostra preferita vi atteniate a pieno ad essa.

    In questo libro utilizziamo il camelCase perché è lo standard per quanto riguarda JavaScript (dopotutto si chiama JavaScript, non java_script!).

    Le uniche eccezioni a questa regola sono i nomi dei file, che utilizzeranno gli underscore (my_file.js), e le classi CSS, che useranno il trattino (.my-class). Il motivo di queste scelte è che nel filesystem gli underscore sono utilizzati frequentemente, mentre la sintassi CSS utilizza già i trattini (font-family, text-align, ecc.).

    Prendersi Cura dei CSS

    Questo libro non tratta di CSS. Quindi per non rallentarti con dettagli relativi agli stili, abbiamo deciso di rendere disponibile fin da subito lo stylesheet completo, di modo che tu non debba più preoccupartene.

    I file CSS vengono caricati e minificati automaticamente da Meteor, quindi diversamente da altri asset statici vanno messi dentro /client, e non dentro /public. Continua e crea ora la cartella client/stylesheets/ e metti al suo interno questo file style.css:

    .grid-block, .main, .post, .comments li, .comment-form {
        background: #fff;
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    }
    body {
        background: #eee;
        color: #666666;
    }
    .navbar { margin-bottom: 10px }
    .navbar .navbar-inner {
        border-radius: 0px 0px 3px 3px;
    }
    #spinner { height: 300px }
    .post {
        *zoom: 1;
        -webkit-transition: all 300ms 0ms;
        -webkit-transition-delay: ease-in;
        -moz-transition: all 300ms 0ms ease-in;
        -o-transition: all 300ms 0ms ease-in;
        transition: all 300ms 0ms ease-in;
        position: relative;
        opacity: 1;
    }
    .post:before, .post:after {
        content: "";
        display: table;
    }
    .post:after { clear: both }
    .post.invisible { opacity: 0 }
    .post .upvote {
        display: block;
        margin: 7px 12px 0 0;
        float: left;
    }
    .post .post-content { float: left }
    .post .post-content h3 {
        margin: 0;
        line-height: 1.4;
        font-size: 18px;
    }
    .post .post-content h3 a {
        display: inline-block;
        margin-right: 5px;
    }
    .post .post-content h3 span {
        font-weight: normal;
        font-size: 14px;
        display: inline-block;
        color: #aaaaaa;
    }
    .post .post-content p { margin: 0 }
    .post .discuss {
        display: block;
        float: right;
        margin-top: 7px;
    }
    .comments {
        list-style-type: none;
        margin: 0;
    }
    .comments li h4 {
        font-size: 16px;
        margin: 0;
    }
    .comments li h4 .date {
        font-size: 12px;
        font-weight: normal;
    }
    .comments li h4 a { font-size: 12px }
    .comments li p:last-child { margin-bottom: 0 }
    .dropdown-menu span {
        display: block;
        padding: 3px 20px;
        clear: both;
        line-height: 20px;
        color: #bbb;
        white-space: nowrap;
    }
    .load-more {
        display: block;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.05);
        text-align: center;
        height: 60px;
        line-height: 60px;
        margin-bottom: 10px;
    }
    .load-more:hover {
        text-decoration: none;
        background: rgba(0, 0, 0, 0.1);
    }
    
    client/stylesheets/style.css

    Commit 2-3

    Re-arranged file structure.

    Una Considerazione su CoffeeScript

    All'interno di questo libro scriveremo codice in puro JavaScript. Ma se preferisci CoffeeScript, Meteor ha ciò che ti serve. Aggiungi semplicemente il pacchetto CoffeeScript e sarai pronto a partire:

    mrt add coffeescript