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

React Performance Tuning

React Performance Tuning

React Meet up with zeit @2019.04.19

Kento TSUJI

April 19, 2019
Tweet

More Decks by Kento TSUJI

Other Decks in Technology

Transcript

  1. Welcome to Japan!!!!! At asakusa © 2019 The Hotelier Group

    Akasaka K.K. https://anaintercontinental-tokyo.jp/location/asakusa/
  2. Profile • Github: @maxmellon • Twitter: @maxmellon_9039 • Start working

    second year at the recruit-tech • Yosuke Furukawa’s subordinate *BN/FXCJF 'SPOUFOE&OHJOFFS ✨ ✨
  3. What am I doing in R-tech • Develop “AirSHIFT” •

    Develop new features • Improve performance • Performance Hackson in frontend • In other products than AirSHIFT
  4. "EKVTUNFOU 4IJGUT AirSHIFT is web service for store managers of

    part time staffs ※ “Store Manager” manages all schedule 
 of part time job in Japanese $SFBUFXPSL 4DIFEVMF -JTUVQTIJGUT $PMMFDUTIJGUT
 GSPNQBSUT 3FNJOE 1SJOUPVU 3FRVFTU XPSL
  5. BFF (express) Client API Isomorphic Session Data Notification
 (socket.io) Redis

    FCM wrapper (React/Redux) Fetchr CSR SSR DB Push
 Notification WebSocket OAuth CellPhone Application For Part time worker
  6. https://speakerdeck.com/maxmellon/reactzhi-spa-niokeru-pahuomansutiyuningu ࠶ϨϯμϦϯάͷ࠷దԽ 0QUJNJ[BUJPOSFSFOEFSJOH େ͖ͳςʔϒϧͷ7JSUVBMJ[FEԽ 7JSUVBMJ[FEMBSHFTDBMFUBCMFDPNQPOFOU Nodefest’ 18ɺHTML5 Conf Ͱ঺հ Introduced

    Nodefest’ 18 and HTML5 Conf ৄࡉ͸͜ͷεϥΠυʹॻ͍ͯ͋Γ·͢ Details are in these slides https://speakerdeck.com/maxmellon/reactzhi-spa-niokeru-pahuomansutiyuningu
  7. PGVTFSTXJMMMFBWFJGQBHFMPBEJOH UJNFJTMPOHFSUIBOTFDPOET News Lab Japanese AMP Office Hour: Introduction to

    AMP with Duncan Wright, Strategic Partner Manager ΑΓ https://www.youtube.com/watch?time_continue=150&v=3N6yDLP1WUIa
  8. ௐࠪ৚݅ Research condition • /sft/monthlyshift/201701 
 → /sft/monthlyshift/201702 ΁ͷભҠ •

    ը໘αΠζ 1440 x 900 (ϝΠϯλʔήοτ) transition Display size Main target
  9. 50%ͷϢʔβʔ͸1.5ඵҎ಺ʹ
 Ӿཡ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪

    ⚪ ⚪ ⚪ ⚪ 50% of users can load the page within 1.5sec
  10. BFF Client API Request SSR Request Response Response Learning Server

    .PEFM Response Request ୯७Ϛϧίϑաఔ Markov process
  11. BFF Client API Request SSR Request Response Response Learning Server

    .PEFM Response Request ୯७Ϛϧίϑաఔ Markov process ࣍ʹऔಘ͢΂͖ϦιʔεΛϔομʹ஫ೖ #''JOKFDUTJOUPUIFIFBEFSSFTPVSDFTSFRVJSFEOFYU
  12. BFF Client API Learning Server .PEFM LRU-cache exist ? click

    ߦಈ༧૝͕ ”͋ͨͬͨ” ࣌ When the expectation was met
  13. BFF Client API Learning Server .PEFM LRU-cache exist ? click

    ߦಈ༧૝͕ ”֎Εͨ” ࣌ When an expectation is missed