Introduction to Meteor

Introduction to Meteor, characteristics of Meteor, why to use it and a basic overview of the technical details.

Transcript

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) 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
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: 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
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 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
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: 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 ( ) } ) ;
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 { { # 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 } }
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