Speakers
Dimitri MestdaghSoftware Engineer
@g00glen00b
g00glen00b.be
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}}
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
Top Related