Workshop Meteorcraftworkz.co

Speakers

Dimitri MestdaghSoftware Engineer

@g00glen00b

g00glen00b.be

AgendaWhat is Meteor

Why Meteor

Structure of a Meteor application

Example: Chat application

Q & A

What is Meteor

"Meteor is a complete open sourceplatform for building web and mobile

apps in pure JavaScript."

Meteor platformFull stack (both server- and client side)

MongoDB

WebSockets: Live communication between server and client

Code is shared between client and server

Node.js

Building web & mobileapps

Meteor allows you to use the same code on server- andclientsideThe 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)

meteor add-platform androidmeteor add-platform ios

Building web & mobileapps

PlatformsMeteor uses Cordova to support Android and iOSTo make an application available for Android devices, yousimply use:

If you don't have the Android SDK installed, you can install itwith the Meteor CLI as well:

To run it on an actual device, you use:

meteor add-platform androidmeteor run android

meteor install-sdk android

meteor run android-device

Building web & mobileapps

Isomorphic packagesNative 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 onmobile 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

Pure JavaScriptMeteor 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, ...)

Why MeteorCharacteristics

Running on both mobile and web

Live updates (data changes will be visible immediately on allclients)

Hot deployment (both local and on the cloud)

Ultra responsive

Easy authentication with accounts-packages (+ easyintegration with Twitter/Facebook OAuth)

Why MeteorThe good... the bad and the uglyDO 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 portedto MongoDB)

Structure of a MeteorapplicationModel (MongoDB collection)

Client (MiniMongo, templates)

Server (Node.js)

Public (CSS, images)

Private (configuration)

Structure of a Meteorapplication

ModelUsing a model in Meteor is as simple as:

To insert/remove/update data you can use:

Messages = new Mongo.Collection('messages');

Messages.insert({ message: "My message", time: new Date()});

Structure of a Meteorapplication

ClientThe client side logic primarily contains templates, eventhandling and plain JavaScript

To actually change data, you use MiniMongo (it emulates aMongoDB database on the client)

Templates are written using Spacebars (template engine):

jQuery is allowed within templates

{{#if currentUser}} <h1>Welcome user</h1>{{/if}}

Demo timePray to the demo gods

Q & AYou have the questions

We (might) have the answersMore feedback: or #craftcamps @g00glen00b

ReferencesSlides:

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