The Realtime Web
Fronteers meetup - 5 december 2013

!

Bert Wijnants
end2end engineer @ Mobile Vikings

@bertwww
www.newp...
Live on television
wooooooow websockets are so cool!
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 Interact
The 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: mmm...
Impossible to avoid the latencies
we live in the intergalactic cloud, right?
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 ...
Why is your ajax call soooo slow?
http request handshaking
server-side script running on shared resources
network latency ...
Back-end developers just love their database
Stop hugging it!
Don’t put your program logic in
the back-end
your users are waiting
for every decision..
Front-end developers to the rescue!
Learn some back-end you must
It’s not that hard nowadays. You don’t need to learn linux or whatever…
Strategy for realtime apps
for end2end developers
Store data client-side
Persist data server-side
query the database once when app starts
download all user-specific data ne...
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: ser...
What, 2 seconds?!?!
It doesn’t change your Time To Interact…
Static content is served from cache and rendered
immediately ...
Query on client-side
Searching in 180.000 user takes up 500 ms with a
classic AJAX request to database
Search on client-si...
Where to store client-side?
MVC framework: Backbone, Angular, Ember, …
Store in models
Persist in LocalStorage to reduce s...
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 p...
fast database + smart database
Use 2 databases
Fast database: redis.io, mongodb, … store things you
stream to client
Smart...
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 yo...
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...
Node.js meetup
Questions?
!

Bert Wijnants
end2end engineer @ Mobile Vikings

@bertwww
www.newpage.be
Fronteers 20131205   the realtime web
Fronteers 20131205   the realtime web
Upcoming SlideShare
Loading in...5
×

Fronteers 20131205 the realtime web

511

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
511
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Fronteers 20131205 the realtime web

  1. 1. The Realtime Web Fronteers meetup - 5 december 2013 ! Bert Wijnants end2end engineer @ Mobile Vikings @bertwww www.newpage.be
  2. 2. Live on television wooooooow websockets are so cool!
  3. 3. Do web sockets make the internet realtime?
  4. 4. Why is this the realtime web?
  5. 5. The obvious stuff ticker: realtime push updates
  6. 6. The obvious stuff chatbox
  7. 7. But there’s a lot more… super fast search
  8. 8. But there’s a lot more… load content with ajax
  9. 9. TTI: Time To Interact The perceptual speed for user to be able to start interacting
  10. 10. 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.
  11. 11. Impossible to avoid the latencies we live in the intergalactic cloud, right?
  12. 12. 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
  13. 13. 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
  14. 14. Back-end developers just love their database Stop hugging it!
  15. 15. Don’t put your program logic in the back-end your users are waiting for every decision..
  16. 16. Front-end developers to the rescue!
  17. 17. Learn some back-end you must It’s not that hard nowadays. You don’t need to learn linux or whatever…
  18. 18. Strategy for realtime apps for end2end developers
  19. 19. 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
  20. 20. Push changes to clients
  21. 21. When data changes Push changes to clients immediately use websockets or long polling: always open connection
  22. 22. example: search box
  23. 23. Search box with auto-complete A field to search for users based on phone number or name 180.000 users
  24. 24. 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
  25. 25. 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
  26. 26. 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!
  27. 27. Where to store client-side? MVC framework: Backbone, Angular, Ember, … Store in models Persist in LocalStorage to reduce startup time and across pages
  28. 28. example: news ticker
  29. 29. 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
  30. 30. 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
  31. 31. Node.js = javascript
  32. 32. 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
  33. 33. socket.io with node.js ! “really, it’s just javascript, dude”
  34. 34. socket.io client-side ! also just javascript :-)
  35. 35. 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
  36. 36. Node.js meetup
  37. 37. Questions? ! Bert Wijnants end2end engineer @ Mobile Vikings @bertwww www.newpage.be

×