Case Study

Design a browser based chatroom app

A typical Server/Client problem

Browser (Client)

• join a room
• see historical messages
• send and recieve new messages

Server

• can handle user states
• send historical messages
• broadcast messages to all chatroom members

Old Fasion Design Decisions

Server

• Database (message storage)
  • CRUD operations
  • Schema design
• REST API Service

Client

• MV* frameworks
  • Aggresively fetches data via polling / long connection
  • Render UI with the latest data model

Tons of issues to resolve

Redesign with Reactive Programming

• "In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change."
  • https://en.wikipedia.org/wiki/Reactive_programming
• Play Framework, Akka
• The introduction to Reactive Programming you've been missing
• Observable
  • Angular 2's http module

用简单汉语来讲：

基于变化传递思想的编程范式。

From another perspective ...

Chatroom is just

A Data-Driven Application

Sharing States is the key

State management and propagation

• Server manages a global state and broadcast them to the clients

As a result

• All clients see the same data
• Whenever client/server updates the data, the changes automatically propagate to all connected subjects
• Client renders the view based on the current server side state

If State can be Shared in Realtime

ReThinking the state/data/model as a

Shared Memory

A Need for Realtime Realtime Web Database

Presents a huge technical challange to solve realtime issues 💔

Solutions in the Market 🎉

• PaaS

  • Firebase
    • Aquired By Google
  • 野狗
    • A Chinese startup
  • PubNub
  • Pusher

• Open Source (DIY)

  • rethinkdb

Introduction to Firebase DB

• A data point is abstracted as a Refrence object

• Identified with a unique URL

  • e.g., {domain}/abc/def refers to abc.def

• The Reference interface provides set, push, update methods for manipulation

• And on/once event listeners to
  • get notifications when data at the reference URL gets updated

Firebase Javascript API Demo

• This page is already pre-configured with the following

  const config = {
    apiKey: "AIzaSyCreR9sDWYuKtVmbCbTAOKxVhpFabiKeFw",
    authDomain: "reactive-ui.firebaseapp.com",
    databaseURL: "https://reactive-ui.firebaseio.com",
    storageBucket: "reactive-ui.appspot.com",
  };
  // Connect to DB
  firebase.initializeApp(config);
  const db = firebase.database();
  

• Play with data

  // Write values
  db.ref('foo').set({
    key: '123'
  });
  // Listen to DB changes
  db.ref('bar').on('value', (bar) => { 
    console.log(`New bar value: ${JSON.stringify(bar.val())}`);
  });
  

One Step forward

Add an abstraction over the DB

• Data is automatically synchronized between local and remote
• We can now focus on data manipulation itself and how it can be rendered on the client side
• Just like two-way data-binding between server and client

Supported Libraries

• AngularFire
  • describes this as Three-Way data-binding
  • "automatically synchronizes any changes to your DOM, your JavaScript, and the Firebase database"
• Google Polymer
  • Web Component Based
  • Will Demo Later

AngularFire Example

angular
  .module("sampleApp", ["firebase"]);
  .controller("SampleCtrl", ($scope, $firebaseObject) => {
    const ref = firebase.database().ref().child("data");

    // Sync the data into a local object
    const syncObject = $firebaseObject(ref);

    // synchronize the object with a three-way data binding
    syncObject.$bindTo($scope, "data");
});

Polymer Demo

• Pure Data Driven Chatroom
• https://github.com/pengx17/nc_polymer

What's more about Firebase

• A Google Product
• A nice console page
• Static Web Hosting
• Data Analytics
• User Authentication
  • Permission control over data points

Ideas

• Building quick data-driven prototypes
  • You don't need to worry about how the client can read the data, just put the data in the DB
• Online Games
  • Use the realtime DB as a shared memory
• Realtime Notification / Alarms

For custom deployment

• See https://rethinkdb.com/docs/deployment-tools/
  • AWS AMI
  • Docker Images

Thanks