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
360
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
6.8k
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
170
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
1.8k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Writing Fast Ruby
sferik
623
60k
Teambox: Starting and Learning
jrom
130
8.6k
Atom: Resistance is Futile
akmur
261
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Code Reviewing Like a Champion
maltzj
517
39k
The Cult of Friendly URLs
andyhume
75
5.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Bash Introduction
62gerente
607
210k
Agile that works and the tools we love
rasmusluckow
325
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
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
!! !!🕺 !