Post on 18-Jul-2015
Intro to MeteorDavid Brear
@davidbrear04 - github.com/DavidBrear
Slides adapted from: http://www.slideshare.net/MeteorJS/meteor-intro2014
What We’ll Cover
• What is Meteor?
• Meteor App Structure & Basic Code Explanation
• Do a live coding example
• Show example apps
• Learning Resources
What is Meteor?
• Open source platform for building web and mobile apps
in Javascript
• Built on NodeJS (JS on the front and back)
• Rich user experiences (Reactivity)
• Collaborative multi-user applications
• Cross-platform apps (web, iOS, Android)
• Fast Development
How Modern Apps Look & Feel• Focus on features instead of worrying about application setup
and configuration.
• Meteor’s Goal: Facebook-quality apps without
Facebook’s money.
Components• LiveQuery - Live Database Connectors
• Realtime database queries. (Replication slave, DB triggers, pubsub, polling)
• DDP - Distributed Data Protocol (Websocket-based data protocol)
• Subscribe to changes in the database.
• MiniMongo - MongoDB in-memory Javascript
• Run database queries in the client.
• Tracker - Reactive Programming made simple.
• Rerun functions when data changes.
• Blaze - Reactive UI Templating
• Keep the view up-to-date with your data with simple HTML templates.
http://meteor.com/projects
Meteor Templates
• Uses HTML mixed with Spacebars
• {{> templateName }}
• {{ helper }}
• Has helpers and events for control flow.
How Helpers WorkAttribute of Template
*Note: Session provides getter/setter to store an arbitrary set of key-value pairs.
Meteor App
Structure
my_project
— /client
— /server
— /lib
— /public
• client - code only run
on the client.
• server - code only run
on the server.
• lib - code run before
any other code.
• public - assets
What We Are Missing?
• Pub/Sub to Collections (Shown in example)
• Routing (Not shown today; womp! womp!)
• Animation (Not shown today)
• Deployment (Not shown today)
• Mobile app deployment (This is really cool but sadly,
not shown today.)
Example Apps• Todos - Full-featured todo list app
• LocalMarket - Mobile social engagement app
meteor create --example todos
meteor create --example localmarket
Learning Meteor• Meteor Learn
• http://www.meteor.com/learn
• Official Meteor Tutorial
• http://meteor.com/install
• Discover Meteor (This is a great book)
• http://book.discovermeteor.com/
• EventedMind
• https://www.eventedmind.com/
• Official Meteor Docs
• http://docs.meteor.com