Building	
  Real-­‐Time	
  Web	
  Applica4ons	
  
Tony	
  Abou-­‐Assaleh	
  &	
  Mark	
  Dineen	
  
October	
  22,	
  2013...
Agenda	
  
• 
• 
• 
• 
• 
• 
• 

What	
  is	
  real-­‐time	
  web	
  
The	
  stack	
  
Client-­‐side	
  
Server-­‐side	
  ...
Who	
  we	
  are	
  
•  Tony	
  Abou-­‐Assaleh	
  
–  PhD	
  in	
  Computer	
  Science	
  from	
  Dal	
  
–  Cofounder	
  ...
Who	
  we	
  are	
  
•  Mark	
  Dineen	
  
–  CTO,	
  TitanFile	
  
–  Made	
  RT	
  in	
  TitanFile	
  fast	
  and	
  sec...
What	
  is	
  Real-­‐Time	
  Web?	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

5	
  
What	
  is	
  Real-­‐Time	
  Web?	
  
Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

6	
  
What	
  is	
  Real-­‐Time	
  Web?	
  
• 
• 
• 
• 

Saves	
  to	
  the	
  database	
  ≠	
  real-­‐time	
  Web	
  
Periodic	...
What	
  is	
  Real-­‐Time	
  Web?	
  
A	
  set	
  of	
  technologies	
  and	
  practices	
  that	
  enable	
  
users	
  to...
What	
  is	
  Real-­‐Time	
  Web?	
  
• 
• 
• 
• 

Dynamic	
  user	
  interface	
  
Server-­‐side	
  push	
  
Event-­‐driv...
Applica4on	
  of	
  RT	
  Web	
  
• 
• 
• 
• 
• 
• 
• 

Chat,	
  communication	
  
Collaboration	
  
Co-­‐editing,	
  co-­...
The	
  Stack	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

11	
  
Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

12	
  
The	
  Stack	
  
•  Asynchronous,	
  dynamic	
  client	
  
•  HTML5	
  WebSockets	
  
	
  

•  Asynchronous	
  backend	
  ...
The	
  Stack	
  @	
  TitanFile	
  

Client	
  

Server	
  
Dispatcher	
  
TornadIO2	
  

Copyright	
  (c)	
  2013	
  Titan...
Client-­‐Side	
  Stack	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

15	
  
Transport	
  Op4ons	
  -­‐	
  Comet	
  
•  HTML5	
  WebSockets	
  
•  Flash	
  Socket	
  
•  Long	
  Polling	
  
–  IFrame...
Cross-­‐origin	
  resource	
  sharing	
  (CORS)	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

17	
  
Polling	
  vs.	
  WebSockets	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

18	
  
WebSocket	
  Handshake	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

19	
  
WebSocket	
  Op4ons	
  
•  Plain	
  HTML5	
  WebSockets	
  
	
  
•  SockJS	
  
•  Socket.io	
  

Copyright	
  (c)	
  2013	...
HTML5	
  WebSockets	
  
• 
• 
• 
• 

Open	
  Connection	
  
Send	
  message	
  
On	
  message	
  event	
  
Close	
  connec...
SockJS	
  
• 
• 
• 
• 

WebSocket	
  Emulator	
  
Follows	
  HTML5	
  WebSocket	
  API	
  
Cross-­‐domain	
  support	
  
P...
Socket.IO	
  
•  Real-­‐time	
  Web	
  App	
  Protocol	
  
•  Event-­‐based	
  communication	
  
–  Connection	
  events	
...
Server-­‐Side	
  Stack	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

24	
  
Real-­‐Time	
  Web	
  Servers	
  
•  Most	
  modern	
  languages	
  …	
  
•  Many	
  modern	
  frameworks	
  …	
  
–  Node...
The	
  Flow	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

26	
  
Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

27	
  
Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

28	
  
More	
  Detailed	
  (Useful)	
  Flow	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

29	
  
Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

30	
  
Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

31	
  
Pub	
  Sub	
  PaPern	
  
• 
• 
• 
• 

Decouples	
  senders	
  from	
  receivers	
  
Intermediate	
  hub	
  
Senders	
  –	
...
The	
  Flow	
  @	
  TitanFile	
  
Sender	
  Client	
  

Server	
  

Recipient	
  Client	
  

User	
  Action	
  

Django	
 ...
Beyond	
  the	
  Basics	
  
	
  
Real-­‐World	
  Challenges	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

34	
  
Real	
  World	
  Challenges	
  
• 
• 
• 
• 

Authentication	
  
Security	
  
Binary	
  Data	
  (Files)	
  
Blocking	
  Cod...
Authen4ca4on	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

36	
  
Security	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

37	
  
Binary	
  Data	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

38	
  
Blocking	
  Code	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

39	
  
Scalability	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

40	
  
Live	
  Tutorial	
  
https://github.com/mdineen/chatserver	
  

Copyright	
  (c)	
  2013	
  TitanFile	
  Inc.	
  

41	
  
Tony	
  Abou-­‐Assaleh	
  &	
  Mark	
  Dineen	
  
https://www.titanFile.com	
  
{taa,mark}@titanFile.com	
  
Twitter:	
  @...
Upcoming SlideShare
Loading in...5
×

Building Real-Time Web Applications

1,180

Published on

This is a hands-on workshop that will teach you how to build a Web application that incorporate real-time communication between the client application running on the browser and the back-end server.

We will start with an overview of technologies and tools available for building real-time Web apps, what’s involved, the basics, and the gotchas. Next, we will build, in real-time, a real-time chat application using the python (Tornado) + socket.io + Backbone stack. Why not Node.js, you might ask. Simple: it’s too easy, too popular, and and not super-stable or secure. But you’re welcome to use Node.js as the backend in your own apps!

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,180
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Real-Time Web Applications

  1. 1. Building  Real-­‐Time  Web  Applica4ons   Tony  Abou-­‐Assaleh  &  Mark  Dineen   October  22,  2013   Volta  Labs  
  2. 2. Agenda   •  •  •  •  •  •  •  What  is  real-­‐time  web   The  stack   Client-­‐side   Server-­‐side   The  Flow   Beyond  the  basics   Live  Tutorial   Copyright  (c)  2013  TitanFile  Inc.   2  
  3. 3. Who  we  are   •  Tony  Abou-­‐Assaleh   –  PhD  in  Computer  Science  from  Dal   –  Cofounder  and  CEO,  TitanFile   –  Ex-­‐Google,  VP  Tech  /  R&D  Director  @   GenieKnows   –  Developed  the  initial  real-­‐time  components  of   TitanFile   –  Core  member  of  Backbone  Marionette  Team   Copyright  (c)  2013  TitanFile  Inc.   3  
  4. 4. Who  we  are   •  Mark  Dineen   –  CTO,  TitanFile   –  Made  RT  in  TitanFile  fast  and  secure   –  Director  of  IT  at  Allianz   –  Compliance  and  security  veteran   –  Contributor  at  OWASP.org     Copyright  (c)  2013  TitanFile  Inc.   4  
  5. 5. What  is  Real-­‐Time  Web?   Copyright  (c)  2013  TitanFile  Inc.   5  
  6. 6. What  is  Real-­‐Time  Web?   Copyright  (c)  2013  TitanFile  Inc.   6  
  7. 7. What  is  Real-­‐Time  Web?   •  •  •  •  Saves  to  the  database  ≠  real-­‐time  Web   Periodic  refresh  ≠  real-­‐time  Web   Real-­‐time  computing  ≠  real-­‐time  Web   Real-­‐time  streaming  ≠  real-­‐time  Web   Copyright  (c)  2013  TitanFile  Inc.   7  
  8. 8. What  is  Real-­‐Time  Web?   A  set  of  technologies  and  practices  that  enable   users  to  receive  information  as  soon  as  it  is   published  by  its  authors,  rather  than  requiring   that  they  or  their  software  check  a  source   periodically  for  updates.   Copyright  (c)  2013  TitanFile  Inc.   8  
  9. 9. What  is  Real-­‐Time  Web?   •  •  •  •  Dynamic  user  interface   Server-­‐side  push   Event-­‐driven   Asynchronous   Copyright  (c)  2013  TitanFile  Inc.   9  
  10. 10. Applica4on  of  RT  Web   •  •  •  •  •  •  •  Chat,  communication   Collaboration   Co-­‐editing,  co-­‐browsing,  co-­‐shopping   Dashboards  and  monitoring   Gaming   Social  Web   Date  Streaming   Copyright  (c)  2013  TitanFile  Inc.   10  
  11. 11. The  Stack   Copyright  (c)  2013  TitanFile  Inc.   11  
  12. 12. Copyright  (c)  2013  TitanFile  Inc.   12  
  13. 13. The  Stack   •  Asynchronous,  dynamic  client   •  HTML5  WebSockets     •  Asynchronous  backend  server   Copyright  (c)  2013  TitanFile  Inc.   13  
  14. 14. The  Stack  @  TitanFile   Client   Server   Dispatcher   TornadIO2   Copyright  (c)  2013  TitanFile  Inc.   14  
  15. 15. Client-­‐Side  Stack   Copyright  (c)  2013  TitanFile  Inc.   15  
  16. 16. Transport  Op4ons  -­‐  Comet   •  HTML5  WebSockets   •  Flash  Socket   •  Long  Polling   –  IFrame   –  Ajax   –  XMLHttpRequest   –  JSONP   Copyright  (c)  2013  TitanFile  Inc.   16  
  17. 17. Cross-­‐origin  resource  sharing  (CORS)   Copyright  (c)  2013  TitanFile  Inc.   17  
  18. 18. Polling  vs.  WebSockets   Copyright  (c)  2013  TitanFile  Inc.   18  
  19. 19. WebSocket  Handshake   Copyright  (c)  2013  TitanFile  Inc.   19  
  20. 20. WebSocket  Op4ons   •  Plain  HTML5  WebSockets     •  SockJS   •  Socket.io   Copyright  (c)  2013  TitanFile  Inc.   20  
  21. 21. HTML5  WebSockets   •  •  •  •  Open  Connection   Send  message   On  message  event   Close  connection   Copyright  (c)  2013  TitanFile  Inc.   21  
  22. 22. SockJS   •  •  •  •  WebSocket  Emulator   Follows  HTML5  WebSocket  API   Cross-­‐domain  support   Polling  as  fallback   Copyright  (c)  2013  TitanFile  Inc.   22  
  23. 23. Socket.IO   •  Real-­‐time  Web  App  Protocol   •  Event-­‐based  communication   –  Connection  events   –  Named  events   •  Broadcast   •  Cross-­‐browser  and  platform   •  Server-­‐side  (Node.JS)  and  client-­‐side   Copyright  (c)  2013  TitanFile  Inc.   23  
  24. 24. Server-­‐Side  Stack   Copyright  (c)  2013  TitanFile  Inc.   24  
  25. 25. Real-­‐Time  Web  Servers   •  Most  modern  languages  …   •  Many  modern  frameworks  …   –  NodeJS   –  Tornado   Copyright  (c)  2013  TitanFile  Inc.   25  
  26. 26. The  Flow   Copyright  (c)  2013  TitanFile  Inc.   26  
  27. 27. Copyright  (c)  2013  TitanFile  Inc.   27  
  28. 28. Copyright  (c)  2013  TitanFile  Inc.   28  
  29. 29. More  Detailed  (Useful)  Flow   Copyright  (c)  2013  TitanFile  Inc.   29  
  30. 30. Copyright  (c)  2013  TitanFile  Inc.   30  
  31. 31. Copyright  (c)  2013  TitanFile  Inc.   31  
  32. 32. Pub  Sub  PaPern   •  •  •  •  Decouples  senders  from  receivers   Intermediate  hub   Senders  –  publish  messages  to  a  channel   Receivers  –  subscribe  to  a  channel   Copyright  (c)  2013  TitanFile  Inc.   32  
  33. 33. The  Flow  @  TitanFile   Sender  Client   Server   Recipient  Client   User  Action   Django   Model  Saved   Django   post_save   Render   changes   Backbone   Model  Saved   Django   Handler   Django  signal   handler   Backbone   handler   ioSync   Socket.io   TornadIO2   Dispatcher   TorandIO2   Broadcast   ioBind   Socket.io   Copyright  (c)  2013  TitanFile  Inc.   33  
  34. 34. Beyond  the  Basics     Real-­‐World  Challenges   Copyright  (c)  2013  TitanFile  Inc.   34  
  35. 35. Real  World  Challenges   •  •  •  •  Authentication   Security   Binary  Data  (Files)   Blocking  Code   –  Database,  File  I/O,  Network   •  Scalability   Copyright  (c)  2013  TitanFile  Inc.   35  
  36. 36. Authen4ca4on   Copyright  (c)  2013  TitanFile  Inc.   36  
  37. 37. Security   Copyright  (c)  2013  TitanFile  Inc.   37  
  38. 38. Binary  Data   Copyright  (c)  2013  TitanFile  Inc.   38  
  39. 39. Blocking  Code   Copyright  (c)  2013  TitanFile  Inc.   39  
  40. 40. Scalability   Copyright  (c)  2013  TitanFile  Inc.   40  
  41. 41. Live  Tutorial   https://github.com/mdineen/chatserver   Copyright  (c)  2013  TitanFile  Inc.   41  
  42. 42. Tony  Abou-­‐Assaleh  &  Mark  Dineen   https://www.titanFile.com   {taa,mark}@titanFile.com   Twitter:  @tony_aa,  @DineenMa  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×