• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building Real-Time Web Applications
 

Building Real-Time Web Applications

on

  • 770 views

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

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!

Statistics

Views

Total Views
770
Views on SlideShare
354
Embed Views
416

Actions

Likes
1
Downloads
8
Comments
0

3 Embeds 416

http://tony.abou-assaleh.net 414
http://www.newsblur.com 1
http://cloud.feedly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building Real-Time Web Applications Building Real-Time Web Applications Presentation Transcript

    • Building  Real-­‐Time  Web  Applica4ons   Tony  Abou-­‐Assaleh  &  Mark  Dineen   October  22,  2013   Volta  Labs  
    • 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  
    • 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  
    • 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  
    • 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  refresh  ≠  real-­‐time  Web   Real-­‐time  computing  ≠  real-­‐time  Web   Real-­‐time  streaming  ≠  real-­‐time  Web   Copyright  (c)  2013  TitanFile  Inc.   7  
    • 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  
    • What  is  Real-­‐Time  Web?   •  •  •  •  Dynamic  user  interface   Server-­‐side  push   Event-­‐driven   Asynchronous   Copyright  (c)  2013  TitanFile  Inc.   9  
    • 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  
    • The  Stack   Copyright  (c)  2013  TitanFile  Inc.   11  
    • Copyright  (c)  2013  TitanFile  Inc.   12  
    • The  Stack   •  Asynchronous,  dynamic  client   •  HTML5  WebSockets     •  Asynchronous  backend  server   Copyright  (c)  2013  TitanFile  Inc.   13  
    • The  Stack  @  TitanFile   Client   Server   Dispatcher   TornadIO2   Copyright  (c)  2013  TitanFile  Inc.   14  
    • Client-­‐Side  Stack   Copyright  (c)  2013  TitanFile  Inc.   15  
    • Transport  Op4ons  -­‐  Comet   •  HTML5  WebSockets   •  Flash  Socket   •  Long  Polling   –  IFrame   –  Ajax   –  XMLHttpRequest   –  JSONP   Copyright  (c)  2013  TitanFile  Inc.   16  
    • 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  TitanFile  Inc.   20  
    • HTML5  WebSockets   •  •  •  •  Open  Connection   Send  message   On  message  event   Close  connection   Copyright  (c)  2013  TitanFile  Inc.   21  
    • SockJS   •  •  •  •  WebSocket  Emulator   Follows  HTML5  WebSocket  API   Cross-­‐domain  support   Polling  as  fallback   Copyright  (c)  2013  TitanFile  Inc.   22  
    • 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  
    • Server-­‐Side  Stack   Copyright  (c)  2013  TitanFile  Inc.   24  
    • Real-­‐Time  Web  Servers   •  Most  modern  languages  …   •  Many  modern  frameworks  …   –  NodeJS   –  Tornado   Copyright  (c)  2013  TitanFile  Inc.   25  
    • 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  –  publish  messages  to  a  channel   Receivers  –  subscribe  to  a  channel   Copyright  (c)  2013  TitanFile  Inc.   32  
    • 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  
    • Beyond  the  Basics     Real-­‐World  Challenges   Copyright  (c)  2013  TitanFile  Inc.   34  
    • Real  World  Challenges   •  •  •  •  Authentication   Security   Binary  Data  (Files)   Blocking  Code   –  Database,  File  I/O,  Network   •  Scalability   Copyright  (c)  2013  TitanFile  Inc.   35  
    • 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:  @tony_aa,  @DineenMa