Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-end rearchitect SPA
Search
South
July 28, 2022
0
420
Front-end rearchitect SPA
South
July 28, 2022
Tweet
Share
More Decks by South
See All by South
JSConf JP 2022 introduce React Query
maminami373
2
7k
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
200
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
2k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Making Projects Easy
brettharned
116
6k
The Language of Interfaces
destraynor
156
24k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Unsuck your backbone
ammeep
669
57k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
4 Signs Your Business is Dying
shpigford
182
22k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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
!! !!🕺 !