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/ | sh

1. 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-var

Create Another Project

Create This Directory Structure

client
- js
  - post-me-up.js
- css
  - styles.css
- views
  - post-me-up.html
- subscriptions.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