Joe Karlsson
progress. tech. cats. coffee. art. food. photog. mpls.
Reactive
JavaScript
Programming
WITH
What is Meteor?
- Data on the Wire
- One Language ...to rule them all?
- Database Everywhere
- Latency Compensation
- Full Stack Reactivity
- Embrace the Ecosystem
- Simplicity Equals Productivity
What is Reactivity?
For Every Action...
...There Is A Reaction
Dude...not cool
What does it REALLY mean?
As our "state" changes...
...we should SEE those changes
Data
Events
OK Enough Talking..
who wants to code?
curl https://install.meteor.com/ | sh1. Install Meteor
2. Create Meteor Project
$ meteor create beleib-it
$ cd beleib-it
$ meteor add reactive-var<!--belieb-it.html-->
<head>
<title>Belieb-It</title>
</head>
<body>
<h1>Belieb It...Or Not</h1>
{{> gameboard}}
</body>
<template name="gameboard">
<div class="hit-counter">
<div>
The Beebz Has Been Hit
</div>
<div id="hit-count">
{{hits}}
</div>
<div>
Times
</div>
</div>
<div class="container">
<div class="the-beib" style="left:{{leftPosition}}; top:{{topPosition}}">
<img src="http://www.devleague.com/img/beiber-bad.jpg" width="100px" height="100px">
</div>
</div>
</template>//belieb-it.js
//DEFINE DATA COLLECTION
HitCollection = new Meteor.Collection('hits');
.
.
.//beleib-it.js
function BeiberHazClass() {
//Private Properties
var self = this;
var MAX_WIDTH = 400;
var MAX_HEIGHT = 400;
//Public Properties
this.LEFT_POSITION = new ReactiveVar();
this.TOP_POSITION = new ReactiveVar();
//Public Methods
this.drawBeiber = function(){
generateLeftPosition();
generateTopPosition();
};
this.destroyBeiber = function(){
};
//Private Methods
function generateLeftPosition(){
self.LEFT_POSITION.set(Math.floor(Math.random() * MAX_WIDTH) + "px");
};
function generateTopPosition(){
self.TOP_POSITION.set(Math.floor(Math.random() * MAX_HEIGHT) + "px");
};
};
if (Meteor.isClient) {
Template.gameboard.created = function(){
this.DaBeebz = new BeiberHazClass();
};
Template.gameboard.rendered = function(){
this.DaBeebz.drawBeiber();
};
Template.gameboard.destroyed = function(){
};
//HELPER FUNCTIONS GO HERE
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}//HELPER FUNCTIONS GO HERE
Template.gameboard.helpers({
hits: function(){
return HitCollection.find().fetch().length;
},
topPosition: function(){
return Template.instance().DaBeebz.LEFT_POSITION.get();
},
leftPosition: function(){
return Template.instance().DaBeebz.TOP_POSITION.get();
}
});
Template.gameboard.events({
'click .the-beib' : function(){
HitCollection.insert({hit: 1});
Template.instance().DaBeebz.drawBeiber();
}
});
/*belieb-it.css*/
/* CSS declarations go here */
body, html{
width: 100%;
height: 100%;
}
.container{
cursor: url('http://www.devleague.com/img/boxing-glove.png');
margin: 25px;
width: 80%;
height: 80%;
border: solid 5px #000;
position: relative;
}
.the-beib{
background-image: url('http://www.devleague.com/img/beiber-bad.jpg');
position: absolute;
width: 100px;
height: 100px;
}That Was Cool. No More Beiber plz.
Kk...who wants to do another one
$ meteor create post-me-up
$ cd post-me-up
$ meteor add reactive-varCreate Another Project
Create This Directory Structure
- client
- js
- post-me-up.js
- css
- styles.css
- views
- post-me-up.html
- subscriptions.js
- js
- lib
- collections.js
- public
- images
- server
- server.js
- publications.js
//lib/collections.js
NotesCollection = new Meteor.Collection('Notes');Define Your Data Collection
//server/server.js
'use strict';
Meteor.startup(function () {
// code to run on server at startup
if(NotesCollection.find().fetch().length === 0){
NotesCollection.insert({
title: "First Note",
message: "Don't forget to delete me meow.",
show: true,
added: Date.now()
});
}
});Create Your Server Startup Logic And Seed Data
//client/views/post-me-up.html
<head>
<title>post-me-up</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Post It Here</h1>
{{> posterBoard}}
</body>
<template name="posterBoard">
<div class="input">
<span>
<input type="text" id="message" maxlength="30">
</span>
<span>
<a href="#" id="save">Save</a>
</span>
<span></span>
</div>
<div class="notes">
{{#each notes}}
{{> note}}
{{/each}}
</div>
</template>
<template name="note">
<div class="note">
<div class="message">{{message}}</div>
<div class="delete">x</div>
</div>
</template>Create Your View
//client/js/post-me-up.js
if (Meteor.isClient) {
Template.posterBoard.created = function(){
};
Template.posterBoard.rendered = function(){
this.find('#message').focus();
};
Template.posterBoard.destroyed = function(){
};
Template.posterBoard.helpers({
notes: function(){
return NotesCollection.find().fetch();
}
});
Template.posterBoard.events({
'click #save' : function(evt, tmpl){
//get the message from our HTML input
var message = tmpl.find('#message').value;
//if message is empty don't save
if(message === ""){
return;
}
//insert message into collection
NotesCollection.insert({
message: message,
show: true,
added: Date.now()
});
//clear input text and set cursur focus
tmpl.find('#message').value = "";
tmpl.find('#message').focus();
},
'click .delete' : function(evt, tmpl){
NotesCollection.remove(this._id);
}
});
}Create Your Functionality
http://www.devleague.com/styles.css
JUST
FREAKIN
BUILD IT
Reactive Programming with the Beibs
By Joe Karlsson
Reactive Programming with the Beibs
Reactive programming demo with Meteor and the Beibs.
