Slide 1

Slide 1 text

Workshop Meteor craftworkz.co

Slide 2

Slide 2 text

Speakers Dimitri Mestdagh Software Engineer @g00glen00b g00glen00b.be

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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) m e t e o r a d d - p l a t f o r m a n d r o i d m e t e o r a d d - p l a t f o r m i o s

Slide 7

Slide 7 text

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: m e t e o r a d d - p l a t f o r m a n d r o i d m e t e o r r u n a n d r o i d m e t e o r i n s t a l l - s d k a n d r o i d m e t e o r r u n a n d r o i d - d e v i c e

Slide 8

Slide 8 text

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 G e o l o c a t i o n . c u r r e n t L o c a t i o n ( ) HTML 5 Geolocation API

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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)

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Structure of a Meteor application Model Using a model in Meteor is as simple as: To insert/remove/update data you can use: M e s s a g e s = n e w M o n g o . C o l l e c t i o n ( ' m e s s a g e s ' ) ; M e s s a g e s . i n s e r t ( { m e s s a g e : " M y m e s s a g e " , t i m e : n e w D a t e ( ) } ) ;

Slide 14

Slide 14 text

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 { { # i f c u r r e n t U s e r } } < h 1 > W e l c o m e u s e r < / h 1 > { { / i f } }

Slide 15

Slide 15 text

Demo time Pray to the demo gods

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content