SlideShare a Scribd company logo
1 of 44
SPDY!!



JUNE 22 ND , 2012 @ APP ENGINE JA NITE
KOMASSHU
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
ACTIVITIES                   http://www.html5rocks.com/en/tutorials/speed/quick/


(LOVE SPEED!!)




                                      Referred!!, But… orz
                                      (I know I should do feedback)




          http://wakachi.komasshu.info/
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 SERVICES
1991                                                                                             2012
http://www.ibarakiken.gr.jp/www/index.html   http://www.ocn.ne.jp/   https://www.facebook.com/
ALSO COMMUNICATION
    MODEL HAS CHANGED
1991                                                                                               2012
http://www.ibarakiken.gr.jp/www/index.html     http://www.ocn.ne.jp/   https://www.facebook.com/




                                                                         Multiple resources
        Single resource                                                           +
                                             Multiple resources            Bi-directional
TRANSPORT PROTOCOL
STILL HTTP


REQUEST   GET index.html

                           RESPONSE

REQUEST   GET style.css

                           RESPONSE
ISSUE IN HTTP
  Response time become slower when
  required resources increased.




     And each transaction has
     overlapped headers.
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)
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.
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 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
FEATURES
Current practice            SPDY




 • Multiplexing request under single tcp
 • Header compression
 • Server push feature
[BTW] SPDY NEEDS TLS
TUNNELING UNDER
COMMON 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
[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
MULTIPLEX
Each 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
PREVENT HOL
BLOCKING (!PIPELINE)
Case : Pipeline              Case : non Pipeline (SPDY)




                   1                              1

                       3 5                            3 5
         BLOCKED
MULTIPLEX : TWO
LAYERS
• 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.
[REF] SYN_REPLY
Framing 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
HEADER
   COMPRESSION
Framing 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
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.
SERVER PUSH [CONT]

Used when
 required.
                                index.html
(e.g. HTML
parser, ajax
  request)
                Just
               cached

                         Send css, js, image etc.
                           w/o client‟s request

                 Cache
http://www.flickr.com/photos/petrahenl/6857301701/




• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?
DEMO1. FEEL SPEED
IN SPECIFIC CASE
 Normal HTTP                                     SPDY




http://spdykomtest.appspot.com/pub/test.html   https://spdykomtest.appspot.com/pub/test.html
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.



                                           Contents layer is completely
    html    css        js   php
                                           independent w/ SPDY.
           Document root



                                  Apache + mod_spdy
                                  Nginx + patch
              Server
              engine
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
FALLBACK WORKS
WELL!!
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”);
}
http://www.flickr.com/photos/vbthe/7237597146/




• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?
IS IT THE RIGHT CHOICE
FOR 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.
INFORMATIVE ENTRY
Amazon's Silk Browser Acceleration Tested: Less Bandwidth
Consumed, But Slower Performance




http://www.anandtech.com/show/5139/amazons-silk-browser-tested-less-
bandwidth-consumed-but-slower-performance
WHAT ARE THE
BOTTLENECKS?




                       Amazon‟s
    SPDY w/ TLS     Proxy enhanced
                       by SPDY




 Of course, I‟m not sure ;-)
STUDY FROM
CURRENT PRACTICE

Google map’s image is transported by
another SPDY connection.


Twitter doesn’t use SPDY for user’s icon
transaction.



“with research, Find best practice”
TOOLS:
SPDY INDICATOR
TOOLS:
DEV TOOL, NET-INTERNALS
TOOLS:
SPEED TRACER
MOST IMPORTANT
THING

“Rich user experience in
adequate system cost.”

 • Goal is not so simple, but we should
   achieve 
 • Not only SPDY, but also other method
   should be considered together.
JUST TRY AND FEEL
W/ GAE!!
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
http://www.flickr.com/photos/23086934@N02/2250806050/

More Related Content

What's hot

memories of tumblr gear & Tumblrowl
memories of tumblr gear & Tumblrowlmemories of tumblr gear & Tumblrowl
memories of tumblr gear & Tumblrowlhonishi
 
Mongodb and Totsy - E-commerce Case Study
Mongodb and Totsy - E-commerce Case StudyMongodb and Totsy - E-commerce Case Study
Mongodb and Totsy - E-commerce Case StudyMitch Pirtle
 
Consuming RESTful services in PHP
Consuming RESTful services in PHPConsuming RESTful services in PHP
Consuming RESTful services in PHPZoran Jeremic
 
Linux, Apache, Mysql, PHP
Linux, Apache, Mysql, PHPLinux, Apache, Mysql, PHP
Linux, Apache, Mysql, PHPwebhostingguy
 
Plack basics for Perl websites - YAPC::EU 2011
Plack basics for Perl websites - YAPC::EU 2011Plack basics for Perl websites - YAPC::EU 2011
Plack basics for Perl websites - YAPC::EU 2011leo lapworth
 
JRuby with Java Code in Data Processing World
JRuby with Java Code in Data Processing WorldJRuby with Java Code in Data Processing World
JRuby with Java Code in Data Processing WorldSATOSHI TAGOMORI
 
Mongrel2, a short introduction
Mongrel2, a short introductionMongrel2, a short introduction
Mongrel2, a short introductionPaolo Negri
 
Real-time Web with Rails and XMPP
Real-time Web with Rails and XMPPReal-time Web with Rails and XMPP
Real-time Web with Rails and XMPPLi Cai
 
HTTP/2 and Java: Current Status
HTTP/2 and Java: Current StatusHTTP/2 and Java: Current Status
HTTP/2 and Java: Current StatusSimone Bordet
 
QEWD.js: Have your Node.js Cake and Eat It Too
QEWD.js: Have your Node.js Cake and Eat It TooQEWD.js: Have your Node.js Cake and Eat It Too
QEWD.js: Have your Node.js Cake and Eat It TooRob Tweed
 
Data Persistence as a Language Feature
Data Persistence as a Language FeatureData Persistence as a Language Feature
Data Persistence as a Language FeatureRob Tweed
 
JavaOne 2009 - TS-5276 - RESTful Protocol Buffers
JavaOne 2009 - TS-5276 - RESTful  Protocol BuffersJavaOne 2009 - TS-5276 - RESTful  Protocol Buffers
JavaOne 2009 - TS-5276 - RESTful Protocol BuffersMatt O'Keefe
 
HTML Training Course in Persian
HTML Training Course in PersianHTML Training Course in Persian
HTML Training Course in PersianAbbas Naderi
 
Service Oriented Integration With ServiceMix
Service Oriented Integration With ServiceMixService Oriented Integration With ServiceMix
Service Oriented Integration With ServiceMixBruce Snyder
 
The Future of library dependency management of Ruby
 The Future of library dependency management of Ruby The Future of library dependency management of Ruby
The Future of library dependency management of RubyHiroshi SHIBATA
 
Scaling Social Games
Scaling Social GamesScaling Social Games
Scaling Social GamesPaolo Negri
 
Fast & Scalable Front/Back-ends using Ruby, Rails & XMPP
Fast & Scalable Front/Back-ends using Ruby, Rails & XMPPFast & Scalable Front/Back-ends using Ruby, Rails & XMPP
Fast & Scalable Front/Back-ends using Ruby, Rails & XMPPPradeep Elankumaran
 
An Introduction to Apache ServiceMix 4 - FUSE ESB
An Introduction to Apache ServiceMix 4 - FUSE ESBAn Introduction to Apache ServiceMix 4 - FUSE ESB
An Introduction to Apache ServiceMix 4 - FUSE ESBAdrian Trenaman
 

What's hot (20)

memories of tumblr gear & Tumblrowl
memories of tumblr gear & Tumblrowlmemories of tumblr gear & Tumblrowl
memories of tumblr gear & Tumblrowl
 
Mongodb and Totsy - E-commerce Case Study
Mongodb and Totsy - E-commerce Case StudyMongodb and Totsy - E-commerce Case Study
Mongodb and Totsy - E-commerce Case Study
 
Into The Box 2018 Ortus Keynote
Into The Box 2018 Ortus KeynoteInto The Box 2018 Ortus Keynote
Into The Box 2018 Ortus Keynote
 
Consuming RESTful services in PHP
Consuming RESTful services in PHPConsuming RESTful services in PHP
Consuming RESTful services in PHP
 
Linux, Apache, Mysql, PHP
Linux, Apache, Mysql, PHPLinux, Apache, Mysql, PHP
Linux, Apache, Mysql, PHP
 
Plack basics for Perl websites - YAPC::EU 2011
Plack basics for Perl websites - YAPC::EU 2011Plack basics for Perl websites - YAPC::EU 2011
Plack basics for Perl websites - YAPC::EU 2011
 
JRuby with Java Code in Data Processing World
JRuby with Java Code in Data Processing WorldJRuby with Java Code in Data Processing World
JRuby with Java Code in Data Processing World
 
Mongrel2, a short introduction
Mongrel2, a short introductionMongrel2, a short introduction
Mongrel2, a short introduction
 
Real-time Web with Rails and XMPP
Real-time Web with Rails and XMPPReal-time Web with Rails and XMPP
Real-time Web with Rails and XMPP
 
HTTP/2 and Java: Current Status
HTTP/2 and Java: Current StatusHTTP/2 and Java: Current Status
HTTP/2 and Java: Current Status
 
QEWD.js: Have your Node.js Cake and Eat It Too
QEWD.js: Have your Node.js Cake and Eat It TooQEWD.js: Have your Node.js Cake and Eat It Too
QEWD.js: Have your Node.js Cake and Eat It Too
 
upload test 1
upload test 1upload test 1
upload test 1
 
Data Persistence as a Language Feature
Data Persistence as a Language FeatureData Persistence as a Language Feature
Data Persistence as a Language Feature
 
JavaOne 2009 - TS-5276 - RESTful Protocol Buffers
JavaOne 2009 - TS-5276 - RESTful  Protocol BuffersJavaOne 2009 - TS-5276 - RESTful  Protocol Buffers
JavaOne 2009 - TS-5276 - RESTful Protocol Buffers
 
HTML Training Course in Persian
HTML Training Course in PersianHTML Training Course in Persian
HTML Training Course in Persian
 
Service Oriented Integration With ServiceMix
Service Oriented Integration With ServiceMixService Oriented Integration With ServiceMix
Service Oriented Integration With ServiceMix
 
The Future of library dependency management of Ruby
 The Future of library dependency management of Ruby The Future of library dependency management of Ruby
The Future of library dependency management of Ruby
 
Scaling Social Games
Scaling Social GamesScaling Social Games
Scaling Social Games
 
Fast & Scalable Front/Back-ends using Ruby, Rails & XMPP
Fast & Scalable Front/Back-ends using Ruby, Rails & XMPPFast & Scalable Front/Back-ends using Ruby, Rails & XMPP
Fast & Scalable Front/Back-ends using Ruby, Rails & XMPP
 
An Introduction to Apache ServiceMix 4 - FUSE ESB
An Introduction to Apache ServiceMix 4 - FUSE ESBAn Introduction to Apache ServiceMix 4 - FUSE ESB
An Introduction to Apache ServiceMix 4 - FUSE ESB
 

Similar to spdy

Type URL, Enter, and Then …
Type URL, Enter, and Then …Type URL, Enter, and Then …
Type URL, Enter, and Then …Jinglun Li
 
Next generation web protocols
Next generation web protocolsNext generation web protocols
Next generation web protocolsDaniel Austin
 
HTML5, HTTP2, and You 1.1
HTML5, HTTP2, and You 1.1HTML5, HTTP2, and You 1.1
HTML5, HTTP2, and You 1.1Daniel Austin
 
SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012Fabian Lange
 
Introduction to HTTP/2
Introduction to HTTP/2Introduction to HTTP/2
Introduction to HTTP/2Ido Flatow
 
HTTP/2 : why upgrading the web? - apidays Paris
HTTP/2 : why upgrading the web? - apidays ParisHTTP/2 : why upgrading the web? - apidays Paris
HTTP/2 : why upgrading the web? - apidays ParisQuentin Adam
 
Maximizing SPDY and SSL Performance (June 2014)
Maximizing SPDY and SSL Performance (June 2014)Maximizing SPDY and SSL Performance (June 2014)
Maximizing SPDY and SSL Performance (June 2014)Zoompf
 
Http2 Security Perspective
Http2 Security PerspectiveHttp2 Security Perspective
Http2 Security PerspectiveSunil Kumar
 
Introduction to HTTP/2
Introduction to HTTP/2Introduction to HTTP/2
Introduction to HTTP/2Ido Flatow
 
Deploying Plack Web Applications: OSCON 2011
Deploying Plack Web Applications: OSCON 2011Deploying Plack Web Applications: OSCON 2011
Deploying Plack Web Applications: OSCON 2011Tatsuhiko Miyagawa
 
HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...
HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...
HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...Edward Burns
 

Similar to spdy (20)

SPDY - or maybe HTTP2.0
SPDY - or maybe HTTP2.0SPDY - or maybe HTTP2.0
SPDY - or maybe HTTP2.0
 
SPDY
SPDYSPDY
SPDY
 
Type URL, Enter, and Then …
Type URL, Enter, and Then …Type URL, Enter, and Then …
Type URL, Enter, and Then …
 
Next generation web protocols
Next generation web protocolsNext generation web protocols
Next generation web protocols
 
SPDY Talk
SPDY TalkSPDY Talk
SPDY Talk
 
Spdy
SpdySpdy
Spdy
 
HTML5, HTTP2, and You 1.1
HTML5, HTTP2, and You 1.1HTML5, HTTP2, and You 1.1
HTML5, HTTP2, and You 1.1
 
SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012
 
SPDY
SPDY SPDY
SPDY
 
WebSocket protocol
WebSocket protocolWebSocket protocol
WebSocket protocol
 
Introduction to HTTP/2
Introduction to HTTP/2Introduction to HTTP/2
Introduction to HTTP/2
 
HTTP/2 : why upgrading the web? - apidays Paris
HTTP/2 : why upgrading the web? - apidays ParisHTTP/2 : why upgrading the web? - apidays Paris
HTTP/2 : why upgrading the web? - apidays Paris
 
Whats next in templating
Whats next in templatingWhats next in templating
Whats next in templating
 
Maximizing SPDY and SSL Performance (June 2014)
Maximizing SPDY and SSL Performance (June 2014)Maximizing SPDY and SSL Performance (June 2014)
Maximizing SPDY and SSL Performance (June 2014)
 
Whats next in templating
Whats next in templatingWhats next in templating
Whats next in templating
 
Http2 Security Perspective
Http2 Security PerspectiveHttp2 Security Perspective
Http2 Security Perspective
 
Introduction to HTTP/2
Introduction to HTTP/2Introduction to HTTP/2
Introduction to HTTP/2
 
SPDY
SPDYSPDY
SPDY
 
Deploying Plack Web Applications: OSCON 2011
Deploying Plack Web Applications: OSCON 2011Deploying Plack Web Applications: OSCON 2011
Deploying Plack Web Applications: OSCON 2011
 
HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...
HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...
HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...
 

More from Kensaku Komatsu

Media processing with serverless architecture
Media processing with serverless architectureMedia processing with serverless architecture
Media processing with serverless architectureKensaku Komatsu
 
Full Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTCFull Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTCKensaku Komatsu
 
04122016 web rtc_globalsummit
04122016 web rtc_globalsummit04122016 web rtc_globalsummit
04122016 web rtc_globalsummitKensaku Komatsu
 
02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshuKensaku Komatsu
 
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSSkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSKensaku Komatsu
 
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!Kensaku Komatsu
 
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るKensaku Komatsu
 
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.Kensaku Komatsu
 
14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会Kensaku Komatsu
 
WebRTCが拓く 新たなWebビジネスの世界
WebRTCが拓く新たなWebビジネスの世界WebRTCが拓く新たなWebビジネスの世界
WebRTCが拓く 新たなWebビジネスの世界Kensaku Komatsu
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Kensaku Komatsu
 
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたちKensaku Komatsu
 
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI Kensaku Komatsu
 
エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策Kensaku Komatsu
 
HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )Kensaku Komatsu
 

More from Kensaku Komatsu (20)

Media processing with serverless architecture
Media processing with serverless architectureMedia processing with serverless architecture
Media processing with serverless architecture
 
Boxdev lt-09082016
Boxdev lt-09082016Boxdev lt-09082016
Boxdev lt-09082016
 
a pattern for PWA, PRPL
a pattern for PWA, PRPLa pattern for PWA, PRPL
a pattern for PWA, PRPL
 
Full Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTCFull Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTC
 
WebRTC 101
WebRTC 101WebRTC 101
WebRTC 101
 
04122016 web rtc_globalsummit
04122016 web rtc_globalsummit04122016 web rtc_globalsummit
04122016 web rtc_globalsummit
 
02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu
 
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSSkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaS
 
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
 
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
 
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
 
FirefoxでgetStats()
FirefoxでgetStats()FirefoxでgetStats()
FirefoxでgetStats()
 
14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会
 
WebRTCが拓く 新たなWebビジネスの世界
WebRTCが拓く新たなWebビジネスの世界WebRTCが拓く新たなWebビジネスの世界
WebRTCが拓く 新たなWebビジネスの世界
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
 
25th nov2014 52thhtml5j
25th nov2014 52thhtml5j25th nov2014 52thhtml5j
25th nov2014 52thhtml5j
 
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
 
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
 
エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策
 
HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )
 

Recently uploaded

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 

Recently uploaded (20)

Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 

spdy

  • 1. SPDY!! JUNE 22 ND , 2012 @ APP ENGINE JA NITE KOMASSHU
  • 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. 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. TODAY’S MAIN IDEA Introduction to SPDY!!
  • 5. TODAY’S AGENDA • Introduction • What’s SPDY? • DEMO • How to use it? • How to make it?
  • 6. http://www.flickr.com/photos/59916467@N06/6974781080/ • Introduction • What’s SPDY? • DEMO • How to use it? • How to make it?
  • 7. EVOLUTION OF WEB SERVICES 1991 2012 http://www.ibarakiken.gr.jp/www/index.html http://www.ocn.ne.jp/ https://www.facebook.com/
  • 8. ALSO COMMUNICATION MODEL HAS CHANGED 1991 2012 http://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. TRANSPORT PROTOCOL STILL HTTP REQUEST GET index.html RESPONSE REQUEST GET style.css RESPONSE
  • 10. ISSUE IN HTTP Response time become slower when required resources increased. And each transaction has overlapped headers.
  • 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. 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. http://www.flickr.com/photos/33224129@N00/3348658950/ • Introduction • What’s SPDY? • DEMO • How to use it? • How to make it?
  • 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. FEATURES Current practice SPDY • Multiplexing request under single tcp • Header compression • Server push feature
  • 16. [BTW] SPDY NEEDS TLS TUNNELING UNDER COMMON 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. [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. MULTIPLEX Each 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. PREVENT HOL BLOCKING (!PIPELINE) Case : Pipeline Case : non Pipeline (SPDY) 1 1 3 5 3 5 BLOCKED
  • 20. MULTIPLEX : TWO LAYERS • 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. [REF] SYN_REPLY Framing 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. HEADER COMPRESSION Framing 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. 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. SERVER PUSH [CONT] Used when required. index.html (e.g. HTML parser, ajax request) Just cached Send css, js, image etc. w/o client‟s request Cache
  • 25. http://www.flickr.com/photos/petrahenl/6857301701/ • Introduction • What’s SPDY? • DEMO • How to use it? • How to make it?
  • 26. DEMO1. FEEL SPEED IN SPECIFIC CASE Normal HTTP SPDY http://spdykomtest.appspot.com/pub/test.html https://spdykomtest.appspot.com/pub/test.html
  • 27. DEMO2. IN COMMON CASE & PUSH FEATURE https://spdykomtest.appspot.com/pub/makuhari/index.html
  • 28. http://www.flickr.com/photos/regansbox/2371720977/ • Introduction • What’s SPDY? • DEMO • How to use it? • How to make it?
  • 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. 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
  • 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. http://www.flickr.com/photos/vbthe/7237597146/ • Introduction • What’s SPDY? • DEMO • How to use it? • How to make it?
  • 34. IS IT THE RIGHT CHOICE FOR 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. INFORMATIVE ENTRY Amazon's Silk Browser Acceleration Tested: Less Bandwidth Consumed, But Slower Performance http://www.anandtech.com/show/5139/amazons-silk-browser-tested-less- bandwidth-consumed-but-slower-performance
  • 36. WHAT ARE THE BOTTLENECKS? Amazon‟s SPDY w/ TLS Proxy enhanced by SPDY Of course, I‟m not sure ;-)
  • 37. STUDY FROM CURRENT PRACTICE Google map’s image is transported by another SPDY connection. Twitter doesn’t use SPDY for user’s icon transaction. “with research, Find best practice”
  • 41. MOST IMPORTANT THING “Rich user experience in adequate system cost.” • Goal is not so simple, but we should achieve  • Not only SPDY, but also other method should be considered together.
  • 42. JUST TRY AND FEEL W/ GAE!!
  • 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