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
340
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.7k
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
150
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
1.7k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Thoughts on Productivity
jonyablonski
59
3.9k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Product Roadmaps are Hard
iamctodd
45
9.7k
What the flash - Photography Introduction
edds
64
11k
Designing with Data
zakiwarfel
96
4.8k
Infographics Made Easy
chrislema
238
18k
How to name files
jennybc
65
93k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Docker and Python
trallard
35
2.7k
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
!! !!🕺 !