CraftCamp for Students - Introduction to Meteor.js

1. Workshop Meteor
craftworkz.co

2. Speakers
Dimitri Mestdagh
Software Engineer
@g00glen00b
g00glen00b.be

3. Agenda
What is Meteor
Why Meteor
Structure of a Meteor application
Example: Chat application
Q & A

4. What is Meteor
"Meteor is a complete open source
platform for building web and mobile
apps in pure JavaScript."

5. Meteor platform
Full stack (both server- and client side)
MongoDB
WebSockets: Live communication between server and client
Code is shared between client and server
Node.js

6. Building web & mobile
apps
Meteor allows you to use the same code on server- and
clientside
The default platform is web, but other platforms can be added:
Meteor packages are isomorphic (they might run on the web,
on a mobile device or on the server)
meteoradd-platformandroid
meteoradd-platformios

7. Building web & mobile
apps
Platforms
Meteor uses Cordova to support Android and iOS
To make an application available for Android devices, you
simply use:
If you don't have the Android SDK installed, you can install it
with the Meteor CLI as well:
To run it on an actual device, you use:
meteoradd-platformandroid
meteorrunandroid
meteorinstall-sdkandroid
meteorrunandroid-device

8. Building web & mobile
apps
Isomorphic packages
Native APIs can be accessed (GPS, camera, ...)
Meteor wraps them in isomorphic packages (Camera,
Geolocation, ...)
Running the following code will work both on the web and on
mobile devices:
On the web it will use the
On mobile devices it will use the native GPS using Cordova
Geolocation.currentLocation()
HTML 5 Geolocation API

9. Pure JavaScript
Meteor is a full stack JavaScript framework
Back-end = Node.js
Front-end = Webbrowser
Code can be shared between both the back-end and front-end
(for example models, utilities, ...)

10. Why Meteor
Characteristics
Running on both mobile and web
Live updates (data changes will be visible immediately on all
clients)
Hot deployment (both local and on the cloud)
Ultra responsive
Easy authentication with accounts-packages (+ easy
integration with Twitter/Facebook OAuth)

11. Why Meteor
The good... the bad and the ugly
DO use it when live updates are important
DO use it for new applications
DO use it for mobile applications
DON'T use it with existing data (unless it can be easily ported
to MongoDB)

12. Structure of a Meteor
application
Model (MongoDB collection)
Client (MiniMongo, templates)
Server (Node.js)
Public (CSS, images)
Private (configuration)

13. Structure of a Meteor
application
Model
Using a model in Meteor is as simple as:
To insert/remove/update data you can use:
Messages=newMongo.Collection('messages');
Messages.insert({
message:"Mymessage",
time:newDate()
});

14. Structure of a Meteor
application
Client
The client side logic primarily contains templates, event
handling and plain JavaScript
To actually change data, you use MiniMongo (it emulates a
MongoDB database on the client)
Templates are written using Spacebars (template engine):
jQuery is allowed within templates
{{#ifcurrentUser}}
<h1>Welcomeuser</h1>
{{/if}}

15. Demo time
Pray to the demo gods

16. Q & A
You have the questions
We (might) have the answers
More feedback: or#craftcamps @g00glen00b

17. References
Slides:
HTML5 slides:
Source code:
Demo:
Getting started:
Craftworkz:
http://www.slideshare.net/craftworkz
http://craftworkz.github.io/ucll-workshop-
meteor/slides/
https://github.com/craftworkz/ucll-workshop-
meteor
http://ucll-demo-meteor.meteor.com/
https://www.meteor.com/
http://craftworkz.co