meteor presentation

39

Upload: scandiweb

Post on 12-Jul-2015

369 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Meteor presentation
Page 2: Meteor presentation

What’s that?

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

Page 3: Meteor presentation

What’s inside?

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

Page 4: Meteor presentation

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

Page 5: Meteor presentation

First things first

Installing meteor takes a few seconds:

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

Page 6: Meteor presentation

First things first

Creating new app also takes couple of seconds

meteor create app-name

Page 7: Meteor presentation

What’s next?

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

Page 8: Meteor presentation

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

Page 9: Meteor presentation

Meteor app structure

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

Page 10: Meteor presentation

Meteor app structure

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

Meteor.isClient and Meteor.isServer

Page 11: Meteor presentation

Meteor templates

- Uses Blaze template engine

- Basically looks like this : - Forget about random

logic in templates.- Everything happens with

helpers

Page 12: Meteor presentation

Meteor template helpers

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

Helper

Template with name ‘user_view’

Page 13: Meteor presentation

Meteor template helpers

So basically this won’t work

but

+ will work

Isn’t it a bit complicated?

Page 14: Meteor presentation

Meteor template events

- Events are assigned to elements only in particular template.

- Structure similar to helpers

Page 15: Meteor presentation

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?)

Page 16: Meteor presentation

Meteor collections

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

Page 17: Meteor presentation

Meteor collections

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

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

used.

Page 18: Meteor presentation

Publications and Subscriptions

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

Page 19: Meteor presentation

Publications and Subscriptions

Page 20: Meteor presentation

Calling Meteor methods securely

Client side

Server side

Page 21: Meteor presentation

Meteor as MVC framework?

- This is actually possible to have javascript MVC framework.

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

Page 22: Meteor presentation

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

Page 23: Meteor presentation

How to use iron router controller?

Actions before

Waiting for data from Mongo

Data returned to view (defined in routes.js)

Page 24: Meteor presentation

How to use iron router controller?

ID passed from controller as data

Page 25: Meteor presentation

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?

Page 26: Meteor presentation

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

Page 27: Meteor presentation

Let’s create simple chat app

Let’s start with collections

Page 28: Meteor presentation

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.

Page 29: Meteor presentation

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.

Page 30: Meteor presentation

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)

Page 31: Meteor presentation

Let’s create simple chat app

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

Page 32: Meteor presentation

Let’s create simple chat app

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

Page 33: Meteor presentation

Let’s create simple chat app

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

Page 34: Meteor presentation

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)

Page 35: Meteor presentation

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

Page 36: Meteor presentation

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.

Page 37: Meteor presentation

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.

Page 38: Meteor presentation

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/#/

Page 39: Meteor presentation

To wrap up

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