Short Meteor presentation by Scandiweb!

2. What’s that?
Full stack pure JS framework for
building awesome apps in no time.

3. What’s inside?
- MongoDB
- Node JS
- lots of packages
- ...

4. 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

5. First things first
Installing meteor takes a few seconds:
curl https://install.meteor.com/ | sh

6. First things first
Creating new app also takes couple of
seconds
meteor create app-name

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

8. 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

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

10. Meteor app structure
- For code accessed both from server and
client side these can be used
Meteor.isClient and Meteor.isServer

11. Meteor templates
- Uses Blaze template
engine
- Basically looks like this :
- Forget about random
logic in templates.
- Everything happens with
helpers

12. Meteor template helpers
- Helpers help to store logic outside of templates making
them super readable
Template with name ‘user_view’
Helper

13. Meteor template helpers
So basically this won’t work
but
+ will work
Isn’t it a bit complicated?

14. Meteor template events
- Events are assigned to elements only in
particular template.
- Structure similar to helpers

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

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

17. Meteor collections
- “autopublish” and “insecure” - why these two
packages are needed?
- Both should be disabled in production
- Publications and Subscriptions should be
used.

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

19. Publications and Subscriptions

20. Calling Meteor methods securely
Client side
Server side

21. Meteor as MVC framework?
- This is actually possible to have javascript
MVC framework.
- meteor add iron:router
- How does it work?

22. 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

23. How to use iron router controller?
Actions before
Waiting for data
from Mongo
Data returned to
view (defined in
routes.js)

24. How to use iron router controller?
ID passed from controller as data


25. 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?

26. Let’s create simple chat app
1. meteor create chat-app
2. Let’s add necessary
packages
a. meteor add accounts-facebook
b. meteor add iron:router
3. Lets think about this simple
app structure

27. Let’s create simple chat app
Let’s start with collections

28. 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.

29. 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.

30. 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)

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

32. Let’s create simple chat app
Binding events
/ helpers to
elements
(client/templates/chat/ch
at.js)

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

34. 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)

35. Deploy to server
The one I used is mup. Install it with
npm 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

36. 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.

37. 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.

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

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