Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-end rearchitect SPA
Search
South
July 28, 2022
0
470
Front-end rearchitect SPA
South
July 28, 2022
Tweet
Share
More Decks by South
See All by South
Automating Web Accessibility Testing with AI Agents
maminami373
1
1.8k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
270
JSConf JP 2022 introduce React Query
maminami373
2
7.2k
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
230
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
2.3k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
120
20k
Speed Design
sergeychernyshev
33
1.4k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Visualization
eitanlees
150
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Transcript
kaonavi Tech Talk # 7 Yuuki Minami SPA
Yuuki Minami 2018 4 CTO FEST 🍜 @maminami_minami
7 MPA SPA
None
Front-end Back-end Infrastructure
( )
Laravel (PHP ) Multiple-Page Application React HTML Laravel View API
Laravel Laravel PHP
(Laravel PHP) ⾒ TTFB
None
7 2019 React jQuery (Laravel PHP) EC 2
Laravel (Front-end Laravel) ⾒ 💪 💪 💪 💪
MPA SPA API Next.js CloudFront + S 3
SPA
SPA
SPA ( Laravel MPA) & SPA -> React Router v
6 SPA
URL Middleware, Controller Action Dispatch Side E ff ects MPA
MPA SPA MPA: Side E ff ects SPA: Side E
ff ects Side E ff ects
Side Effects SPA SPA : Side E ff ects (
) SPA Controller SPA URL Side E ff ects Controller SPA
Controller Controller Controller Fat 🤢 API Controller SPA Controller SPA
SPA
SPA SPA 🤫 ⾒ 👮
SPA
React Router SPA Next.js (next/link) Location State React Router
Link, useNavigate (state Omit) MPA Side E ff ects <Link>
Props shouldPageLoad
Router.tsx <Route> SPA src/pages Next.js
Code Splitting React.lazy Code Splitting✂ SPA
ESLint no-restricted-imports rule no-restricted-imports import import paths patterns ESLint >=
v 8 . 1 9 . 0
None
MPA SPA 🥺 🥰
None
!! !!🕺 !