Share
Vad du ska skapaMeteor ger dig ett snabbt utvecklings arbetsflöde som skapar isomorfa webbapplikationer som bara fungerar. Meteorarkitekturen är verkligen vacker, eftersom den kommer att uppdatera alla klienter som är anslutna till din app samtidigt, rakt ut ur lådan. Detta har stora konsekvenser för att skapa reaktiva webbapps.
Meteor är byggd med användarvänlighet i åtanke, och tack och lov är denna filosofi genomförs redan från början.
Installation är lika enkelt som att köra följande kommando på Linux / Mac OS X-system:
curl https://install.meteor.com/ | sh
Windows-användare kan hämta den officiella installatören.
Detta görs på kommandoraden via meteor verktyg. Skapa en ny app som heter my_meteor_app Gör i din hemkatalog följande:
$ meteor skapa ~ / my_meteor_app $ cd ~ / my_meteor_app $ meteor
Du kommer nu att kunna komma åt din meteorapp via http: // localhost: 3000-port 3000 är standard.
Som standard kommer du att skapa följande filer:
~ / my_meteor_app: ├── my_meteor_app.css ├── my_meteor_app.html └── my_meteor_app.js
De my_meteor_app.html filen innehåller den markering som krävs för att visa sidan-Meteor använder en syntax för handtaget för kantlinjeformat. Hela koden i dina HTML-filer är sammanställd med Meteors Spacebars-kompilator. Mellanslagsbilder använder uttalanden omgivna av dubbla lockiga axlar som #varje och #om att låta dig lägga till logik och data i dina synpunkter.
Du kan skicka data till mallar från din JavaScript-kod genom att definiera hjälpare och att iterera arrayer som vi kan använda #each items.
De my_meteor_app.js filen innehåller både JavaScript som krävs för att starta klienten och servern. Eventuella händelser för kunden eller direktiven kan anges i den här filen.
De css filen är för att styla din app, och som standard är tom.
Meteor analyserar alla HTML-filer i din appmapp och identifierar tre överordnade taggar: , , och .
Allting inne i något Taggar läggs till i huvuddelen av HTML som skickas till klienten, och allt inuti Taggar läggs till i kroppsdelen, precis som i en vanlig HTML-fil.
Allting inne Taggar sammanställs i Meteor mallar, som kan inkluderas i HTML med > templateName eller refereras i din JavaScript med Template.templateName.
Byt standard HTML med följande:
Min Todo lista Min Todo lista
Byggd med Meteor Framework!
#each tasks > task / each
text
Här specificerar vi en mall och #varje loop för att skapa en punktlista. Slutför exemplet genom att lägga till i my_meteor_app.js:
om (Meteor.isClient) // Koden här körs endast på klienten // Tilldela några uppgifter för att fylla i dina data. Template.body.helpers (tasks: [text: "Planterade gurkor i fräskgödsel", text: "Flytta avokado till större krukor", text: "Gå fiske med Ben", text: "Ta fruen till yoga", text: "Avbryt tv-prenumeration"]);
Ta en titt i din webbläsare på det färdiga resultatet. Vi kan nu ta saker vidare genom att genomföra uthålliga uppgifter med en MongoDB-samling.
Meteor gör det enkelt att arbeta med data. Med samlingar är data tillgängliga i någon del av din kod, eftersom den kan nås av både klienten och servern. Det gör det väldigt lätt att skriva lite visningslogik och uppdatera sidan automatiskt.
I Meteor visar eventuella synkomponenter som är länkade till en datainsamling automatiskt de senaste ändringarna i data, så det är realt i realtid.
Ändra din my_meteor_app.js fil att använda MongoDB med följande:
Accentsconagua
Uppgifter = ny Mongo.Collection ("uppgifter"); om (Meteor.isClient) // Denna kod körs endast på klienten Template.body.helpers (tasks: function () return Tasks.find ();); Linjen Uppgifter = ny Mongo.Collection ("uppgifter"); berättar Meteor att ställa in en MongoDB-samling som heter uppgifter. Konsekvensen för detta i Meteor är att på klienten skapas en cachad anslutning till serverns samling.
För att infoga data kan vi använda serverns konsol. För att starta det från ett nytt terminalfönster, CD in i appens katalog och kör (det måste ske medan meteor körs i en separat flik):
$ meteor mongo
Nu, inuti konsolen för din apps Mongo DB, lägg till en post med:
db.tasks.insert (text: "Ny uppgift från mongo!", skapad: ny datum ());
Ta en titt inne i webbläsaren nu för att se uppdateringarna. Öppna verktyget för utvecklare och kör följande i konsolen:
Tasks.insert (text: "straight to mongo from console", skapad: nytt datum ());
Din lista uppdateras nu dynamiskt på skärmen. Öppna ett separat webbläsarfönster i en ny instans på skrivbordet. Kör ett annat inlägg i konsolen.
Du kommer att se båda fallen uppdateras i realtid utan att behöva uppdatera sidan. Föreställ dig följderna nu när du uppdaterar databasen och Meteor uppdaterar alla klienter.
Det är därför Meteor är enkelt att skapa en verkligt reaktiv appupplevelse. Användare kommer att kunna se datauppdatering i realtid tillsammans i webbläsaren.
Meteorprojektet har en allmän paketserver av isobuild paket. Detta gör att du snabbt kan lägga till funktionalitet i din Meteor-app helt enkelt genom att installera ett paket via meteor add syntax.
Meteor kan också lägga till npm paket via meteor add syntax. Låt oss göra vår skärm lite snyggare i vårt tidigare exempel genom att lägga till stunder paket för enkel datumformatering.
$ meteor lägg till moment: moment
Nu när du har ett ögonblick tillgängligt i din app kan du bara använda den. Du behöver inte göra något inklusive dig själv.
Redigera mallen HTML så här:
Min Todo lista Min Todo lista
todo#each tasks
- text createdAt
/varje
Nu uppdaterar vi våra hjälparfunktioner i my_meteor_app.js fil:
Uppgifter = ny Mongo.Collection ("uppgifter"); om (Meteor.isClient) // Den här koden körs endast på klienten Template.todo.helpers (tasks: function () return Tasks.find ();, skapadAt: funktion () .createdAt) .fromNow ();); Byt till ditt webbläsarfönster, och så länge som meteor kommandot körs fortfarande i terminalen kommer du att se din uppdaterade lista med ögonblick som ger tidsmätningen. Trevlig!
Att lägga till OAuth-autentisering till din app är nu väldigt enkelt. Det kan uppnås genom att bara lägga till två paket via följande kommando:
$ meteor lägg till konton-google $ meteor add accounts-ui
När dessa paket har lagts till i din app kan du helt enkelt lägga till > loginButtons inbyggd mall till din my_meteor_app.html fil. Om du laddar om i en webbläsare ser du en knapp för att konfigurera Google-inloggningsfunktionen. Följ de angivna stegen och du är redo att gå - det är så enkelt.
Meteor är en fantastisk ram som får allt mer popularitet, och jag tror att det är lätt att se varför, tack vare den enkla utformningen och implementeringen av paket. Snabba prototypprogram på en vecka är inte så stor när du har Meteor i din verktygslåda.
Om du vill lära dig mer om Meteor, fortsätt läsa online med sin utmärkta dokumentation.
