meteor presentation

What’s that?

Full stack pure JS framework for building awesome apps in no time.

What’s inside?

- MongoDB- Node JS- lots of packages- ...

Why is Meteor awesome?

- Installation as simple as it can be- Build reactive(???) apps in no time- Build mobile(???) apps in no time- Deployment using 1 command

First things first

Installing meteor takes a few seconds:

curl https://install.meteor.com/ | sh

First things first

Creating new app also takes couple of seconds

meteor create app-name

What’s next?

- Adding packages https://atmospherejs.com/ - Building your application- Deploying to server- Enjoying the app created in less than a day

Packages

- Adding packages was made real simple just find your desired package and type meteor add <package>

- There are some useful packaged that are required almost in every app: accounts-base, jquery, less

- meteor remove to remove package- meteor list to list all added packages

Meteor app structure

Basically it is up to you, but meteor has some standards anyways. 4 main entities: - lib- client- server- public

Meteor app structure

- For code accessed both from server and client side these can be used

Meteor.isClient and Meteor.isServer

Meteor templates

- Uses Blaze template engine

- Basically looks like this : - Forget about random

logic in templates.- Everything happens with

helpers

Meteor template helpers

- Helpers help to store logic outside of templates making them super readable

Helper

Template with name ‘user_view’

Meteor template helpers

So basically this won’t work

but

+ will work

Isn’t it a bit complicated?

Meteor template events

- Events are assigned to elements only in particular template.

- Structure similar to helpers

Meteor collections

- Collections are defined really simple MyCollection = new Meteor.Collection('collection-name-in-mongo')

- After that MyCollection.[insert|update|remove] methods are available both from client and server side. They can basically be fired by any user from console in browser (WHAT?)

Meteor collections

“OMG Meteor must be so insecure if it lets anyone to fire insert events into database #notGonnaUseIt”

Meteor collections

- “autopublish” and “insecure” - why these two packages are needed?

- Both should be disabled in production- Publications and Subscriptions should be

used.

Publications and Subscriptions

Simple : publication describes what data user will be allowed to read from Mongo collection, and subscription subscribes to that data.

Publications and Subscriptions

Calling Meteor methods securely

Client side

Server side

Meteor as MVC framework?

- This is actually possible to have javascript MVC framework.

- meteor add iron:router- How does it work?

Meteor as MVC framework?

Set global configs

Define route

Check out this great tutorial. It has basically everything you need to know in it:http://manuel-schoebel.com/blog/iron-router-tutorial

How to use iron router controller?

Actions before

Waiting for data from Mongo

Data returned to view (defined in routes.js)

How to use iron router controller?

ID passed from controller as data



Recap

So what do we have now?- can create new app- can create app structure- can create some views- can create collections- can create routes to views- Can we create a simple app?

Let’s create simple chat app

1. meteor create chat-app2. Let’s add necessary

packagesa. meteor add accounts-facebookb. meteor add iron:router

3. Lets think about this simple app structure

Let’s create simple chat app

Let’s start with collections

Let’s create simple chat app

Let’s add secure chat message add method.

As we can see non-logged in user won’t able to post messages.

Let’s create simple chat app

Let’s start with collections

Here we have only subscription and publication. Usually they’re kept under publications on server.

Let’s create simple chat app

Let’s define a route to our chat view (which will be created) (client/routes.js) | (client/controllers/ChatController.js)

Let’s create simple chat app

We’ll need to create real simple template for our app (client/templates/chat/chat.html)

Let’s create simple chat app

Binding events / helpers to elements (client/templates/chat/chat.js)

Let’s create simple chat app

And that’s basically it. Apply some designs and enjoy your real time reactive chat app.

Deploy to server

Two approaches known to me- use <appname>.meteor.com (if it is still free)- use your own server with MongoDB/node/..- use Meteor-up (mup package)

Deploy to server

The one I used is mup. Install it withnpm install -g mup

After install just “mup init” and change config in mup.json to match your setup. Full docs https://github.com/arunoda/meteor-up

Is there anything else I can do?

There’s one more cool feature in meteor that should be mentioned. It can wrap your web application (such as this simple chat) and create a mobile APP just with couple of commands.

Why do I need that?

Q: Isn’t it better to write a native application?A: Well, probably. But if you are short on resources or just lazy you can use this option, basically it is the same as opening your web page in browser.

And thats it?

Q: Simple wrapper for full screen browser?A: Yes and no. Meteor has access to almost all phone’s functions through Cordova plugins from Apache. http://plugins.cordova.io/#/

To wrap up

- fast- easy development/prototyping- pure javascript- full stack- reactive- has lots of packages- easily portable to mobile platforms