SPDY!!JUNE 22 ND , 2012 @ APP ENGINE JA NITEKOMASSHU
SELF-INTRODUCTION• Researching cutting-edge web technology   • Especially communication APIs, in preference • Google API ...
ACTIVITIES                   http://www.html5rocks.com/en/tutorials/speed/quick/(LOVE SPEED!!)                            ...
TODAY’S MAIN IDEA    Introduction to SPDY!!
TODAY’S AGENDA• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
http://www.flickr.com/photos/59916467@N06/6974781080/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
EVOLUTION OF    WEB SERVICES1991                                                                                          ...
ALSO COMMUNICATION    MODEL HAS CHANGED1991                                                                               ...
TRANSPORT PROTOCOLSTILL HTTPREQUEST   GET index.html                           RESPONSEREQUEST   GET style.css            ...
ISSUE IN HTTP  Response time become slower when  required resources increased.     And each transaction has     overlapped...
CURRENT PRACTICE                              In RFC2616 (HTTP/1.1),Concurrent tcp connections                           #...
BUT STILL…• Concurrent tcp means  • Abuse of server resources  • intermediary‟s resources, as well     • e.g. NAT, proxy, ...
http://www.flickr.com/photos/33224129@N00/3348658950/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
SPDY•   Who proposed?     • Google•   Goal     • SPEED!!•   First POST in ML(spdy–dev)     • Nov 17th, 2009•   Current ver...
FEATURESCurrent practice            SPDY • Multiplexing request under single tcp • Header compression • Server push feature
[BTW] SPDY NEEDS TLSTUNNELING UNDERCOMMON ENV  In real internet, there are lots of devices verifing http protocol.        ...
[BTW] HOW TO SWITCH SPDY AND HTTPS• tls NPN : Next Protocol Negotiation   • Under non-SPDY browser, HTTPS is automatically...
MULTIPLEXEach streams are treated as key-value pair.                            TLS tunneling                  SPDY_SESSIO...
PREVENT HOLBLOCKING (!PIPELINE)Case : Pipeline              Case : non Pipeline (SPDY)                   1                ...
MULTIPLEX : TWOLAYERS• Split into two parts   • Framing layer         •   In this layer, doesn‟t care about value         ...
[REF] SYN_REPLYFraming layer                                        key                                                   ...
HEADER   COMPRESSIONFraming layer   As described in previous slide                                        key             ...
SERVER PUSH• It’s just for SPEED!!    • Don‟t be considered as common push servicew/o server push                 w/ serv...
SERVER PUSH [CONT]Used when required.                                index.html(e.g. HTMLparser, ajax  request)           ...
http://www.flickr.com/photos/petrahenl/6857301701/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
DEMO1. FEEL SPEEDIN SPECIFIC CASE Normal HTTP                                     SPDYhttp://spdykomtest.appspot.com/pub/t...
DEMO2. IN COMMON CASE& PUSH FEATURE    https://spdykomtest.appspot.com/pub/makuhari/index.html
http://www.flickr.com/photos/regansbox/2371720977/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
NO CODING REQUIRED(W/O SERVER PUSH)Just change / update your middleware is enough.                                        ...
GAE IS NICE PLACE TO TRY SPDY • Common manners of deploying on GAE is enough.   • All you need is changing protocol schem...
FALLBACK WORKSWELL!!
W/ SERVER PUSH(CASE NODE-SPDY)app.get(„hoge‟, function(req, res) {  if (req.       ){    var headers = {„content-type‟, „t...
http://www.flickr.com/photos/vbthe/7237597146/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
IS IT THE RIGHT CHOICEFOR LARGE DATA?Use SPDY for large resources … right solution? • encryption cost • CDN doesn‟t work •...
INFORMATIVE ENTRYAmazons Silk Browser Acceleration Tested: Less BandwidthConsumed, But Slower Performancehttp://www.anandt...
WHAT ARE THEBOTTLENECKS?                       Amazon‟s    SPDY w/ TLS     Proxy enhanced                       by SPDY Of...
STUDY FROMCURRENT PRACTICEGoogle map’s image is transported byanother SPDY connection.Twitter doesn’t use SPDY for user’s ...
TOOLS:SPDY INDICATOR
TOOLS:DEV TOOL, NET-INTERNALS
TOOLS:SPEED TRACER
MOST IMPORTANTTHING“Rich user experience inadequate system cost.” • Goal is not so simple, but we should   achieve  • Not...
JUST TRY AND FEELW/ GAE!!
SUGGESTED LINKS• SPDY - The Chromium Projects   • http://www.chromium.org/spdy• spdy-dev  • https://groups.google.com/foru...
http://www.flickr.com/photos/23086934@N02/2250806050/
Upcoming SlideShare
Loading in …5
×

spdy

4,532 views

Published on

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
4,532
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
56
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

spdy

  1. 1. SPDY!!JUNE 22 ND , 2012 @ APP ENGINE JA NITEKOMASSHU
  2. 2. SELF-INTRODUCTION• Researching cutting-edge web technology • Especially communication APIs, in preference • Google API Expert (HTML5)• Microsoft Most Valuable Professional(IE)• Twitter: @komasshu• Blog: http://blog.livedoor.jp/kotesaki
  3. 3. ACTIVITIES http://www.html5rocks.com/en/tutorials/speed/quick/(LOVE SPEED!!) Referred!!, But… orz (I know I should do feedback) http://wakachi.komasshu.info/
  4. 4. TODAY’S MAIN IDEA Introduction to SPDY!!
  5. 5. TODAY’S AGENDA• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
  6. 6. http://www.flickr.com/photos/59916467@N06/6974781080/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
  7. 7. EVOLUTION OF WEB SERVICES1991 2012http://www.ibarakiken.gr.jp/www/index.html http://www.ocn.ne.jp/ https://www.facebook.com/
  8. 8. ALSO COMMUNICATION MODEL HAS CHANGED1991 2012http://www.ibarakiken.gr.jp/www/index.html http://www.ocn.ne.jp/ https://www.facebook.com/ Multiple resources Single resource + Multiple resources Bi-directional
  9. 9. TRANSPORT PROTOCOLSTILL HTTPREQUEST GET index.html RESPONSEREQUEST GET style.css RESPONSE
  10. 10. ISSUE IN HTTP Response time become slower when required resources increased. And each transaction has overlapped headers.
  11. 11. CURRENT PRACTICE In RFC2616 (HTTP/1.1),Concurrent tcp connections # of concurrent tcp connections 2 (IE6, 7 keeps the number) Modern Browser : over 6 More numbers… multi-domain e.g. Gmap use mts0.google.com & mts1 for map, but these are same server (CNAME = mts.l.google.com)
  12. 12. BUT STILL…• Concurrent tcp means • Abuse of server resources • intermediary‟s resources, as well • e.g. NAT, proxy, FireWall… • Need additional coding to keep order.
  13. 13. http://www.flickr.com/photos/33224129@N00/3348658950/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
  14. 14. SPDY• Who proposed? • Google• Goal • SPEED!!• First POST in ML(spdy–dev) • Nov 17th, 2009• Current version • SPDY 2• Services with SPDY • Almost Google‟s site • Twitter• Supported Browser • Google Chrome • Mozilla Firefox • Amazon Silk Browser• Servers • Apache, nginx, jetty, node, … http://www.chromium.org/spdy
  15. 15. FEATURESCurrent practice SPDY • Multiplexing request under single tcp • Header compression • Server push feature
  16. 16. [BTW] SPDY NEEDS TLSTUNNELING UNDERCOMMON ENV In real internet, there are lots of devices verifing http protocol. Load Fire proxy balan wall cer Block!! Raw spdy transaction Can‟t touch TLS tunneling
  17. 17. [BTW] HOW TO SWITCH SPDY AND HTTPS• tls NPN : Next Protocol Negotiation • Under non-SPDY browser, HTTPS is automatically used;-) Client Hello Server Hello spdy2 http/1.1 http://tools.ietf.org/id/draft-agl-tls-nextprotoneg-03.html
  18. 18. MULTIPLEXEach streams are treated as key-value pair. TLS tunneling SPDY_SESSION_SYN_STREAM req 5 req 3 req 1 1 res 5 res 3 res SPDY_SESSION_SYN_REPLY
  19. 19. PREVENT HOLBLOCKING (!PIPELINE)Case : Pipeline Case : non Pipeline (SPDY) 1 1 3 5 3 5 BLOCKED
  20. 20. MULTIPLEX : TWOLAYERS• Split into two parts • Framing layer • In this layer, doesn‟t care about value • Value is just a binary data • HTTP layer • How to fit HTTP protocol into SPDY‟s framing layer as binary data.
  21. 21. [REF] SYN_REPLYFraming layer key HTTP layer (HTTP header messages are also treated as key-value pair ) value Compressed (binary)http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft2
  22. 22. HEADER COMPRESSIONFraming layer As described in previous slide key HTTP layer (HTTP header messages are also treated as key-value pair ) value Compressed (binary)http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft2
  23. 23. SERVER PUSH• It’s just for SPEED!! • Don‟t be considered as common push servicew/o server push w/ server push index.html index.html <head>〜</head> css, js Send css, js, image etc. <body>〜</body> w/o client‟s request image, video, etc.
  24. 24. SERVER PUSH [CONT]Used when required. index.html(e.g. HTMLparser, ajax request) Just cached Send css, js, image etc. w/o client‟s request Cache
  25. 25. http://www.flickr.com/photos/petrahenl/6857301701/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
  26. 26. DEMO1. FEEL SPEEDIN SPECIFIC CASE Normal HTTP SPDYhttp://spdykomtest.appspot.com/pub/test.html https://spdykomtest.appspot.com/pub/test.html
  27. 27. DEMO2. IN COMMON CASE& PUSH FEATURE https://spdykomtest.appspot.com/pub/makuhari/index.html
  28. 28. http://www.flickr.com/photos/regansbox/2371720977/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
  29. 29. NO CODING REQUIRED(W/O SERVER PUSH)Just change / update your middleware is enough. Contents layer is completely html css js php independent w/ SPDY. Document root Apache + mod_spdy Nginx + patch Server engine
  30. 30. GAE IS NICE PLACE TO TRY SPDY • Common manners of deploying on GAE is enough. • All you need is changing protocol schema (http => https) Quite easy!!Channel API also works with  http://blog.livedoor.jp/kotesaki/archives/1802324.html
  31. 31. FALLBACK WORKSWELL!!
  32. 32. W/ SERVER PUSH(CASE NODE-SPDY)app.get(„hoge‟, function(req, res) { if (req. ){ var headers = {„content-type‟, „text/javascript‟}; res.push(„hoge.js‟, headers, function(e, s) { s.end(“alert(0);”); }); } res.sendfile(__dirname + “/public/index.html”);}
  33. 33. http://www.flickr.com/photos/vbthe/7237597146/• Introduction• What’s SPDY?• DEMO• How to use it?• How to make it?
  34. 34. IS IT THE RIGHT CHOICEFOR LARGE DATA?Use SPDY for large resources … right solution? • encryption cost • CDN doesn‟t work • Block short data transfer ( really SPDY/3 solve it? ) Netwok loss !! 1 Large data (image, video, …) 3 json Short data is often high priority than large.
  35. 35. INFORMATIVE ENTRYAmazons Silk Browser Acceleration Tested: Less BandwidthConsumed, But Slower Performancehttp://www.anandtech.com/show/5139/amazons-silk-browser-tested-less-bandwidth-consumed-but-slower-performance
  36. 36. WHAT ARE THEBOTTLENECKS? Amazon‟s SPDY w/ TLS Proxy enhanced by SPDY Of course, I‟m not sure ;-)
  37. 37. STUDY FROMCURRENT PRACTICEGoogle map’s image is transported byanother SPDY connection.Twitter doesn’t use SPDY for user’s icontransaction.“with research, Find best practice”
  38. 38. TOOLS:SPDY INDICATOR
  39. 39. TOOLS:DEV TOOL, NET-INTERNALS
  40. 40. TOOLS:SPEED TRACER
  41. 41. MOST IMPORTANTTHING“Rich user experience inadequate system cost.” • Goal is not so simple, but we should achieve  • Not only SPDY, but also other method should be considered together.
  42. 42. JUST TRY AND FEELW/ GAE!!
  43. 43. SUGGESTED LINKS• SPDY - The Chromium Projects • http://www.chromium.org/spdy• spdy-dev • https://groups.google.com/forum/?fromgroups#!forum/spdy -dev• モバイルネットワークにおける SPDY のパフォーマンス • http://googledevjp.blogspot.jp/2012/05/spdy.html• こてさきAjax:SPDY • http://blog.livedoor.jp/kotesaki/archives/cat_46494.html• Node.js で Hello SPDY を作る • http://d.hatena.ne.jp/jovi0608/20120517/1337235058
  44. 44. http://www.flickr.com/photos/23086934@N02/2250806050/

×