You have Realtime Data. You just don't know it!

name: lblue
 layout: true
 
 class: bg-light, center, middle
 
 ---
 
 name: dblue
 layout: true
 
 class: bg-dark, center, middle
 
 ---
 
 template: lblue
 layout: false
 class: title, h1-big
 
 # You have Realtime Data. You just don't know it!
 
 <img style="width:180px;" src="./img/cloudconf2015-a.png" />
 
 * Phil @leggetter
 * Head of Evangelism
 * 
 
 ???
 
 ---
 
 template: lblue
 class: title, h1-big
 
 ![](./bower_components/pusher-remark-themes/img/pusher-logos/pusher-slogan-dark.png)
 
 ???
 
 I work for Pusher...
 
 ---
 
 class: bg-white, bg-cover
 
 background-image: url(img/realtime-web-solutions-updated.png)
 
 ???
 
 We're one of many realtime technologies...
 
 ---
 
 template: lblue
 class: bg-contain
 background-image: url(img/dollar.jpg)
 
 > that real-time framework is awesome - now to find a use for it
 
 ---
 
 class: bg-cover
 background-image: url(img/rolling-in-dollars.gif)
 
 ---
 
 template: lblue
 class: h1-big
 
 ## 1. You have Realtime Data
 ## 2. What you can do with it
 ## 3. How to do it
 ## 4. Q&A
 
 ???
 
 * Who believes they don't have realtime data in their app?
 
 ---
 
 template: lblue
 class: h1-big
 
 # What is Realtime?
 
 ???
 
 ---
 
 class: bg-cover, em-text
 background-image: url(img/warp-core.gif)
 
 # Hard Realtime
 
 ---
 
 class: bg-cover
 background-image: url(img/core-breach.gif)
 
 ???
 
 Maybe the Enterprise used SignalR to manage its
 warp core safety system?
 
 ---
 
 layout: false
 class: bg-cover, em-text, middle, center
 background-image: url(img/soft-realtime.gif)
 
 # Soft Realtime
 
 ???
 
 * It's still really fast
 * Business critical: have safty fallbacks
 
 ---
 
 template: lblue
 class: h1-big
 background-image: url(img/searching.gif)
 
 # Where do you find Realtime data?
 
 ---
 
 template: lblue
 class: h1-big
 
 # The Evented Web
 
 ???
 
 * 2011 Mike Brevoort - the Evented Web
 * WebHooks, Comet, WebSocket
 
 ---
 
 template: lblue
 class: bg-cover
 background-image: url(img/call-you.png)
 
 http://www.slideshare.net/brevoortm/the-evented-web
 
 ???
 
 * Something happens = events
 * I'll call you = push to interested parties
 
 ---
 
 template: lblue
 class: bg-cover
 background-image: url(img/github-webhooks.png)
 
 http://www.slideshare.net/brevoortm/the-evented-web
 
 ???
 
 * when change or interaction occurs
 * trigger an event about that change or interaction
 * which is received by interested parties

---
 
 template: lblue
 class: h1-big
 
 # Events
 
 ## Where do events occur in your app?
 
 * Changes
 * Interactions
 
 ---
 
 template: lblue
 
 ## Data Changes
 
 * **C**reate
 * Read
 * **U**pdate
 * **D**elete
 
 ---
 
 template: lblue
 class: wide
 
 ## Database Interactions
 
 #### SQL
 
 ```sql
 INSERT INTO activities
 UPDATE activities WHERE ...
 ```
 
 
 #### ORM
 
 ```js
 Activity a = repository.GetActivity(10);
 a.text = "Phil is still talking";
 p.save();
 ```
 
 ???
 
 * Anybody who doesn't have this in their app?
 
 ---
 
 template: lblue
 class: h1-big
 
 # System Interactions
 
 ### Inter-System Communication
 
 ---
 
 template: lblue
 class: wide
 
 ## Web Endpoints
 
 #### Sinatra
 
 ```ruby
 post '/interact' do
 # endpoint called
 end
 ```
 
 #### Express
 
 ```js
 app.post('/interact', function(req, res) {
 // endpoint called
 });
 ```
 
 ???
 
 * Web Services
 * WebHooks
 
 ---
 
 template: lblue
 class: wide
 
 ## Requests / Responses
 
 ```js
 var request = require('request');
 
 // request
 var url = 'http://www.google.com';
 request(url, function (error, response, body) {
 
 // response
 
 });
 ```
 
 ???
 
 ---
 
 template: lblue
 class: wide
 
 ## Logging
 
 ```rb
 require 'logger'
 $LOG = Logger.new('log_file.log', 'monthly') 
 $LOG.debug("I'm logging stuff!") 
 ```
 
 ```js
 var winston = require('winston');
 winston.log('info', {'some': 'data'});
 ```
 
 ???
 
 * Different levels of logging
 * Debug -> Info
 * Is info always logged? Is it useful?
 
 ---
 
 template: lblue
 class: top, wide
 
 ## Summary: System Interactions
 
 * Web endpoints
 * Request/Response
 * Logging
 * CRON Jobs
 * Incoming Email
 * ...
 
 --
 
 ## *Input / Output*
 
 ---
 
 template: lblue
 class: h1-big
 
 # User Interactions
 
 ???
 
 ---
 
 template: lblue
 class: trans-h, bg-cover, top
 background-image: url(img/pusher-site.png)
 
 ## Accessing & Viewing Pages
 
 ???
 
 * Same as web endpoints
 * But user related
 
 ---
 
 template: lblue
 
 ## Interacting with the App
 
 * Navigating views
 * Clicking on the UI
 * Mouse moves
 * Dragging
 * Typing
 * ...
 
 ---
 
 template: lblue
 
 ## User to User Interactions
 
 * Actions specifically for other users
 * Comments
 * Mentions
 * Updates to shared data
 
 ---
 
 template: lblue
 class: wide
 
 ## Summary: User Interactions
 
 * Accessing & Viewing Pages
 * *Interacting with the App*
 * User to User Communication
 
 ---
 
 template: lblue
 background-image: url(img/excited-data.gif)
 class: em-text
 
 ## You Have Realtime Data
 
 ### Changes & Interactions
 
 * Data Changes
 * System Interactions
 * User Interactions
 
 ---
 
 template: lblue
 class: h1-big
 
 # What you can do with the data?
 
 ---
 
 template: lblue
 class: h1-big
 
 # What's happening right now in *your* App?
 
 ???
 
 ---
 
 template: lblue
 class: wide
 
 ## System Analytics
 
 .left[### System stats
 
 * Memory
 * CPU
 * Errors]
 
 .right[### Logs
 
 * System logs
 * Access logs]
 
 ???
 
 * Catch errors early
 * logs later could be too late

---
 
 template: lblue
 class: bg-video
 
 <video id="video" autoplay="true" loop="true">
 <source src="./img/librato.mp4" type="video/mp4">
 </video>
 
 
 ???
 
 Who's using something like:
 
 * Graphite
 * Liberato
 * Statsd
 
 ---
 
 template: lblue
 class: wide
 
 ## Website Analytics
 
 .left[
 ### App Usage
 
 * Popular Pages/Views
 * Online Users]
 
 .right[
 ### Advertising
 
 * Change
 * Cancel]
 
 ???
 
 * It's great to see what's happening right now
 * Analysing the logs later could be too late
 * Ad goals being achieved?
 
 ---
 
 background-image: url(img/google-analytics.jpg)
 class: bg-cover
 
 ???
 
 * Who uses a real-time analytics service?
 * Build your own application analytics
 
 ---
 
 template: lblue
 class: h1-big
 
 # Building Awesome Realtime Features for Your Customers
 
 ???
 
 ---
 
 template: lblue
 class: em-text, bg-cover, trans-h
 background-image: url(img/itv-news-may-2014.png)
 
 # Notifications & Signalling
 
 ???
 
 * Something has happened
 * Changed
 * Alert - do something
 * Notify interested parties
 * Stock/Ticket/Room count on a page
 
 ---
 
 class: center, bg-cover, em-text, trans-h
 background-image: url(./img/delighted-app.gif)
 
 # Activity Streams
 
 ???
 
 * a stream of activity
 * things have - and are - happening
 * synonymous with social apps
 * Twitter
 * Facebook
 * Google+
 * News
 * Sports
 * What are friends been doing
 * What's happening here
 
 ---
 
 template: lblue
 
 class: bg-cover, em-text, trans-h
 background-image: url(/img/senate-election-results.png)
 
 # Data Visualizations
 
 ---
 
 template: lblue
 class: bg-video, em-text, trans-h, top, vid-width-100
 
 # Analytics / Tooling
 
 <video id="video" autoplay="true" loop="true">
 <source src="./img/pusher-debug-console.mp4" type="video/mp4">
 </video>
 
 ---
 
 template: lblue
 class: bg-video, trans-h, em-text
 
 # Chat
 
 <video id="video" autoplay="true" loop="true">
 <source src="./img/pie.mp4" type="video/mp4">
 </video>
 
 ???
 
 * Realtime assistance
 * The 101 of realtime
 * An interactive experience
 * Real-time matters
 
 ---
 
 template: lblue
 class: trans-h
 background-image: url(/img/sprintly.jpg)
 
 # Multi-User Collaboration
 
 ???
 
 * Google Apps
 * Sprint.ly
 * Project management
 * Cloud 9
 * TODO: other
 
 ---
 
 template: lblue
 class: bg-cover, trans-h
 background-image: url(img/quizup.png)
 
 # Multiplayer Games
 
 ---
 
 template: lblue
 class: bg-cover, trans-h, bg-white
 background-image: url(img/apps-with-realtime-apis.png)
 
 # Realtime APIs
 
 ???
 
 * For technical customers
 * B2B
 
 ---
 
 template: lblue
 class: h1-big
 
 # How to do it?
 
 ???
 
 * You have realtime data
 * You know know how you can use it
 * But how do you technically use it? 
 
 ---
 
 template: lblue
 class: h1-big
 
 ## How to do it?
 
 * Identify the data ✔
 * Analyse/Process Data
 * Describe the data
 * Publish data
 * Consume the events & use
 
 (Information Architecture)
 
 ???
 
 * Interested parties subscribing to data
 * A way of publishing to those interested parties
 
 ---
 
 template: lblue
 class: h1-big
 
 # Analyse
 
 ???
 
 ---
 
 template: lblue
 
 ## Simple Data
 
 * None required
 
 ---
 
 template: lblue
 
 ## Complex Data
 
 * Process Asynchronously
 * Queue or Store
 * Querying
 * Triggers & Changefeeds
 
 ???
 
 * Use tool that help with this.
 * e.g. Databases
 * Data processing tools
 * e.g. hadoop, Amazon DynamoDB streams, Apache Storm
 
 ---
 
 template: lblue
 class: code-reveal, top, wide, long
 
 ### Example | Complex Data | RethinkDB
 
 ```js
 r.table("gameplays")
 .get(gameId)
 .update({score: newScore})
 .run(conn, callback)
 ```
 --
 ```js
 
 // Elsewhere
 r.table('gameplays')
 .order_by(index=r.desc('score'))
 .limit(5)
 .changes().run(conn)
 ```
 --
 ```js
 .then(function(cursor) {
 cursor.each(function(err, item) {
 // new results
 });
 });
 ```
 
 ---
 
 template: lblue
 class: h1-big
 
 # Describe
 
 * Register interest in data
 * What is the data?
 * Name, Channels, Topic, Subjects
 * What's happened to the data?
 * Events
 
 ???
 
 * Channels etc.
 * Simple string identifiers

---
    
    template: lblue
    class: long

## Simple Data
    
    ### Channels
    
    * Use DB Table, Document, Model Names
      * e.g. `activities`
      
    ### Events
      
    * What's happened to data for event name
      * e.g. `created`, `updated`, `deleted`
    
    ???
    
    * Denormalized data
      * channel per table
      * channel per collection
    
    ---
    
    template: lblue
    
    ## Complex Data
    
    * Use the data and the analysis/query
    * e.g. `top5games`
    
    ---
    
    template: lblue
    class: h1-big
    
    # Publish Events
    
    ???
    
    ---
    
    template: lblue
    class: code-reveal, top, long, wide
    
    ## Data Changes: Simple
    
    ```js
    // Insert
    Activity a = repository.NewActivity();
    a.text = "Phil is talking";
    a.save();
    ```
    --
    ```js
    pusher.trigger('activities', 'new_activity', a);
    ```
    
    --
    
    ```js
    
    // Update
    a.text = "Phil is still talking";
    a.save();
    ```
    
    --
    
    ```js
    pusher.trigger('activities', 'activity_updated', a);
    ```
    --
    ```js
    
    // Delete
    Activity a = repository.DeleteActivity(10);
    ```
    --
    
    ```js
    pusher.trigger('activities', 'activity_deleted', a);
    ```
    
    ???
    
    The beauty is the simplicity
    
    ---
    
    template: lblue
    class: code-reveal, top, wide
    
    ## Data Changes: Complex
    
    ```js
    r.table('gameplays')
    .order_by(index=r.desc('score'))
    .limit(5)
    .changes().run(conn)
    .then(function(cursor) {
    ```
    --
    ```js
      var top5 = [];
      cursor.each(function(err, item) {
        top5.push(item);
      });
      pusher.trigger('gameplays', 'top_5_updated', top5)
    });
    ```
    
    ???
    
    * For very complex data
    * Consider publishing the deltas
    * Just the change
    * requires state (previous value)
    * more processing
    
    ---
    
    template: lblue
    class: wide
    
    ## Web endpoints
    
    ```ruby
    post '/interact' do

Pusher.trigger('endpoints', 
 'new_interaction',
 {
 endpoint:'interact'
 post_data: params
 })
 
 end
 ```
 
 ---
 
 template: lblue
 class: wide, long, code-reveal, top
 
 ## Requests / Responses
 
 ```js
 var request = require('request');
 
 var url = 'http://www.google.com';
 
 pusher.trigger('web-request', 'outgoing', {url: url});
 ```
 --
 ```js
 request(url, function (error, response, body) {
 
 if(error) {
 pusher.trigger('web-request',
 'incoming-error',
 {url: url, error: error}); 
 ```
 --
 ```js 
 } else {
 pusher.trigger('web-request',
 'incoming-success',
 {url: url, body: body});
 }
 
 });
 ```
 
 ???
 
 ---
 
 template: lblue
 class: wide
 
 ## Logging
 
 ```js
 var winston = require('winston');
 
 function log(level, data) {
 winston.log(level, data);
 pusher.trigger('logging', level, data);
 }
 
 
 log('info', {'some': 'data' });
 ```
 
 ---
 
 template: lblue
 class: h1-big
 
 # Consume & Use
 
 ---
 
 template: lblue
 class: top, wide, long
 
 ## Data Changes
 
 #### Server 
 
 ```js 
 pusher.trigger('activities', 'new_activity', a);
 pusher.trigger('activities', 'activity_updated', a);
 pusher.trigger('activities', 'activity_deleted', a);
 ```
 
 --
 
 #### Client
 
 ```js
 var channel = pusher.subscribe('activities');
 channel.bind('new_activity', function(activity) {
 // Update the UI
 });
 
 channel.bind('activity_updated', function(activity) {});
 channel.bind('activity_deleted', function(activity) {});
 ```
 
 ---
 
 template: lblue
 class: wide
 
 ## Web endpoints
 
 #### Server
 
 ```ruby
 Pusher.trigger('endpoints', 
 'new_interaction',
 {endpoint:'interact'})
 ```
 
 #### Client
 
 ```js
 var channel = pusher.subscribe('endpoints');
 channel.bind('new_interaction', function(interaction) {
 // Update the UI
 });
 ```
 
 ---
 
 template: lblue
 class: wide, longer
 
 ## Logging
 
 #### Server
 
 ```js
 function log(level, data) {
 winston.log(level, data);
 pusher.trigger('logging', level, data);
 }
 ```
 
 #### Client
 
 ```js
 var channel = pusher.subscribe('logging');
 
 channel.bind('info', function(logData) {
 // Update the UI
 });
 
 channel.bind('warning', function(logData) {});
 channel.bind('error', function(logData) {});
 ```
 
 ???
 
 * Channels may be used for each log level
 
 ---
 
 template: lblue
 
 ## Summary: How you do it
 
 * Identify the data
 * Analyse/Process Data
 * Describe the data
 * channels, events
 * Publish data
 * channel, event, payload
 * Consume the events & use
 * subscribe & bind
 
 ---
 
 template: lblue
 class: bg-cover, trans-h, top
 background-image: url(img/you-have-realtime.gif)
 
 <h2 class="high-top">You Have Realtime Data</h2>
 
 <h2 class="low-bottom">And Now You Know It</h2>
 
 ---
 
 template: lblue
 class: h1-big, top
 
 ## You Have Realtime Data
 
 --
 
 * Changes/Interactions = Realtime Data
 
 --
 
 * Analyse, Describe, Publish, Consume Data
 
 --
 
 * Realtime System/App Analysis
 
 --
 
 * Build realtime features for your customers
 
 ---
 
 template: lblue
 class: title, h1-big
 
 # Q&A
 
 ## What are you building?
 
 * Phil @leggetter
 * Head of Evangelism
 * 
 
 ???
 
 I'll try and tell you where the realtime data is and what you can do with it.