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

Hexi hexi.pics

Hexi hexi.pics

Hexi talks in NodeConfEU
Hexi uses HTTP/2, io.js, AWS Lambda.

Yosuke Furukawa
PRO

September 09, 2015
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. @yosuke_furukawa
    Hexagonal Sticker as a Service

    View Slide

  2. Hexi
    @yosuke_furukawa

    View Slide

  3. @yosuke_furukawa

    View Slide

  4. Japan Node.js User Group
    Leader

    View Slide

  5. Frontend Engineer (using
    React) at DeNA

    View Slide

  6. Congrats!!!!

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. Hex Sticker

    View Slide

  11. View Slide

  12. View Slide

  13. 8F)FYTUJDLFST%

    View Slide

  14. And

    View Slide

  15. View Slide

  16. 8FIBWFTUBOEBSETQFDGPSTUJDLFST

    View Slide

  17. So. My motivation is …

    View Slide

  18. Let’s make Hexagonal
    Stickers
    https://hexi.pics

    View Slide

  19. View Slide

  20. Hexi inside

    View Slide

  21. Hexi inside
    • HTTP/2 (NGINX patch)
    • io.js (Express)
    • AWS Lambda (image resizer)
    • AWS RDS (MySQL)
    • AWS S3 (image storage)

    View Slide

  22. Hexi inside
    • HTTP/2 (NGINX patch)
    • io.js (Express)
    • AWS Lambda (image resizer)
    • AWS RDS (MySQL)
    • AWS S3 (image storage)

    View Slide

  23. HTTP/2

    View Slide

  24. HTTP/2
    • features
    • multi-requests per 1 connection
    • binary header (HPACK)
    • Server push / prioritized asset requests
    (not implemented yet in nginx patch)

    View Slide

  25. performance

    View Slide

  26. https (HTTP1.1)

    View Slide

  27. https (HTTP1.1)
    TFDPOET

    View Slide

  28. https (HTTP2)

    View Slide

  29. https (HTTP2)
    TFDPOETTFDPOET

    View Slide

  30. https (HTTP 1.1 vs HTTP2)

    View Slide

  31. HTTP2 pros
    • No concat JS/CSS, No CSS Sprite
    • No domain sharding

    View Slide

  32. HTTP2 pros
    • No concat JS/CSS, No CSS Sprite
    • No domain sharding
    /POFFEUPSFEVDFOVNCFSTPGSFRVFTU

    View Slide

  33. Hexi inside
    • HTTP/2 (NGINX patch)
    • io.js (Express)
    • AWS Lambda (image resizer)
    • AWS RDS (MySQL)
    • AWS S3 (image storage)

    View Slide

  34. io.js features
    • ES6 friendly (these features are using in Hexi)
    • class
    • template string literals
    • block scope
    • Better performance than Node.js v0.12
    • almost 5% faster

    View Slide

  35. GBTUFSUIBO/PEFKTW

    View Slide

  36. AWS Lambda features
    • Hook Amazon resource actions
    • S3 PUT/DELETE
    • Invoke Node.js functions
    • resize image (using imagemagick)
    • PUT resized image to S3

    View Slide

  37. 1. PUT initial image to S3
    2. invoke lambda functions
    3. resize image
    4. PUT resized
    images

    View Slide

  38. 1. PUT initial image to S3
    2. invoke lambda functions
    3. resize image
    4. PUT resized
    images
    DSFBUFXPSLFSTFBTJMZ

    View Slide

  39. okrabyte
    • NOTE: EXPERIMENTAL
    okrabyte
    extract
    characters
    Tokyo Node Festival 2015

    View Slide

  40. DEMO
    okrabyte

    View Slide

  41. conclusion

    View Slide

  42. Hexi is …
    • Hexagonal Stickers as a Service
    • We can provide stickers world-wide.
    • Stickers can be created by mobile phone :)

    View Slide

  43. Hexi has new technologies
    /POFFEUPVTFIBDLUP
    SFEVDF)551SFRVFTUT
    &4GSJFOEMZ
    1FSGPSNBODFJNQSPWFE
    DSFBUFXPSLFST
    FBTJMZ

    View Slide

  44. one more thing
    http://nodefest.jp/

    View Slide

  45. NodeFest 2015

    View Slide

  46. Thank you !!!!
    @yosuke_furukawa

    View Slide