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. Open Terminal

3. 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();
   }
  });

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
    • lib
      • 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

contact@devleauge.com

/*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;
}

Reactive Programming with the Beibs

By Jason Sewell

Made with Slides.com

Reactive Programming with the Beibs

Reactive programming demo with Meteor and the Beibs.

  • 2,668

More from Jason Sewell