Share
Ce veți creaMeteor vă oferă un flux de lucru rapid de dezvoltare care va crea aplicații web isomorfe care "funcționează". Arhitectura Meteor este cu adevarat frumoasa prin faptul ca va actualiza simultan toti clientii conectati la aplicatia dvs., direct din cutie. Acest lucru are implicații uriașe pentru crearea de aplicații web reactive.
Meteor este construit cu ușurință în utilizare și, din fericire, această filozofie se desfășoară chiar de la început.
Instalarea este la fel de simplă ca și executarea următoarei comenzi pe sistemele Linux / Mac OS X:
curl https://install.meteor.com/ | SH
Utilizatorii de Windows pot descărca programul de instalare oficială.
Aceasta se face la linia de comandă prin meteor instrument. Pentru a crea o nouă aplicație numită my_meteor_app în directorul dvs. de acasă, procedați în felul următor:
$ meteor crează ~ / my_meteor_app $ cd ~ / my_meteor_app $ meteor
Veți putea accesa aplicația meteorică prin http: // localhost: 3000-port 3000 este implicit.
În mod implicit veți avea următoarele fișiere create:
~ / my_meteor_app: ├───────────────────────────────────────────────────────────────────────────────────────────────────
my_meteor_app.html fișierul conține marcajul necesar pentru afișarea paginii - Meteor folosește o sintaxă de stil pentru brațul de cotitură. Tot codul din fișierele HTML este compilat cu compilatorul Meteor's Spacebars. Barele de spațiu utilizează declarații înconjurate de bretele duble, cum ar fi #fiecare și #dacă pentru a vă permite să adăugați logică și date la vizualizările dvs..
Puteți să transferați date în șabloane din codul dvs. JavaScript definind ajutoare și să repetați matricele pe care le putem folosi #există elemente.
my_meteor_app.js fișierul conține atât JavaScript necesar pentru a porni clientul, cât și serverul. Orice evenimente pentru client sau directive pot fi specificate în acest fișier.
css fișierul este pentru styling aplicația dvs. și, în mod implicit, este necompletat.
Meteor analizează toate fișierele HTML din dosarul aplicației dvs. și identifică trei etichete de nivel superior: , , și .
Totul în orice etichetele sunt adăugate la secțiunea capului HTML trimis clientului și totul înăuntru etichetele se adaugă la secțiunea de caroserie, la fel ca într-un fișier HTML obișnuit.
Totul înăuntru tag-urile sunt compilate în șabloanele Meteor, care pot fi incluse în HTML cu > templateName sau la care se face referire în JavaScript Template.templateName.
Înlocuiți codul HTML implicit cu următoarele:
Lista mea Todo Lista mea Todo
Construit folosind Meteor Framework!
#de sarcini > sarcină / fiecare
text
Aici specificăm a șablon și #fiecare pentru a crea o listă de gloanțe. Finalizați exemplul prin adăugarea la my_meteor_app.js:
dacă Meteor.isClient // Codul rulează aici numai pe client // Alocați unele activități pentru a popula datele dvs. Template.body.helpers (tasks: [text: "Castraveți de plante în gunoi de grajd proaspăt", text: "Mutați avocado în oale mai mari", text: "Du-te de pescuit cu Ben", text: "Ia soția lui yoga", text: "Anulează abonamentul TV"]);
Aruncați o privire în browser-ul dvs. la rezultatul final. Putem acum să continuăm cu implementarea unor date persistente cu o colecție MongoDB.
Meteor face lucrul cu datele ușor. În cazul colecțiilor, datele sunt disponibile în orice parte a codului, deoarece pot fi accesate atât de client, cât și de server. Acest lucru face foarte ușor pentru a scrie o anumită logică de vizualizare și actualizarea automată a paginii.
În Meteor, orice componente de vizualizare care sunt legate de o colecție de date vor afișa automat ultimele modificări ale datelor, deci sunt reactive în timp real.
Schimba-ti my_meteor_app.js fișier pentru a utiliza MongoDB cu următoarele:
Accentsconagua
Sarcini = nou Mongo.Collection ("sarcini"); dacă (Meteor.isClient) // Acest cod rulează numai pe clientul Template.body.helpers (tasks: function () retur Tasks.find ();); Linia Sarcini = nou Mongo.Collection ("sarcini"); spune Meteor să creeze o colecție numită MongoDB sarcini. Repercusiunea pentru acest lucru în Meteor este că pe client creează o conexiune cache la colecția de servere.
Pentru a introduce datele, putem folosi consola serverelor. Pentru a porni de la o nouă fereastră terminal, CD în directorul aplicației dvs. și executați (acest lucru trebuie făcut în timp ce meteorul rulează într-o filă separată):
$ meteor mongo
Acum, în interiorul consolei pentru aplicația dvs. Mongo DB, adăugați o înregistrare cu:
db.tasks.insert (text: "Noua sarcină de la mongo!", createdAt: new Date ());
Aruncați o privire în interiorul browserului pentru a vedea actualizările. Deschideți instrumentele de dezvoltare și în consola executați următoarele:
Tasks.insert (text: "direct la mongo din consola", createAt: new Date ());
Lista dvs. va actualiza acum dinamic pe ecran. Deschideți o fereastră separată a browserului într-o nouă instanță de pe desktop. Rulați o altă inserție în consola.
Veți vedea ambele instanțe actualizate în timp real fără a fi nevoie să actualizați pagina. Imaginați-vă acum implicațiile actualizării bazei de date și actualizarea Meteor a tuturor clienților.
Acesta este motivul pentru care Meteor este ușor de creat o experiență cu adevărat reactivă în aplicații. Utilizatorii vor putea vedea actualizarea datelor în timp real în colaborare în browser.
Proiectul meteorologic are un server public de pachete isobuild pachete. Acest lucru vă permite să adăugați rapid funcționalitatea aplicației dvs. Meteor pur și simplu instalând un pachet prin intermediul meteor adaugă sintaxă.
Meteor poate adăuga și el NPM pachete prin meteor adaugă sintaxă. Să facem afișarea noastră un pic mai frumoasă în exemplul nostru precedent prin adăugarea momente pachet pentru formatarea ușoară a datei.
$ meteor add momentjs: moment
Acum că aveți un moment disponibil în aplicația dvs., puteți să o utilizați. Nu trebuie să faci nici unul, inclusiv pe tine însuți.
Editați șablonul HTML astfel:
Lista mea Todo Lista mea Todo
> todo#de sarcini utile
- text creatAt
/fiecare
Acum actualizăm funcțiile noastre de ajutor în my_meteor_app.js fişier:
Sarcini = nou Mongo.Collection ("sarcini"); dacă Meteor.isClient // Acest cod se execută numai pe clientul Template.todo.helpers (tasks: function () retur Tasks.find (); createAt: function () .createdAt) .fromNow ();); Treceți la fereastra browserului dvs., și atâta timp cât meteor comanda rulează încă în terminalul în care veți vedea lista actualizată cu momentele care oferă măsurarea timpului. Frumos!
Adăugarea autentificării OAuth în aplicația dvs. este acum foarte simplă. Se poate realiza prin adăugarea a două pachete prin următoarea comandă:
$ meteor adăugați conturi-google $ meteor adăugați conturi-ui
Odată ce aceste pachete sunt adăugate în aplicația dvs., puteți adăuga pur și simplu > loginButtons șablon încorporat pentru dvs. my_meteor_app.html fişier. Reîncărcarea într-un browser vă va afișa un buton pentru a configura funcția de conectare Google. Urmați pașii furnizați și sunteți gata să mergeți - este atât de ușor.
Meteor este un cadru fantastic care câștigă din ce în ce mai multă popularitate și cred că este ușor să înțelegem de ce, datorită designului simplu și implementării pachetelor. Aplicațiile rapide de prototipare într-o săptămână nu sunt mari, atunci când aveți Meteor în cutia dvs. de instrumente.
Dacă doriți să aflați mai multe despre Meteor, continuați să citiți online documentația excelentă.
