Meteor JS

by: Justin Dragos

What is it?

  • Front End
  • Server (Node)
  • Data (Mongo)
  • Build Tool
  • Package Manager

Why Use It?

  • Free View Binding
  • Free Data Syncing
  • Free Build Tool
  • Free Database
  • Package Manager
  • Easy Deployment

Why Not Use It?

  • Full Stack Solution
  • View Framework Issues
  • ORM Quirks
  • Compilation Quirks
  • Not Huge Adoption

Data

Mini-Mongo

The basis of Meteor's data mapping are mini-mongo objects that act like mongo collections at each layer.

Query by Example

Give me an object that looks like the one you want.

Example Query


// Find a person with a name of 'Steve'
AmazingPeople.find({name: 'Steve'});

// Find all people with a shoe size of 10
AmazingPeople.find({shoeSize: 10});

// Add a new person named 'Ted'
AmazingPeople.insert({name: 'Ted'});

// Remove a person named 'Ted'
AmazingPeople.remove({name: 'Ted'});

// Add a shoe size of 10 to 'Steve'
AmazingPeople.update(
  {name: 'Steve'}, 
  {name: 'Steve', shoeSize: 10}
);

Data Binding

View 1

View 2

View 3

Server

Mongo

Events

Web Sockets

Listener

Data Binding - Advanced

Server

View

Publish

Filter

Trusted

View

Meteor Quirks

  • All JS compiled into one file
  • All HTML compiled into one file
  • All CSS compiled into one file

Templates

The main mechanism for interacting with the view layer are Spacebar templates. These templates will define the markup for your views and the events bound to them.

Template Markup

<!-- Only one of these allowed in all HTML files -->
<head>
    <title>My Favorite People</title>
</head>

<!-- Only one of these allowed in all HTML files -->
<body>
    {{> intro}}
    {{> people}}
</body>

<!-- Everything else is a template -->
<template name="intro">
    <h2>Welcome to Justin's Awesome List</h2>
</template>

<template name="people">
    <ul>
        <li>Kristin</li>
    </ul>
    <button>Down Vote</button>
</template>

Template Helpers

Template.contents.helpers({
  awesomePerson: function () {
    return 'Justin';
  }
});
<template name="contents">
    <!-- Will render as <h2>Justin</h2> -->
    <h2>{{awesomePerson}}</h2>
</template>

Template Events


Template.contents.events({
  'click button': function () {
    var newName = $('#newPerson').val();
    Awesome.insert({name: newName, score: 0});
  }
});

Lets Build Something

We're going to build an app to track the people I feel are most awesome in the world. Its a rapidly changing list, that everyone cares about deeply.

Lets Play Something

Colin is going to show us Wiblits. Enjoy the game!

Resources

Questions?

Justin

Colin

Made with Slides.com