Wprowadzenie
Czym jest Meteor.js ?
Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community.
http://guide.meteor.com/#what-is-meteor
Podstawowe komendy
meteor | uruchamianie aplikacji |
meteor create <name> | tworzenie projektu |
meteor add/remove <package> | dodawanie paczek |
meteor deploy | deploy projektu na serwer |
meteor mongo | otwiera konsole bazy danych |
meteor help | wyświetla pomoc |
http://docs.meteor.com/#/full/commandline
Struktura aplikacji
http://docs.meteor.com/#/full/structuringyourapp
http://docs.meteor.com/#/full/assets
client/ # Client folder
compatibility/ # Libraries which create a global variable
config/ # Configuration files (on the client)
lib/ # Library files that get executed first
startup/ # Javascript files on Meteor.startup()
stylesheets # LESS files
modules/ # Meant for components, such as form and more(*)
views/ # Contains all views(*)
common/ # General purpose html templates
model/ # Model files, for each Meteor.Collection(*)
private/ # Private files
public/ # Public files
routes/ # All routes(*)
server/ # Server folder
fixtures/ # Meteor.Collection fixtures defined
lib/ # Server side library folder
publications/ # Collection publications(*)
startup/ # On server startup
meteor-boilerplate # Command line tool
Przykłady, źródła
https://themeteorchef.com/snippets/organizing-your-meteor-project/
https://github.com/matteodem/meteor-boilerplate
http://meteor.redandivory.com/#/
https://blog.tableflip.io/large-meteor-projects-best-practices/
Template
Template
Template.history.helpers({
historyItem: function () {
return History.find({}, {
sort: {
date: -1
},
limit: 5
});
}
});
<body>
{{> userDetails}}
{{> history}}
</body>
<template name="userDetails">
...
</template>
<template name="history">
<h2>Last 5 entries</h2>
{{#each historyItem}}
<p>{{ date }} - {{ value }}</p>
{{/each}}
</template>
Kolekcje
Tworzenie kolekcji
MyCollection = new Mongo.Collection('my-collection');
np:
History = new Meteor.Collection('history');
Ten zapis tworzy po stronie serwera kolekcję w MongoDB natomiast po stronie klienta tworzy połączenie z bazą.
Template.history.helpers({
historyItem: function () {
return History.find({}, {
sort: {
date: -1
},
limit: 5
});
}
});
Połączenie z mongoDB
meteor mongo
Ta komenda łączy nas z shellem mongodb co pozwala nam modyfikować bazę z linii komend
db.tasks.insert({a: ‘asd’, b: new Date() })
Wygodnym narzędziem jest również Robomongo
https://robomongo.org/
Eventy
Template.eat.events({
'click #eatWaffelButton': function(e) {
e.preventDefault();
StroopData.update(this._id,
{
$inc: {
total: -1,
eaten: 1
}
})
}
});
Aby obsłużyć event należy użyć
Template.templateName.events
Gdzie w zależności od selektora deklarujemy akcję która ma się wykonać po zdarzeniu np:
Sesja
W celu przechowywania danych w sesji stosujemy:
Session.set('key', value);
Aby uzyskać dane z klucza należy wykonać :
Session.get('key');
Sesja pozwala nam przechowywać dane nie zaprzęgając do tego bazy jednak nie jest to najelpsza praktyka wg dokumentacji meteora
Dodawanie użytkowników
Dodawanie użytkownikow jest bardzo proste, przykładowo aby dodać logowanie za pomocą konta google należy :
meteor add accounts-ui
meteor add accounts-google
Zainstalować dwie paczki
Dodać przyciski do template
{{> loginButtons}}
Skonfigurować oAuth w google zgodnie z instrukcją która się pojawi
Obsługa użytkowników
W HTML do pokazywania elemetów w zależności od tego czy użytkownik jest zalogowany używamy helpera :
{{ currentUser }}
W js w celu uzyskania obiektu aktualnie zalogowanego użytkownika bądź jego id używamy:
Meteor.user()
Meteor.userId()
Security
Domyślnie aplikacja meteorowa daje dostęp bezpośrednio do metod insert update i remove po stronie klienta. Jeśli chcemy zapewnić danym większe bezpieczeństwo należy :
meteor remove insecure
Usunąć pakiet insecure
Stworzyć metody modyfikacji danych po stronie serwera używając Meteor.methods:
Meteor.methods({
addWaffel: function(amount) {
var amountToSave = parseInt(amount, 10);
if(amount) {
StroopData.update({userId: this.userId},
{$inc: {total: amountToSave}});
}
}
});
Optimistic UI
Wywołując metodę po stronie serwera automatycznie dzieją się dwie rzeczy :
http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation