The document discusses how to build real-time web applications. It emphasizes storing data client-side and pushing changes to clients in real-time using technologies like websockets to avoid slow AJAX calls. Examples are given of building an auto-complete search and news ticker in a real-time manner by initially loading all data and then querying client-side or pushing updates via websockets. The key is avoiding roundtrips to databases by doing work client-side and using fast databases like Redis that support publishing changes.

1. The Realtime Web
Fronteers meetup - 5 december 2013
!
Bert Wijnants
end2end engineer @ Mobile Vikings
@bertwww
www.newpage.be

2. Live on television
wooooooow websockets are so cool!

4. Do web sockets make the
internet realtime?

5. Why is this the realtime web?

6. The obvious stuff
ticker: realtime push updates

7. The obvious stuff
chatbox

8. But there’s a lot more…
super fast search

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

10. TTI: Time To Interact
The perceptual speed for user to be able to start interacting

11. 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.

12. Impossible to avoid the latencies
we live in the intergalactic cloud, right?

13. Don’t let the dark side betray you
They will say: “our servers are at full speed, they can’t be faster.”
…though it does not feel fast to your users

14. 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

15. Back-end developers just love their database
Stop hugging it!

16. Don’t put your program logic in
the back-end
your users are waiting
for every decision..

17. Front-end developers to the rescue!

18. Learn some back-end you must
It’s not that hard nowadays. You don’t need to learn linux or whatever…

19. Strategy for realtime apps
for end2end developers

20. 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

21. Push changes to clients

22. When data changes
Push changes to clients immediately
use websockets or long polling: always open
connection

23. example: search box

24. Search box
with auto-complete
A field to search for users based on phone number or
name
180.000 users

25. 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

26. What, 2 seconds?!?!
It doesn’t change your Time To Interact…
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

27. 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!

28. Where to store client-side?
MVC framework: Backbone, Angular, Ember, …
Store in models
Persist in LocalStorage to reduce startup time and
across pages

29. example: news ticker

30. 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

31. 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

32. Node.js = javascript

33. 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

34. socket.io
with node.js
!
“really, it’s just
javascript,
dude”

35. socket.io
client-side
!
also just
javascript :-)

36. 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

37. Node.js meetup

38. Questions?
!
Bert Wijnants
end2end engineer @ Mobile Vikings
@bertwww
www.newpage.be