Building Real-Time Web Applications

1,629 views
1,560 views

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,629
On SlideShare
0
From Embeds
0
Number of Embeds
824
Actions
Shares
0
Downloads
19
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  

×