Front-end rearchitect SPA

Transcript

1. kaonavi Tech Talk #
   7
   
   Yuuki Minami
   
   
   SPA
   

   View Slide

2. Yuuki Minami
   
   
   2018 4
   
   
   CTO FEST
   
   
   🍜
   @maminami_minami
   

   View Slide

3. 7
   
   
   MPA SPA
   

   View Slide

4. View Slide

5. Front-end Back-end
   Infrastructure
   

   View Slide

6. ( )
   

   View Slide

7. Laravel (PHP ) Multiple-Page
   Application
   
   
   React HTML Laravel View
   
   
   API Laravel
   
   
   Laravel PHP
   

   View Slide

8. (Laravel PHP) ⾒
   
   
   
   TTFB
   
   
   

   View Slide

9. View Slide

10. 7
    
    
    2019 React jQuery
    
    
    (Laravel PHP) EC
    2
    

    View Slide

11. Laravel (Front-end Laravel)
    ⾒ 💪
    
    
    💪
    
    
    💪
    
    
    💪
    

    View Slide

12. MPA SPA
    
    
    API
    
    
    
    
    
    
    Next.js
    
    
    CloudFront + S
    3
    

    View Slide

13. 
    
    
    
    
    SPA
    

    View Slide

14. SPA
    

    View Slide

15. SPA
    ( Laravel MPA)
    
    
    
    
    & SPA
    
    
    -> React Router v
    6
    
    
    SPA
    

    View Slide

16. 
    
    URL Middleware, Controller
    Action Dispatch
    
    
    Side E
    ff
    ects
    MPA
    

    View Slide

17. MPA SPA
    MPA: Side E
    ff
    ects
    
    
    SPA: Side E
    ff
    ects
    Side E
    ff
    ects
    

    View Slide

18. Side Effects SPA
    SPA : Side E
    ff
    ects ( )
    
    
    SPA Controller SPA URL
    
    
    Side E
    ff
    ects Controller
    
    
    SPA
    

    View Slide

19. Controller
    Controller Controller Fat 🤢
    
    
    API
    
    
    Controller SPA
    
    
    Controller SPA
    
    
    SPA
    
    
    
    

    View Slide

20. SPA
    SPA
    
    
    🤫
    
    
    ⾒
    
    
    
    👮
    

    View Slide

21. SPA
    

    View Slide

22. React Router
    SPA
    
    
    
    
    
    
    
    Next.js (next/link)
    
    
    Location State React Router
    

    View Slide

23. Link, useNavigate
    
    
    (state Omit)
    
    
    MPA
    
    
    Side E
    ff
    ects
    
    
    Props shouldPageLoad
    

    View Slide

24. Router.tsx
    
    
    
    
    
    SPA
    
    
    src/pages
    
    
    Next.js
    

    View Slide

25. Code Splitting
    React.lazy Code Splitting✂
    
    
    SPA
    

    View Slide

26. ESLint no-restricted-imports rule
    no-restricted-imports
    
    
    import
    
    
    import
    
    
    paths patterns
    
    
    ESLint >= v
    8
    .
    1
    9
    .
    0
    

    View Slide

27. View Slide

28. MPA SPA 🥺
    
    
    
    
    
    
    
    
    🥰
    

    View Slide

29. View Slide

30. !!
    
    
    !!🕺
    !
    

    View Slide