Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript over HTTP2

JavaScript over HTTP2

Yuki Ishikawa

May 08, 2016
Tweet

More Decks by Yuki Ishikawa

Other Decks in Technology

Transcript

  1. JavaScript over HTTP/2
    2016.05.08 Kyoto.js #10

    View Slide

  2. @hoto17296

    View Slide

  3. View Slide

  4. View Slide

  5. 2016 . 04 . 26

    View Slide

  6. Node.js v6.0.0 Released !
    • ES2015 Support: 58% → 96% !!!
    IUUQOPEFHSFFO

    View Slide

  7. Babel ࣺͯͨ͘ͳ͍Ͱ͔͢
    • ॏ͍
    • Ϗϧυ؀ڥ࡞Δͷμϧ͍

    View Slide

  8. ͦΖͦΖ
    "Ϗϧυ" ͱ͔͍͏֓೦
    ࣺ͍ͯͨ

    View Slide

  9. ࢀߟɿ Α͋͘ΔϏϧυͷਤ
    KTY
    KT
    KT
    DTT
    TDTT
    TUZM
    CVOEMFKT
    JNBHF
    5SBOTQJMF
    CVOEMF

    PQUJNJ[F

    View Slide

  10. ͳͥϏϧυ͕ඞཁ͔
    • ϒϥ΢βͷ໰୊
    • ES2015 / AltJS ಈ͔ͳ͍
    • ґଘؔ܎ΛղܾͰ͖ͳ͍
    • ύϑΥʔϚϯεͷ໰୊
    • ϑΝΠϧ਺ଟ͍ͱΦʔόʔϔουͰ͔͍
    • ࠷దԽ / ѹॖ ͢Δͱޮ཰͕ྑ͍

    View Slide

  11. ͳͥϏϧυ͕ඞཁ͔
    • Assets ͷϏϧυ͸όουϊ΢ϋ΢ͷू߹ମ
    • Ϗϧυ͠ͳͯ͘΋໰୊ͳ͘ಈ͘ͷͳΒ

    ͦΕ͕Ұ൪ྑ͍ʹܾ·ͬͯΔ

    View Slide

  12. ͳͥϏϧυ͕ඞཁ͔
    • ϒϥ΢βͷ໰୊
    • ES2015 / AltJS ಈ͔ͳ͍
    • ґଘؔ܎ΛղܾͰ͖ͳ͍
    • ύϑΥʔϚϯεͷ໰୊
    • ϑΝΠϧ਺ଟ͍ͱΦʔόʔϔουͰ͔͍
    • ࠷దԽ / ѹॖ ͢Δͱޮ཰͕ྑ͍
    ͦͷ͏ͪ
    ͳΜͱ͔ͳΔ
    ŋ@ŋA

    Ͳ͏ʹͰ΋ͳΔ
    )551

    View Slide

  13. HTTP/2

    View Slide

  14. HTTP ͷྺ࢙
    • 1991 HTTP/0.9
    • 1996 HTTP/1.0
    • 1999 HTTP/1.1
    :
    • 2009 SPDY/1
    • 2013 SPDY/3.1
    • 2015 HTTP/2.0
    8FC͕Ί·͙Δ͘͠

    มԽ͢Δதɺ)551͸ఀ଺
    (PPHMF͕41%:Λఏএ
    41%:͸
    )551ʹٵऩ

    View Slide

  15. HTTP/2 ͷಛ௃
    • HTTP 1.1 ͷηϚϯςΟΫεΛҡ࣋ͨ͠··

    ύϑΥʔϚϯεΛվળ
    • ΑΓෳࡶʹ
    • όΠφϦϓϩτίϧ
    • ଟॏԽ
    • ༏ઌ౓੍ޚ
    • αʔόϓογϡ

    View Slide

  16. ৄ͘͠͸
    HTTP/2 ࣌୅ͷ Web

    http://www.slideshare.net/Jxck/http2-web-web-over-http2-51943080

    View Slide

  17. HTTP/1.1
    • TCP ίωΫγϣϯΛ

    ϦΫΤετຖʹషΓ௚͠
    • ࠷େ̒ίωΫγϣϯͰฒྻ
    $MJFOU 4FSWFS
    (&5
    (&5TUZMFDTT
    (&5CVOEMFKT
    3FTQPOTF
    3FTQPOTFTUZMFDTT
    3FTQPOTFCVOEMFKT

    View Slide

  18. HTTP/2
    • 1ຊͷ TCP ίωΫγϣϯΛ

    ࠷େݶ׆༻
    • ̍ίωΫγϣϯʹ

    ετϦʔϜΛଟॏԽ
    • όΠφϦϑϨʔϜ + ѹॖ
    • ඞཁͳ Assets Λ༧Ί Push

    (Server Push)
    $MJFOU 4FSWFS
    (&5
    164)TUZMFDTT
    164)CVOEMFKT
    3FTQPOTF

    View Slide

  19. DEMO
    https://github.com/hoto17296/http2-example

    View Slide

  20. JSer ͔ΒΈͨ HTTP/2
    • HTTP/1.1 ͷ৔߹
    • ϦΫΤετ਺͸গͳ͍΄͏͕͍͍
    • webpack or Browserify େਖ਼ٛ
    • HTTP/2 ͷ৔߹
    • ଟॏԽ͍ͯ͠ΔͷͰϑΝΠϧଟͯ͘΋ฏؾ
    • Ή͠ΖݻΊͳ͍΄͏͕͍͍ʁ

    View Slide

  21. Web ஀ੜҎདྷͷ
    ৗ͕ࣝେ͖͘෴Δ

    View Slide

  22. HTTP/2 Λ࢖͑͹
    JavaScript ͸

    ΋ͬͱָʹͳΔ

    View Slide

  23. େੲͷඇޮ཰ͳϓϩτίϧͷͨΊʹ
    ߴ౓ͳٕज़Λۦ࢖ͯ͠ർฐ͢Δͷ
    ͦΖͦΖ΍ΊΑ͏

    View Slide

  24. HTTP/2 ͰϫΫϫΫ
    ΤϯδχΞϦϯά͠Α͏
    ₍₍⁽⁽(!( ŋ◡ŋ )ʃ)₎₎⁾⁾

    View Slide