Share
Wat je gaat creërenMeteor biedt u een snelle ontwikkelingsworkflow waarmee u isomorfe webapps kunt maken die 'gewoon werken'. De Meteor-architectuur is echt mooi omdat alle clients die met uw app zijn verbonden, meteen uit de verpakking worden bijgewerkt. Dit heeft enorme gevolgen voor het maken van reactieve web-apps.
Meteor is gebouwd met gebruiksgemak in het achterhoofd, en gelukkig is deze filosofie vanaf het begin doorgevoerd.
Installatie is net zo eenvoudig als het uitvoeren van de volgende opdracht op Linux / Mac OS X-systemen:
krullen https://install.meteor.com/ | sh
Windows-gebruikers kunnen het officiële installatieprogramma downloaden.
Dit gebeurt op de commandolijn via de meteoor tool. Om een nieuwe app met de naam te maken my_meteor_app in uw thuismap, doe het volgende:
$ meteor create ~ / my_meteor_app $ cd ~ / my_meteor_app $ meteor
Je hebt nu toegang tot je meteor-app via http: // localhost: 3000-poort 3000 is de standaard.
Standaard zijn de volgende bestanden gemaakt:
~ / my_meteor_app: ├── my_meteor_app.css ├── my_meteor_app.html └── my_meteor_app.js
De my_meteor_app.html bestand bevat de markup die nodig is om de pagina weer te geven-Meteor maakt gebruik van een syntaxis van een krul-haakjesstijl in het stuur. Alle code in uw HTML-bestanden is gecompileerd met de Spacebars-compiler van Meteor. Spatiebalk gebruikt uitspraken die zijn omgeven door dubbele accolades zoals #elk en #als om u logica en gegevens toe te voegen aan uw opvattingen.
U kunt gegevens uit uw JavaScript-code omzetten in sjablonen door helpers te definiëren en reeksen die we kunnen gebruiken te herhalen #each items.
De my_meteor_app.js bestand bevat zowel de vereiste JavaScript om de client te starten als de server. Eventuele gebeurtenissen voor de klant of richtlijnen kunnen in dit bestand worden gespecificeerd.
De css bestand is voor het stylen van uw app en is standaard leeg.
Meteor parseert alle HTML-bestanden in uw app-map en identificeert drie hoofdlabels: , , en .
Alles binnen elk tags worden toegevoegd aan de kopsectie van de HTML die naar de client wordt verzonden, en alles wat erin zit tags worden toegevoegd aan de hoofdgedeelte, net als in een normaal HTML-bestand.
Alles binnen tags worden gecompileerd in Meteor-sjablonen, die kunnen worden opgenomen in HTML met > templateName of waarnaar wordt verwezen in uw JavaScript met Template.templateName.
Vervang de standaard HTML door het volgende:
Mijn Todolijst Mijn Todolijst
Gebouwd met behulp van Meteor Framework!
#each tasks > task / each
tekst
Hier specificeren we een sjabloon en #elk lus om een lijst met opsommingstekens te maken. Beëindig het voorbeeld door toe te voegen aan de my_meteor_app.js:
if (Meteor.isClient) // Code hier werkt alleen op de client // Taken toewijzen om uw gegevens te vullen Template.body.helpers (tasks: [text: "Plant komkommers in verse mest", text: "Verplaats avocado's naar grotere potten", text: "Ga vissen met Ben", text: "Neem de vrouw mee naar yoga", text: "Annuleer tv-abonnement"]);
Kijk in je browser naar het eindresultaat. We kunnen nu verder gaan door persistente gegevens te implementeren met een MongoDB-verzameling.
Meteor maakt het werken met gegevens eenvoudig. Met collecties zijn de gegevens beschikbaar in elk deel van uw code, omdat deze zowel door de client als door de server kan worden geopend. Dit maakt het heel gemakkelijk om een aantal logica te schrijven en de pagina automatisch bij te werken.
In Meteor zullen alle weergavecomponenten die aan een gegevensverzameling zijn gekoppeld automatisch de nieuwste wijzigingen in de gegevens weergeven, zodat deze in realtime reageren.
Verander jouw my_meteor_app.js bestand om MongoDB te gebruiken met het volgende:
Accentsconagua
Taken = nieuwe Mongo.Collection ("taken"); if (Meteor.isClient) // Deze code kan alleen op de client worden uitgevoerd Template.body.helpers (tasks: function () return Tasks.find ();); De lijn Taken = nieuwe Mongo.Collection ("taken"); vertelt Meteor dat hij een MongoDB-verzameling met de naam moet opzetten taken. De weerslag daarvoor in Meteor is dat het op de client een gecachte verbinding met de serververzameling maakt.
Om gegevens in te voegen, kunnen we de servers-console gebruiken. Om het vanuit een nieuw terminalvenster te starten, CD in de directory van uw app en uitvoeren (dit moet worden gedaan terwijl meteor op een apart tabblad wordt uitgevoerd):
$ meteor mongo
Voeg in de console voor de Mongo DB van uw app een record toe met:
db.tasks.insert (text: "New task from mongo!", createdAt: new Date ());
Neem nu een kijkje in de browser om de updates te bekijken. Open ontwikkelaarstools en voer in de console het volgende uit:
Tasks.insert (text: "straight to mongo from console", createdAt: new Date ());
Uw lijst wordt nu dynamisch bijgewerkt op het scherm. Open een nieuw browservenster in een nieuw exemplaar op uw bureaublad. Voer een ander inzetstuk uit in de console.
U zult beide exemplaren in realtime bijwerken zonder de pagina te moeten vernieuwen. Stel je de implicaties voor van het updaten van de database en het updaten van alle clients door Meteor.
Dit is de reden waarom Meteor eenvoudig is om een echt reactieve app-ervaring te creëren. Gebruikers kunnen in realtime samen met de browser gegevens bijwerken in samenwerking.
Het meteorproject heeft een openbare pakketserver van isobuild pakketjes. Hiermee kunt u snel functionaliteit aan uw Meteor-app toevoegen door eenvoudig een pakket via de meteoor toevoegen syntaxis.
Meteoor kan ook toevoegen NPM pakketten via de meteoor toevoegen syntaxis. Laten we onze weergave een beetje mooier maken in ons vorige voorbeeld door de momenten pakket voor eenvoudige datumopmaak.
$ meteor voegt momentjs toe: moment
Nu dat je moment beschikbaar hebt in je app, kun je het gewoon gebruiken. U hoeft uzelf niet mee te nemen.
Bewerk de HTML van de sjabloon als volgt:
Mijn Todolijst Mijn Todolijst
> todo#each tasks
- text createdAt
/elk
Nu werken we onze helperfuncties bij in de my_meteor_app.js het dossier:
Taken = nieuwe Mongo.Collection ("taken"); if (Meteor.isClient) // Deze code wordt alleen op de client uitgevoerd Template.todo.helpers (tasks: function () return Tasks.find ();, createdAt: function () return moment (this .createdAt) .fromNow ();); Schakel over naar uw browservenster, en zo lang als de meteoor commando loopt nog steeds in de terminal, u zult uw bijgewerkte lijst zien met momenten die de tijdmeting leveren. Leuk!
OAuth-authenticatie aan uw app toevoegen is nu heel eenvoudig. Het kan worden bereikt door gewoon twee pakketten toe te voegen via het volgende commando:
$ meteor add accounts-google $ meteor add accounts-ui
Zodra deze pakketten aan uw app zijn toegevoegd, kunt u eenvoudig de > loginButtons ingebouwde sjabloon voor uw my_meteor_app.html het dossier. Opnieuw laden in een browser ziet u een knop om de Google-inlogfunctie te configureren. Volg de gegeven stappen en je bent klaar om te gaan - zo eenvoudig is het.
Meteor is een fantastisch raamwerk dat steeds populairder wordt, en ik geloof dat het gemakkelijk in te zien is waarom, vanwege het eenvoudige ontwerp en de implementatie van pakketten. Snel prototypen van apps in een week is geen probleem als je Meteor in je gereedschapskist hebt.
Als u meer wilt weten over Meteor, lees dan online met hun uitstekende documentatie.
