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
- Meteor: meteor.com
- Doc: docs.meteor.com
- Github: https://github.com/Ellisande/awesome-list
- Slides: https://slides.com/justindragos/meteor-js-4/
Questions?
MeteorJS
By Justin Dragos
MeteorJS
A quick slide stack for getting started with a MeteorJS application
- 2,264
