Synchronizing State

in a Multi-Device World

Created by Jenny Tong / mimming.com / @MimmingCodes

Agenda

• Introducing Trendy Startup
• Hear the Trendy Startup pitch
• The code behind the pitch

Trendy Startup

A tiny app company that specalizes in solving important problems across many platforms.

Many devices

Great Apps

Code and data

Great Apps

Much data

• Preferences and settings
• User created media
• Recorded sensor data
• Real time state

Realtime is

Where your bus is

Realtime is

Collaborative drawing

Realtime data is

Game state

Trendy Startup's Needs

• Focus on writing killer real-time apps
• Support for Android, iOS, and Web
• Some way on to the Internet of Things bandwagon

Things they considered

• Point to point
• Roll their own backend
• Cloud backend

Point to point

• Super fast
• No Internet needed
• Support matrix from sad land

Roll your own backend

• Fits your needs perfectly!
• Some CTOs love writing server code
• But, you pay with time

Backend as a service

• Easier to get started
• Faster pivots
• Scales automagically
• But, there's lock-in risk

The Trendy Startup Pitch

Realtime Fruit Detector

Your fruit is an

None

Realtime Fruit Detector

How it works

How it works

A primitive NodeBot

Device Code

var five = require("johnny-five");
var Firebase = require("firebase");

var board = new five.Board();
// Connect to Firebase
var myFirebaseRef =
    new Firebase("https://fruit.firebaseio-demo.com/");

board.on("ready", function() {

  // Set up the Adruino
  var fruit = new five.Sensor({
    pin: "A2",
    freq: 250
  });
  board.repl.inject({ sensor: fruit });
  ...

Device code

// When the voltage changes, do math
  fruit.scale([0, 1024]).on("data", function() {
    var voltage = this.raw / 1024 * 5;
    var fruitType = "unknown";
    if(this.raw < 20) {
      fruitType = "none";
    } else if(this.raw >= 20 && this.raw < 92) {
      fruitType = "orange";
    } else if(this.raw >= 92 ) {
      fruitType = "apple";
    }

    // Save to to Firebase and alert all listeners
    myFirebaseRef.set({"type":fruitType, "voltage":voltage});
  });
});

Web client code

// Connect to Firebase
var fruitRef =
    new Firebase("https://fruit.firebaseio-demo.com/");

// Listen for fruit changes
fruitRef.on("value", function(snapshot) {
  var fruitType = snapshot.val();
  $("#fruit-type").html(fruitType.type);
});

iOS Swift code

let ref = Firebase(url:"https://fruit.firebaseio-demo.com/")

ref.observeEventType(.Value, withBlock: {
  snapshot in

  let fruit = "\(snapshot.value)"

  self.textView.text = fruit

  if(fruit == "apple") {
    self.imageView.image = UIImage(named: "apple");
  } else if(fruit == "orange") {
    self.imageView.image = UIImage(named: "orange");
  }
})

Android code

protected void onResume() {
  Firebase ref = new Firebase("https://fruit.firebaseio-demo.com/");

  // Find the ImageView
  final ImageView fruitImageView =
          (ImageView)findViewById(R.id.fruit_image);

  // Listen for changes
  ref.child("type").addValueEventListener(new ValueEventListener() {
    @Override
    public void onDataChange(DataSnapshot snapshot) {
      String fruitType = snapshot.getValue(String.class);
      if(fruitType.equals("orange")) {
        fruitImageView.setImageResource(R.drawable.orange);
      } else ...
    }
  });
}

Why is this cool?

• Less than 100 total lines of code, total
• Idiomatic code on each platform
• Each client is independent of the others

Wrap up

• We got to know Trendy Startup
• Heard the Trendy Startup pitch
• Saw the code behind the pitch

Epilogue

• Trendy Startup got funded
• But they failed to solve the pickel matrix, and were forced to pivot
• Now they're the Geocities of gourmet sandwiches

THE END

These Slides

mimming.com/presos/synchronizing-state

Code

github.com/mimming/synchronizing-state

github.com/mimming/firebase-fruit-detector

Created by Jenny Tong / mimming.com / @MimmingCodes