Share
Hva du skal skapeMeteor gir deg en rask utviklings arbeidsflyt som vil skape isomorfe webapplikasjoner som bare fungerer. Meteorarkitekturen er virkelig vakker fordi den vil oppdatere alle klienter som er koblet til appen din samtidig, rett ut av boksen. Dette har store implikasjoner for å opprette reaktive webapps.
Meteor er bygget med brukervennlighet i tankene, og heldigvis er denne filosofien gjennomført helt fra begynnelsen.
Installasjon er like enkelt som å kjøre følgende kommando på Linux / Mac OS X-systemer:
krølle https://install.meteor.com/ | sh
Windows-brukere kan laste ned det offisielle installasjonsprogrammet.
Dette gjøres på kommandolinjen via meteor verktøy. For å opprette en ny app som heter my_meteor_app i din hjemmekatalog, gjør følgende:
$ meteor opprette ~ / my_meteor_app $ cd ~ / my_meteor_app $ meteor
Du vil nå kunne få tilgang til meteorappen din via http: // localhost: 3000-port 3000 er standard.
Som standard vil du ha følgende filer opprettet:
~ / my_meteor_app: ├── my_meteor_app.css ├── my_meteor_app.html └─ - my_meteor_app.js
De my_meteor_app.html Filen inneholder oppslaget som kreves for å vise siden. Meteor bruker en syntaks for stilig stilig håndtak. Alle koden i HTML-filene dine er kompilert med Meteors Spacebars-kompilator. Mellomrom bruker uttalelser omgitt av dobbelt krøllete braces som #Hver og #hvis for å la deg legge til logikk og data i dine synspunkter.
Du kan overføre data til maler fra JavaScript-koden din ved å definere hjelpere, og for å gjenskape arrays vi kan bruke #each elementer.
De my_meteor_app.js filen inneholder både JavaScript som kreves for å starte klienten og serveren. Eventuelle hendelser for klienten eller direktivene kan spesifiseres i denne filen.
De css filen er for styling din app, og som standard er tom.
Meteor analyserer alle HTML-filene i app-mappen din og identifiserer tre toppnivåetiketter: , , og .
Alt inni noen Etiketter legges til hovedenheten i HTML-en som sendes til klienten, og alt inni Tagger er lagt til i kroppsdelen, akkurat som i en vanlig HTML-fil.
Alt inni Tagger er kompilert i Meteor maler, som kan inkluderes inne i HTML med > templateName eller referert i JavaScript med Template.templateName.
Erstatt standard HTML med følgende:
Min Todo List Min Todo List
Bygget ved hjelp av Meteor Framework!
#each tasks > oppgave / each
tekst
Her spesifiserer vi en mal og #Hver sløyfe for å lage en punktliste. Fullfør eksemplet ved å legge til i my_meteor_app.js:
hvis (Meteor.isClient) // Koden her kjører kun på klienten // Tilordne noen oppgaver for å fylle ut dataene dine Template.body.helpers (oppgaver: [text: "Plante agurker i fersk gjødsel", text: "Flytt avocados til større potter", text: "Go Fishing with Ben", text: "Ta kona til yoga", text: "Avbryt TV-abonnement"]);
Ta en titt i nettleseren din på det ferdige resultatet. Vi kan nå ta ting videre ved å gjennomføre vedvarende data med en MongoDB-samling.
Meteor gjør det enkelt å jobbe med data. Med samlinger er dataene tilgjengelige i hvilken som helst del av koden din, da den kan nås av både klienten og serveren. Dette gjør det veldig enkelt å skrive noen visningslogikk og få siden til å oppdatere seg automatisk.
I Meteor vil eventuelle visningskomponenter som er koblet til en datainnsamling automatisk vise de siste endringene i dataene, så det er reaksivt i sanntid.
Forandre din my_meteor_app.js fil for å bruke MongoDB med følgende:
Accentsconagua
Oppgaver = ny Mongo.Collection ("oppgaver"); if (Meteor.isClient) // Denne koden kjører kun på klienten Template.body.helpers (oppgaver: funksjon () return Tasks.find ();); Køen Oppgaver = ny Mongo.Collection ("oppgaver"); forteller Meteor å sette opp en MongoDB-samling som heter oppgaver. Konsekvensen for dette i Meteor er at det på klienten oppretter en hurtigkoblet tilkobling til serverkolleksjonen.
For å sette inn data kan vi bruke serverkonsollen. For å starte det fra et nytt terminalvindu, cd i appens katalog og kjør (dette må gjøres mens meteor kjører i en egen fane):
$ meteor mongo
Nå, inne i konsollen for appens Mongo DB, legg til en post med:
db.tasks.insert (text: "Ny oppgave fra mongo!", opprettetAt: ny dato ());
Ta en titt inne i nettleseren nå for å se oppdateringene. Åpne verktøylinjer og i konsollen kjør følgende:
Tasks.insert (text: "straight to mongo from console", opprettetAt: ny dato ());
Listen din oppdateres nå dynamisk på skjermen. Åpne et eget nettleservindu i en ny forekomst på skrivebordet ditt. Kjør en annen innsats inn i konsollen.
Du vil se begge forekomster oppdatere i sanntid uten å måtte oppdatere siden. Tenk på implikasjonene nå ved å oppdatere databasen og Meteor oppdaterer alle klienter.
Derfor er Meteor enkelt for å skape en virkelig reaktiv appopplevelse. Brukere vil kunne se dataoppdatering i sanntid samarbeidende i nettleseren.
Meteorprosjektet har en offentlig pakke server av isobuild pakker. Dette gjør at du raskt kan legge til funksjonalitet i Meteor-appen din ved å installere en pakke via meteor add syntaks.
Meteor kan også legge til NPM pakker via meteor add syntaks. La oss gjøre skjermen litt finere i vårt forrige eksempel ved å legge til øyeblikk pakke for enkel datoformatering.
$ meteor legg til momentjs: øyeblikk
Nå som du har øyeblikk tilgjengelig i appen din, kan du bare bruke den. Du trenger ikke å gjøre noe inkludert deg selv.
Rediger mal HTML slik:
Min Todo List Min Todo List
todo#each oppgaver
- text createdAt
/Hver
Nå oppdaterer vi våre hjelperfunksjoner i my_meteor_app.js fil:
Oppgaver = ny Mongo.Collection ("oppgaver"); hvis (Meteor.isClient) // Denne koden kjører bare på klienten Template.todo.helpers (oppgaver: funksjon () return Tasks.find ();, createdAt: function () return moment .createdAt) .fraNow ();); Bytt til nettleservinduet, og så lenge som meteor kommandoen kjører fortsatt i terminalen, du vil se din oppdaterte liste med øyeblikk som gir tidsmåling. Hyggelig!
Å legge til OAuth-godkjenning i appen din er nå veldig enkelt. Det kan oppnås ved å bare legge til to pakker via følgende kommando:
$ meteor legg til kontoer-google $ meteor add accounts-ui
Når disse pakkene er lagt til i appen din, kan du bare legge til > loginButtons innebygd mal til din my_meteor_app.html fil. Opplasting i en nettleser vil du se en knapp for å konfigurere Google-påloggingsfunksjonen. Følg trinnene som er oppgitt, og du er klar til å gå - det er så enkelt.
Meteor er et fantastisk rammeverk som får mer og mer popularitet, og jeg tror det er lett å se hvorfor, på grunn av den enkle utformingen og implementeringen av pakker. Rapidly prototyping apps i en uke er ikke så farlig når du har Meteor i verktøykassen.
Hvis du vil lære mer om Meteor, fortsett å lese online med sin gode dokumentasjon.
