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
440
Front-end rearchitect SPA
South
July 28, 2022
Tweet
Share
More Decks by South
See All by South
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
200
JSConf JP 2022 introduce React Query
maminami373
2
7.1k
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
210
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
2.1k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
KATA
mclloyd
29
14k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building Applications with DynamoDB
mza
95
6.4k
Writing Fast Ruby
sferik
628
61k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The Pragmatic Product Professional
lauravandoore
35
6.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
GraphQLとの向き合い方2022年版
quramy
46
14k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
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
!! !!🕺 !