Share
Cosa starai creandoMeteor ti offre un flusso di lavoro di sviluppo rapido che creerà app web isomorfe che "funzionano". L'architettura di Meteor è davvero bella in quanto aggiornerà tutti i client connessi alla tua app contemporaneamente, fin da subito. Ciò ha enormi implicazioni per la creazione di applicazioni web reattive.
Meteor è stato progettato pensando alla facilità d'uso e fortunatamente questa filosofia è stata portata avanti sin dall'inizio.
L'installazione è semplice come eseguire il seguente comando sui sistemi Linux / Mac OS X:
curl https://install.meteor.com/ | sh
Gli utenti Windows possono scaricare l'installer ufficiale.
Questo viene fatto alla riga di comando tramite meteora strumento. Per creare una nuova app nominata my_meteor_app nella tua directory home, fai quanto segue:
$ meteora crea ~ / my_meteor_app $ cd ~ / my_meteor_app $ meteor
Ora potrai accedere alla tua app meteorica tramite http: // localhost: 3000-port 3000 è l'impostazione predefinita.
Di default avrai i seguenti file creati:
~ / my_meteor_app: ├── my_meteor_app.css ├── my_meteor_app.html └── my_meteor_app.js
Il my_meteor_app.html il file contiene il markup richiesto per visualizzare la pagina: Meteor utilizza una sintassi di stile parentesi graffe tra parentesi. Tutto il codice nei tuoi file HTML è compilato con il compilatore Spacebars di Meteor. Le barre spaziate usano istruzioni circondate da doppie parentesi graffe come #ogni e #Se per consentirti di aggiungere logica e dati alle tue visualizzazioni.
Puoi passare i dati in modelli dal tuo codice JavaScript definendo gli helper e per iterare gli array che possiamo usare #each items.
Il my_meteor_app.js il file contiene sia il codice JavaScript richiesto per avviare il client, sia il server. Tutti gli eventi per il cliente o le direttive possono essere specificati in questo file.
Il css il file è per lo styling della tua app e, per impostazione predefinita, è vuoto.
Meteor analizza tutti i file HTML nella cartella dell'app e identifica tre tag di livello superiore: , , e .
Tutto dentro qualsiasi i tag vengono aggiunti alla sezione head dell'HTML inviato al client e tutto all'interno i tag vengono aggiunti alla sezione del corpo, proprio come in un normale file HTML.
Tutto dentro i tag sono compilati in modelli Meteor, che possono essere inclusi all'interno di HTML con > templateName o referenziato nel tuo JavaScript con Template.templateName.
Sostituisci il codice HTML predefinito con quanto segue:
La mia lista di cose da fare La mia lista di cose da fare
Costruito utilizzando Meteor Framework!
#each tasks task / each
testo
Qui specifichiamo a modello e #ogni loop per creare un elenco puntato. Completa l'esempio aggiungendo al my_meteor_app.js:
if (Meteor.isClient) // Il codice qui viene eseguito solo sul client // Assegna alcune attività per popolare i dati Template.body.helpers (tasks: [text: "Plant cetrioli in letame fresco", text: "Sposta gli avocado in vasi più grandi", text: "Pesca con Ben", text: "Porta la moglie allo yoga", text: "Annulla abbonamento TV"]);
Dai un'occhiata al tuo browser al risultato finale. Ora possiamo fare qualcosa di più implementando dati persistenti con una collezione MongoDB.
Meteor rende facile lavorare con i dati. Con le raccolte, i dati sono disponibili in qualsiasi parte del codice in quanto possono essere accessibili sia dal client che dal server. Ciò semplifica molto la scrittura di alcune logiche di visualizzazione e l'aggiornamento automatico della pagina stessa.
In Meteor, qualsiasi componente di visualizzazione collegato a una raccolta di dati mostrerà automaticamente le ultime modifiche ai dati, quindi è reattivo in tempo reale.
Cambia il tuo my_meteor_app.js file per utilizzare MongoDB con il seguente:
Accentsconagua
Tasks = new Mongo.Collection ("tasks"); if (Meteor.isClient) // Questo codice gira solo sul client Template.body.helpers (tasks: function () return Tasks.find ();); La linea Tasks = new Mongo.Collection ("tasks"); dice a Meteor di creare una raccolta MongoDB chiamata compiti. La ripercussione di questo fenomeno in Meteor è che sul client crea una connessione memorizzata nella cache della raccolta del server.
Per inserire i dati possiamo usare la console dei server. Per avviarlo da una nuova finestra di terminale, CD nella directory della tua app ed esegui (questo deve essere fatto mentre meteor è in esecuzione in una scheda separata):
$ meteor mongo
Ora, all'interno della console per il Mongo DB della tua app, aggiungi un record con:
db.tasks.insert (text: "Nuova attività da mongo!", createdAt: new Date ());
Dai un'occhiata al browser ora per vedere gli aggiornamenti. Apri gli strumenti per sviluppatori e nella console esegui quanto segue:
Tasks.insert (text: "dritto a mongo dalla console", createdAt: new Date ());
L'elenco verrà aggiornato dinamicamente sullo schermo. Apri una finestra del browser separata in una nuova istanza sul desktop. Esegui un altro inserto nella console.
Vedrai entrambe le istanze aggiornate in tempo reale senza dover aggiornare la pagina. Immagina ora le implicazioni dell'aggiornamento del database e Meteor che aggiorna tutti i client.
Ecco perché Meteor è facile per creare un'esperienza di app davvero reattiva. Gli utenti saranno in grado di vedere l'aggiornamento dei dati in tempo reale in modo collaborativo nel browser.
Il progetto meteor ha un server di pacchetti pubblico di isobuild pacchi. Ciò ti consente di aggiungere rapidamente funzionalità alla tua app Meteor semplicemente installando un pacchetto tramite il meteor aggiunta sintassi.
Meteora può anche aggiungere npm pacchetti via il meteor aggiunta sintassi. Rendiamo il nostro display un po 'più bello nel nostro esempio precedente aggiungendo il momenti pacchetto per una facile formattazione della data.
$ meteor aggiungi momentjs: momento
Ora che hai un momento disponibile nella tua app, puoi semplicemente usarlo. Non è necessario fare alcunché, incluso te stesso.
Modifica il modello HTML in questo modo:
La mia lista di cose da fare La mia lista di cose da fare
> todo#each tasks
- text createdAt
/ogni
Ora aggiorniamo le nostre funzioni di supporto in my_meteor_app.js file:
Tasks = new Mongo.Collection ("tasks"); if (Meteor.isClient) // Questo codice viene eseguito solo sul client Template.todo.helpers (tasks: function () return Tasks.find ();, createdAt: function () return moment (this .createdAt) .fromNow ();); Passa alla finestra del browser e fino a quando il meteora comando è ancora in esecuzione nel terminale vedrete la vostra lista aggiornata con momenti che forniscono la misurazione del tempo. Bello!
L'aggiunta dell'autenticazione OAuth alla tua app è ora davvero semplice. Si può ottenere semplicemente aggiungendo due pacchetti tramite il seguente comando:
$ mete aggiungere account-google $ mete aggiungere account-ui
Una volta aggiunti questi pacchetti alla tua app, puoi semplicemente aggiungere il > loginButtons modello incorporato al tuo my_meteor_app.html file. Ricaricando in un browser vedrai un pulsante per configurare la funzione di accesso di Google. Segui i passaggi forniti e sei pronto per andare: è così facile.
Meteor è una struttura fantastica che sta guadagnando sempre più popolarità, e credo sia facile capire perché, grazie al design semplice e all'implementazione dei pacchetti. La rapida prototipazione delle app in una settimana non è un grosso problema quando hai Meteor nella tua cassetta degli attrezzi.
Se vuoi saperne di più su Meteor, continua a leggere online con la loro eccellente documentazione.
