The Realtime Web

!Bert Wijnants end2end engineer @ Mobile Vikings

@bertwww www.newpage.be

Fronteers meetup - 5 december 2013

wooooooow websockets are so cool!

Live on television

Do web sockets make the internet realtime?

Why is this the realtime web?

The obvious stuff

ticker: realtime push updates

The obvious stuff

chatbox

But there’s a lot more…

super fast search

But there’s a lot more…load content with ajax

TTI: Time To InteractThe perceptual speed for user to be able to start interacting

Time To Interact

<100ms: damn this app is fast, dude!

100ms - 300ms: this app is responding to my input

300ms - 500ms: mmmm, my brother is downloading some torrents again, the internet is slow

>500ms: Hey brother! Stop streaming those torrents, i’m trying to use the internet here.

we live in the intergalactic cloud, right?

Impossible to avoid the latencies

Don’t let the dark side betray youThey will say: “our servers are at full speed, they can’t be faster.”

…though it does not feel fast to your users

Why is your ajax call soooo slow?

http request handshaking

server-side script running on shared resources

network latency to database

database query

http request: data transfer

Stop hugging it!

Back-end developers just love their database

Don’t put your program logic in the back-end

your users are waiting for every decision..

Front-end developers to the rescue!

It’s not that hard nowadays. You don’t need to learn linux or whatever…

Learn some back-end you must

Strategy for realtime appsfor end2end developers

Store data client-side Persist data server-side

query the database once when app starts

download all user-specific data needed

all users get same static content: 100% cache hit, so make sure you’re database caching is on!

this might take a few seconds the first time,.. show some static stuff to user first

Push changes to clients

When data changes

Push changes to clients immediately

use websockets or long polling: always open connection

example: search box

Search box with auto-complete

A field to search for users based on phone number or name

180.000 users

example: auto-complete

On startup: download all users from database (id, name, phone number)

Same query for every one: served directly from database cache!

Not that fast: takes 2 seconds! ouch

What, 2 seconds?!?!

Static content is served from cache and rendered immediately (100ms)

Your user has to move to the search box (1.5s)

Your user must start typing (300ms)

And type up to 3 letters (300ms) before we start querying

It doesn’t change your Time To Interact…

Query on client-side

Searching in 180.000 user takes up 500 ms with a classic AJAX request to database

Search on client-side (<50ms) = instant!

10x faster —> User experience 1000x better!

Where to store client-side?

MVC framework: Backbone, Angular, Ember, …

Store in models

Persist in LocalStorage to reduce startup time and across pages

example: news ticker

Data changes in realtime

Don’t kill your server polling for data

Use websockets or long-polling

Use a fast database with pubsub: redis, mongodb, …

Clients subscribe for updates

fast database + smart database

Use 2 databases

Fast database: redis.io, mongodb, … store things you stream to client

Smart database: mysql, postgresql, … store everything (also in realtime database)

Write to both database

Read from fast database = cache for slow database

Node.js = javascript

node.js + socket.io + redis.io

Super easy to setup!

You don’t need to be a back-end engineer, it’s just javascript that you need to copy-paste

Front-end developers can deliver a fast front-end if they master this part of the app

All the cross-browser shit is already solved

socket.io with node.js

!

“really, it’s just javascript,

dude”

socket.io client-side

!

also just javascript :-)

Conclusion

Not the websockets make your app fast

Avoiding AJAX calls to a slow database do!

Store all data client-side, do your queries client-side

Node.js meetup

Questions?

!Bert Wijnants end2end engineer @ Mobile Vikings

@bertwww www.newpage.be