Meteor.js

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

  • client - pliki przesyłane są do klienta, nie są ładowane na serwer
  • server - pliki serwerowe, strona klienta nie ma do nich dostępu
  • public - folder strony klienta przeznaczony do obrazów, ikon etc. Pliki nie są minifikowane.
  • private - np. pliki tekstowe, dostępne po stronie serwera przez Assets API. 
  • client/compatibility - folder strony klienta dla bibliotek, które korzystają z global scope (wykonywane jako pierwsze).
  • tests - testy, nie są ładowane nigdzie, pozostają lokalne

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

  • musi mieć atrybut name
  • w html {{> templateName}}
  • w js Template.templateName

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

  • kolekcje są w Meteor.js sposobem na przetrzymywanie danych w bazie
  • Dostęp do kolekcji mamy zarówno z poziomu klienta jak i serwera.
  • Zmiana danych w kolekcji domyślnie jest automatycznie propagowana do widoku

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 :

  1. Klient wysyła do serwera żądanie które uruchamia na serwerze metodę walidacyjną zapis do bazy etc.
  2. Następuje symulacja tej metody po stronie klienta próbująca przewidzieć wynik używając dostępnych informacji co powoduje, że wynik (nie zawsze poprawny) pojawia się na ekranie jeszcze przed odpowiedzią z serwera

http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation

Koniec

 

Meteor.js wprowadzenie

By Dariusz Tomaszewski

Made with Slides.com

Meteor.js wprowadzenie

  • 1,056

More from Dariusz Tomaszewski