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

App StructureFrom

meteor create my_project

to

Full Meteor App Structure

Initial Project Files• Create initial project files:

Basic App TemplateMeteor only uses head, body, template tags

helperNamed template

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.

How Events WorkEvent is a key of ‘Action Selector’

Putting It All TogetherBasic way of controlling where code runs.

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

Live Coding ExampleWe’ll do it LIVE!

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

Special Thanks

• Center for Open Science

• http://centerforopenscience.org/

• Alice Yu, Robert Dickert, and the rest of the team

at Meteor.

• Everyone who came out to listen to this!