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

Front-end rearchitect SPA

South
July 28, 2022
220

Front-end rearchitect SPA

South

July 28, 2022
Tweet

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