Accentsconagua

Cos'è questa cosa da meteorite?

Codice
Share

Ultimamente, c'è stata una notevole quantità di buzz intorno a una nuova piattaforma web, chiamata Meteor. In questo articolo, spiegherò di cosa si tratta e perché dovresti considerarlo per le tue future applicazioni!

Cominciando dall'inizio

Non pensare a Meteor come a un gestore di pacchetti, perché è molto più potente di così!

Meteor è un framework JavaScript, costruito attorno a molti piccoli pacchetti, alcuni dei quali potrebbero già essere utilizzati, come MongoDB o jQuery. Ma non pensare a Meteor come a un gestore di pacchetti, perché è molto più potente di così! Meteor ha personalizzato questi pacchetti in quelli che definiscono "pacchetti intelligenti" che comunicano perfettamente tra loro.

Meteor è di gran lunga l'ambiente di sviluppo più semplice da installare, con solo un comando a una riga che installa un database, un server di sviluppo e un programma a riga di comando, che si occupa della creazione e distribuzione delle applicazioni. Ti mostrerò come installarlo in un po '.

Se dovessi definire, in breve, come Meteor può aiutarti, dovrei dire che è la velocità con cui puoi sviluppare le tue applicazioni. I siti, che richiedevano migliaia di linee di codice, ne impiegano solo poche centinaia in Meteor. Lo fa combinando tre caratteristiche chiave principali:

  1. Meteor è "Realtime by Design"
  2. "Accesso al database" dal client
  3. "Compensazione della latenza"

Combinando queste tre caratteristiche insieme, lo staff meteorico ha creato una struttura molto potente e un approccio completamente nuovo alla programmazione. Ora vediamo cosa significano ciascuno di questi.

1 - "Realtime by Design"

In Meteor, non si programmano routine e funzioni, si programmano gli elementi della pagina. È molto orientato ai componenti, nel senso di insegnare a Meteor come dovrebbe funzionare qualcosa, e si prenderà cura di aggiornare la pagina in tempo reale. Ciò significa che non è necessario scrivere alcun codice di manipolazione AJAX o DOM, risparmiando una notevole quantità di tempo.

In questo tutorial userò Meteor così com'è, senza personalizzarne i pacchetti. Il plug-in di template predefinito per la disposizione dei componenti è Handlebars. In Handlebars, si creano modelli per i componenti e Meteor li elaborerà in fase di runtime e genererà HTML dinamico. Costruiamo un'applicazione Meteor che accetta una serie di oggetti JSON, uno per ciascun prodotto, e visualizza il nome, il prezzo e la disponibilità. Per iniziare, installerò Meteor e creerò un nuovo progetto.

Innanzitutto, apri una finestra di Terminale e digita i seguenti comandi:

 curl install.meteor.com | / bin / sh meteor crea prodotti cd

All'interno della directory del progetto, troverai tre file: un file JavaScript, HTML e CSS. Apri il file HTML e sostituiscilo con il seguente:

  Prodotti   > Prodotti

In alto, abbiamo creato un modello per i nostri prodotti, che in pratica scorre solo attraverso ciascuno di essi e mostra il nome, il prezzo e la disponibilità. Ora apriamo il file JavaScript e sostituiamo tutto all'interno del file Meteor.is_client Se dichiarazione:

 var Products = new Array (Nome: "Screw Driver", Prezzo: "1,50", InStock: true, Nome: "Hammer", Prezzo: "3.00", InStock: false); Template.Products.ProductArr = function () return Products; ;

Qualunque cosa sia dentro Meteor.is_client la sezione viene eseguita solo sul client. La maggior parte del nostro codice verrà inserita qui. Il JavaScript è ciò che potreste aspettarvi: un array per contenere i prodotti e il ProductsArr variabile che abbiamo definito nel modello. Per testare la tua applicazione, digita semplicemente "meteora"nel Terminale e Meteor avvierà il server di sviluppo per testare la tua applicazione.

Quindi potreste dire che questo è piuttosto interessante, ma in pratica è solo la funzionalità standard di Handlebars - e l'abbiamo già visto prima. Tuttavia, è ciò che Meteor sta facendo in background che è la parte veramente interessante. Meteor riconosce che questa sezione della pagina si basa su Prodotti array, quindi controllerà quella variabile e, ogni volta che cambierà (aggiungendo un oggetto) Meteor aggiornerà automaticamente la pagina con le nuove modifiche ... in tempo reale! Non è tutto; se dovessi aggiungere un gestore di eventi a questi prodotti, non dovresti iniziare a indovinare quale pulsante l'utente ha premuto, aggiungendo attributi personalizzati o leggendo il DOM, perché Meteor chiama l'evento sull'oggetto stesso - quindi hai accesso alle sue proprietà.

Per dimostrarlo, aggiungiamo un avviso di conferma quando un utente fa clic su un prodotto. Aggiungi il seguente codice dopo la funzione precedente:

 Template.Products.events = "click .Product": function () if (this.InStock) confirm ("Vuoi comprare un" + this.Name + "per" + this.Price + "$") ; altro avviso ("Quell'oggetto non è disponibile"); ;

Questa funzione viene richiamata sull'oggetto originale, non sull'elemento di pagina, consentendo in tal modo di iniziare a lavorarci senza dover prima determinare quale prodotto corrisponde all'elemento cliccato. Un'altra cosa che vale la pena sottolineare è che stiamo usando le regole CSS, quando dichiariamo eventi in Meteor. Ciò significa utilizzare i periodi per le classi, i simboli di sterlina per gli ID e il nome del tag per gli elementi HTML.

2 - Database ovunque

Meteor viene fornito con una versione di MongoDB che funziona sia sul server che sul client.

Per impostazione predefinita, Meteor viene fornito con una versione di MongoDB che funziona sia sul server che sul client. Sul server funziona come ci si potrebbe aspettare, ma il database sul client è più di uno pseudo-database. Ciò che intendo è che Meteor ha un'API scritta per simulare l'API di Mongo, ma per un database personalizzato che viene memorizzato nella cache sul client. Ciò consente di inviare sottoinsiemi di dati. Ad esempio, se vuoi che l'utente abbia determinate righe, o non desideri inviare la colonna della password, Meteor ti permette semplicemente di "pubblicare" le informazioni che desideri e Meteor la tratterà come un database sul client , permettendoti di rendere la tua applicazione più veloce e più sicura!

Inserendo il database sul client, è possibile alimentare il database direttamente nella pagina HTML. Ad esempio, nell'esempio precedente, invece di ottenere i prodotti da un array, possiamo alimentare il prodotti Banca dati. Quindi, ogni volta che il database cambia, gli aggiornamenti verranno inviati in tempo reale a tutti i client.

Per integrare questo nella nostra applicazione, prima dobbiamo aggiungere il database alla parte superiore della nostra applicazione, prima del is_client Se dichiarazione, perché il database è per il client e il server. Aggiungi il seguente codice:

 var Products = new Meteor.Collection ("Prodotti");

Successivamente, è possibile eliminare il Prodotti array che abbiamo creato in precedenza e modificare il file ProductsArr funzione per assomigliare al seguente:

 Template.Products.ProductArr = function () return Products.find (, sort: Name: 1); ;

Un altro vantaggio per avere il database sul client è che consente di utilizzare l'API di ordinamento di MongoDB per ordinare automaticamente gli elementi sulla pagina a livello di database, il che, ancora una volta, consente di risparmiare molto più tempo durante lo sviluppo dell'applicazione. Puoi aggiungere record nel codice o nella console del tuo browser. Ad ogni modo, useresti il inserire comando sul Prodotti variabile. Ecco un esempio:

 Products.insert (Nome: "Hammer", Prezzo: 4,50, InStock: true); Products.insert (Name: "Wrench", Price: 2.70, InStock: true); Products.insert (Name: "Screw Driver", Price: 3,00, InStock: false); Products.insert (Name: "Drill", Price: 5.25, InStock: true);

Ho usato la console di Google Chrome per inserire questo codice, anche se puoi sicuramente farlo anche nel tuo editor.

3 - Compensazione della latenza

Meteor aggiornerà la tua interfaccia utente in tempo reale.

Infine, veniamo al risarcimento per la latenza di Meteor. Ormai sappiamo che possiamo definire gli elementi, collegarli a un database e Meteor aggiornerà automaticamente il tuo sito. Ma collegare la tua applicazione così strettamente a un database può rappresentare un problema serio. Se l'applicazione cambia solo quando il database funziona, allora potrebbe esserci un po 'di ritardo tra quando l'utente fa clic su qualcosa, quando le modifiche vengono trasferite al database e restituite all'applicazione. Questo può rendere il tuo sito più lento del dovuto.

Bene, il team Meteor ci ha già pensato; hanno creato ciò a cui si riferiscono come "Latency Compensation". Quando invii qualcosa al database, Meteor fingerà immediatamente di aver ricevuto i nuovi aggiornamenti dal database e aggiornerà l'interfaccia utente in tempo reale. In questo modo, Meteor non ha bisogno di aspettare che il database si aggiorni e gli utenti vedranno immediatamente le modifiche man mano che le fanno. Nella rara occasione in cui l'aggiornamento non raggiunge il server, Meteor riconcilia i dati e invia gli aggiornamenti al browser, senza che sia necessario scrivere una singola riga di codice.

Per finire con questo tutorial, aggiungiamo un carrello, allo scopo di visualizzare la compensazione della latenza in azione. Innanzitutto, aggiungiamo l'HTML per il carrello:

  > Prodotti > Carrello

Ora, aggiungeremo il JavaScript necessario per farlo funzionare:

 var Cart = new Meteor.Collection ("Carrello"); Template.Cart.CartItems = function () return Cart.find (, sort: Name: 1); ; Template.Cart.Total = function () return this.Price * this.Quantity; ; Template.Cart.SubTotal = function () var Items = Cart.find (); var Sum = 0; Items.forEach (funzione (elemento) somma + = oggetto.prezzo * valore articolo;); return Sum; ;

Questo JavaScript è abbastanza semplice. La prima riga aggiunge il Carrello raccolta, la funzione successiva collega il database al carrello, la terza funzione restituisce il prezzo totale per ogni articolo nel carrello e la funzione finale restituisce il totale parziale per la parte inferiore del carrello.

L'ultima cosa di cui abbiamo bisogno, per fare di questo una demo completamente funzionale, è quella di modificare l'evento che abbiamo fatto quando l'utente fa clic su un prodotto e fargli aggiungere l'articolo al carrello. Ecco il gestore di eventi completo:

 Template.Products.events = "click .Product": function () if (this.InStock) if (Cart.find (Name: this.Name, Price: this.Price). Count ()> 0 ) if (conferma ("Volete comprare un altro" + this.Name)) Cart.update (Nome: this.Name, Prezzo: this.Prezzo, $ inc: Quantità: 1);  else if (conferma ("Vuoi comprare un" + this.Name + "per" + this.Price + "$")) Cart.insert (Name: this.Name, Price: this.Price, Quantità: 1);  altro avviso ("Quell'oggetto non è in magazzino"); ;

E il gioco è fatto! Una pagina di prodotto e un carrello della spesa in poche righe di codice. Strutturando la struttura in questo modo, il tuo codice non è solo più breve, ma elegante. Sfortunatamente, nella versione di Meteor al momento in cui scrivo, "upserting" nel database non è stato ancora implementato, quindi ho dovuto verificare manualmente se il prodotto fosse già nel carrello o no.

Distribuzione

Ora che hai creato la tua app, è ora di distribuirla sul web. Meteor ci fornisce due opzioni:

  • Usa i loro server gratuiti, che lo staff di Meteor ha creato
  • Distribuirlo su qualsiasi server su cui sono installati NodeJS e MongoDB. Ciò ti consente di distribuire l'app su qualsiasi server al quale hai accesso.

Distribuzione ai server di Meteor

La distribuzione sui loro server gratuiti è facile. Tutto quello che devi fare è digitare: "meteor distribuire yourSitesName.meteor.com"Fornirà un nome host gratuito e caricherà la tua applicazione per eseguirla. Puoi anche utilizzare questa opzione con il tuo nome di dominio personalizzato, come" YourSite.com ", ma poi dovrai modificare le impostazioni DNS del tuo sito in puntare a origin.meteor.com.

Distribuzione sul proprio server

L'altra opzione è quella di eseguirlo sul tuo server, che puoi eseguire digitando: "fascio di meteoriti."Questo impacchetterà tutti i file necessari che saranno necessari per l'esecuzione, quindi sarà necessario configurare il database MongoDB e le dipendenze NodeJS. Il team Meteor ha incluso un LEGGIMI nel pacchetto, quando impacchetta la tua applicazione. Questo file fornirà istruzioni esatte per far funzionare la tua applicazione.

Per un esempio di un sito completo in Meteor, ho creato un sito demo, chiamato "Compiti"; puoi vedere la fonte su GitHub qui, o visualizzare la demo live su schedule.meteor.com. Un ringraziamento speciale ai ragazzi di watracz.com per aver realizzato il design.

Conclusione

Per riassociare:

  • Non scrivi Ajax
  • Nessuna manipolazione DOM
  • Accesso al database sul client
  • Automaticamente in tempo reale
  • Piattaforma aperta

Anche se Meteor è ancora nella sua infanzia (beta), non c'è nulla che tu non possa andare in giro. La quantità di tempo che Meteor salva nella tua applicazione giustifica il raro caso in cui potresti aver bisogno di scrivere una soluzione alternativa. Con una pubblicazione completa prevista in meno di un anno, tutti gli attuali bug o bug diventeranno rapidamente una cosa del passato.

Spero ti sia piaciuto questo tutorial; Se hai qualche domanda, sentiti libero di lasciare un commento nella sezione commenti qui sotto, e farò del mio meglio per aiutarti!

Codice
×