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

Front-end rearchitect SPA

Avatar for South South
July 28, 2022
550
0

Front-end rearchitect SPA

Avatar for South

South

July 28, 2022

More Decks by South

See All by South
Automating Web Accessibility Testing with AI Agents
Avatar for South maminami373
1
2k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
Avatar for South maminami373
2
330
JSConf JP 2022 introduce React Query
Avatar for South maminami373
2
7.4k
JSConf jp 2021 kaonavi front-end development in the monolithic service
Avatar for South maminami373
1
260
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
Avatar for South maminami373
0
2.5k

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
400
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.6k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
350
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
210

Transcript

  1. kaonavi Tech Talk # 7 Yuuki Minami SPA

  2. Yuuki Minami 2018 4 CTO FEST 🍜 @maminami_minami

  3. 7 MPA SPA

  4. None

  5. Front-end Back-end Infrastructure

  6. ( )

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

    Laravel Laravel PHP

  8. (Laravel PHP) ⾒ TTFB

  9. None

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

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

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

  13. SPA

  14. SPA

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

    6 SPA

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

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

    ff ects Side E ff ects

  18. Side Effects SPA SPA : Side E ff ects (

    ) SPA Controller SPA URL Side E ff ects Controller SPA

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

    SPA

  20. SPA SPA 🤫 ⾒ 👮

  21. SPA

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

  23. Link, useNavigate (state Omit) MPA Side E ff ects <Link>

    Props shouldPageLoad

  24. Router.tsx <Route> SPA src/pages Next.js

  25. Code Splitting React.lazy Code Splitting✂ SPA

  26. ESLint no-restricted-imports rule no-restricted-imports import import paths patterns ESLint >=

    v 8 . 1 9 . 0
  27. None

  28. MPA SPA 🥺 🥰

  29. None

  30. !! !!🕺 !