Ready for React in 2019

https://frontend-conf.fukuoka.jp/

Transcript

1. 3FBEZGPS
   3FBDUJO
   'SPOUFOE$POGFSFODF'VLVPLB
   
   !LPCB
   

   View Slide

2. View Slide

3. "HFOEB
   w 'VODUJPO$PNQPOFOU
   w 69GPSBMMVTFST
   w 'VUVSF1MBOT
   w -JWF$PEJOH
   

   View Slide

4. 'VODUJPO$PNQPOFOU
   

   View Slide

5. 3FBDUNFNP
   w 0QUJNJ[F'VODUJPO$PNQPOFOU
   w 1VSF$PNQPOFOUGPS'VODUJPO$PNQPOFOU
   

   View Slide

6. )PPLT
   Custom Hook
   

   View Slide

7. w )PPLTNVTUCFDBMMFEJOUIFTBNFPSEFS
   )PPLT
   Hook
   Hook
   next
   Fiber
   memoizedState
   

   View Slide

8. "WPJEl8SBQQFSIFMMz
   https://www.youtube.com/watch?v=dpw9EHDh2bM
   

   View Slide

9. +BWB4DSJQU`T$MBTTJTIBSE
   w 'PS
   w )BSEUPPQUJNJ[F
   w 'PS
   w AUIJTAPG+BWB4DSJQUIBTNBOZQJUGBMMT
   

   View Slide

10. .PSF%FUBJMTʜ
    https://blog.cybozu.io/entry/2018/11/02/113000
    

    View Slide

11. 69GPSBMM6TFST
    

    View Slide

12. 
    
    
    
    
    
    
    
    
    
    
    4VTQFOTF
    1. Throw a Promise
    2. Wait to resolve the Promise
    3. Resume the rendering
    

    View Slide

13. 4VTQFOTF
    Throw a Promise
    if the resource doesn’t
    have a cache data
    

    View Slide

14. 3FBDUMB[ZXJUI 4VTQFOTF
    
    w $PEF4QMJUUJOHXJUI%ZOBNJD*NQPSU 4UBHF
    
    

    View Slide

15. 5JNFTMJDJOH
    User Blocking
    Normal Priority
    

    View Slide

16. 5JNFTMJDJOH
    w 8PSLJOHPOTUBOEBSEJ[JOHUIFTDIFEVMJOH
    NFDIBOJTNXJUIB$ISPNF5FBN
    w IUUQTHJUIVCDPNTQBOJDLFSNBJOUISFBE
    TDIFEVMJOH
    w 8IBUBCPVU8FC8PSLFSTʁ
    

    View Slide

17. /FX1SPpMFS
    

    View Slide

18. 69GPSBMMVTFST
    w 4VTQFOTFMB[Z
    w 'PSVTFSTJOIJHITQFFEOFUXPSLBOETMPX
    OFUXPSL
    w 5JNFTMJDJOHMB[Z
    w 'PSVTFSTVTJOHIJHIQPXFSEFWJDFTBOEMPX
    QPXFSEFWJDFT
    w 1SFMPBE1SFSFOEFS
    

    View Slide

19. https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
    

    View Slide

20. 'VUVSF
    

    View Slide

21. 3FMFBTF1MBOTGPS4UBCMF
    w 3FBDUMB[ZXJUI4VTQFOTF
    w 3FBDU)PPLT 2
    
    w $PODVSSFOU.PEF 2
    
    w %BUBGFUDIJOHXJUI4VTQFOTF NJE
    
    w 4FSWFS3FOEFSFSGPS4VTQFOTF
    
    w .PEFSOJ[JOH3FBDU%0.
    
    w
    
    Now
    

    View Slide

22. 1SFQBSFGPSUIFGVUVSF
    w :PVDBOVTFOFXGFBUVSFTJODSFNFOUBMMZXJUIPVU
    CSFBLJOHDIBOHFT
    w 6TF3FBDU4USJDU.PEF$PNQPOFOU
    w 'JYXBSOJOHTJO4USJDU.PEFʜ4USJDU.PEF
    

    View Slide

23. -JWF$PEJOH
    https://github.com/koba04/react-hacker-news-stories
    

    View Slide

24. 5IBOLZPV
    
    speakerdeck.com/koba04
    

    View Slide