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
460
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.6k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
250
JSConf JP 2022 introduce React Query
maminami373
2
7.2k
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
220
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
2.2k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Unsuck your backbone
ammeep
671
58k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Cult of Friendly URLs
andyhume
79
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Become a Pro
speakerdeck
PRO
29
5.6k
Statistics for Hackers
jakevdp
799
220k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
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
!! !!🕺 !