Hexi hexi.pics

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

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