JavaScript over HTTP2

Kyoto.js #10
https://kyotojs.doorkeeper.jp/events/42568

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