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

Front-end rearchitect SPA

South
July 28, 2022
320

Front-end rearchitect SPA

South

July 28, 2022
Tweet

Transcript

  1. kaonavi Tech Talk #
    7

    Yuuki Minami


    SPA

    View full-size slide

  2. Yuuki Minami


    2018 4


    CTO FEST


    🍜
    @maminami_minami

    View full-size slide

  3. Front-end Back-end
    Infrastructure

    View full-size slide

  4. Laravel (PHP ) Multiple-Page
    Application


    React HTML Laravel View


    API Laravel


    Laravel PHP

    View full-size slide

  5. (Laravel PHP) ⾒



    TTFB


    View full-size slide

  6. 7


    2019 React jQuery


    (Laravel PHP) EC
    2

    View full-size slide

  7. Laravel (Front-end Laravel)
    ⾒ 💪


    💪


    💪


    💪

    View full-size slide

  8. MPA SPA


    API






    Next.js


    CloudFront + S
    3

    View full-size slide

  9. SPA
    ( Laravel MPA)




    & SPA


    -> React Router v
    6


    SPA

    View full-size slide



  10. URL Middleware, Controller
    Action Dispatch


    Side E
    ff
    ects
    MPA

    View full-size slide

  11. MPA SPA
    MPA: Side E
    ff
    ects


    SPA: Side E
    ff
    ects
    Side E
    ff
    ects

    View full-size slide

  12. Side Effects SPA
    SPA : Side E
    ff
    ects ( )


    SPA Controller SPA URL


    Side E
    ff
    ects Controller


    SPA

    View full-size slide

  13. Controller
    Controller Controller Fat 🤢


    API


    Controller SPA


    Controller SPA


    SPA



    View full-size slide

  14. SPA
    SPA


    🤫






    👮

    View full-size slide

  15. React Router
    SPA







    Next.js (next/link)


    Location State React Router

    View full-size slide

  16. Link, useNavigate


    (state Omit)


    MPA


    Side E
    ff
    ects


    Props shouldPageLoad

    View full-size slide

  17. Router.tsx





    SPA


    src/pages


    Next.js

    View full-size slide

  18. Code Splitting
    React.lazy Code Splitting✂


    SPA

    View full-size slide

  19. ESLint no-restricted-imports rule
    no-restricted-imports


    import


    import


    paths patterns


    ESLint >= v
    8
    .
    1
    9
    .
    0

    View full-size slide

  20. MPA SPA 🥺








    🥰

    View full-size slide