Meteor 101

Getting Started & Common Pitfalls

My personal experience with Meteor

Created by Thomas Allmer / @daKmoR

Disclamer

I'm coming from the classical Client/Server World

php, mysql, with js only on the client

This is just my personal experience with Meteor

I don't have any online projects - it's just me playing around :p

Index

1. Metoer vs Classical Client/Server
2. Simple Example Application
3. Publish & Subscribe where lives the DATA?
4. autopublish explained
5. insecure explained
6. Example Application+
7. use of reactive "Sessions"
8. Blaze new Redering Engine => Drag and Drop Example
9. Useful Stuff

Meteor vs Classical Client/Server

• Mostly NO CODE difference between Client/Server
• Client has always! almost ALL Code!!! (except server folder)
• CODE changes need a reload
• DATA is the big difference
  • Server publishes DATA
  • Client subscribes and caches DATA
  • DATA changes do NOT need a reload

Simple Example Application

Just some Items with a name rendered in a list

step1

Publish & Subscribe

where lives the DATA?

• Server
  • has ALL DATA
  • decides which to publish
  • syncs changes automatically to all clients
• Client
  • has his OWN Copy of the DATA available to him
  • accumulates this DATA and usually won't throw them away

Publish

Meteor.publish('items-public', function () {
	return Items.find({public: true});
});
					

Publishes only Items which are marked public

Will be pushed to all subscribed Clients

Subscribe

The Client has to subscribe to some published DATA and can then query this subset.

Meteor.subscribe('items-public');

Template.root.items = function() {
	return Items.find({});
};
					

Will only return all DATA available to the Client

Will most likely return something different then if the same query would be executed on the Server

Publish & Subscribe

Demo

If you subscribe to another published DATA set your current local cache might get updated and new things will be displayed.

Reactivity for the win! :)

step2

autopublish

installed by default remove on the console with

$ meteor remove autopublish 
					

Basically published ALL DATA on the Server and subscribes to EVERYTHING on the client

autopublish

executes something like this for EVERY Meteor Collection

// server js
Meteor.publish('items-all', function () {
	return Items.find({});
});
// client js
Meteor.subscribe('items-all');
					

GREAT for prototyping, but no good for a real application

insecure

installed by default remove on the console with

$ meteor remove insecure 
					

Basically allows ALL Database actions to be executed on the client as well.

insecure

executes something like this for EVERY Meteor Collection

Items.allow({
	insert: function() {
		return true;
	},
	update: function() {
		return true;
	},
	remove: function() {
		return true;
	}
});
					

GREAT for prototyping, but no good for a real application

Example Application+

Demo

• new Item Funktion with private setting
• add create and modification date by default
• order by create date
• remove Item

step3

use of reactive "Sessions"

Session "Variables" are reactive, so every change will trigger a rerendering of every affected DATA

Reactivity for the win! :)

Can easily be used for subscribing to DATA, detail lightboxes, themes...

step4

"Blaze" - new Redering Engine

"They say Meteor UI [AKA Blaze, the new Meteor rendering engine] is in preview, but it just works fine for us. It just works."

— Manuel Timita

Some sort of more complex Play Around Thingi

Generic jquery code can be used due to the new Engine

Usefull Stuff

• Use Meteor on Windows: https://github.com/shoebappa/vagrant-meteor-windows
• Excellent Tutorials: https://www.eventedmind.com
• Unoffical FAQ: https://github.com/oortcloud/unofficial-meteor-faq
• Book: https://www.discovermeteor.com/

THE END

THX

BY Thomas Allmer