Front-end rearchitect SPA

by South

Slide 1

Slide 1 text

kaonavi Tech Talk # 7 Yuuki Minami SPA

Slide 2

Slide 2 text

Yuuki Minami 2018 4 CTO FEST 🍜 @maminami_minami

Slide 3

Slide 3 text

7 MPA SPA

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Front-end Back-end Infrastructure

Slide 6

Slide 6 text

( )

Slide 7

Slide 7 text

Laravel (PHP ) Multiple-Page Application React HTML Laravel View API Laravel Laravel PHP

Slide 8

Slide 8 text

(Laravel PHP) ⾒ TTFB

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

7 2019 React jQuery (Laravel PHP) EC 2

Slide 11

Slide 11 text

Laravel (Front-end Laravel) ⾒ 💪 💪 💪 💪

Slide 12

Slide 12 text

MPA SPA API Next.js CloudFront + S 3

Slide 13

Slide 13 text

SPA

Slide 14

Slide 14 text

SPA

Slide 15

Slide 15 text

SPA ( Laravel MPA) & SPA -> React Router v 6 SPA

Slide 16

Slide 16 text

URL Middleware, Controller Action Dispatch Side E ff ects MPA

Slide 17

Slide 17 text

MPA SPA MPA: Side E ff ects SPA: Side E ff ects Side E ff ects

Slide 18

Slide 18 text

Side Effects SPA SPA : Side E ff ects ( ) SPA Controller SPA URL Side E ff ects Controller SPA

Slide 19

Slide 19 text

Controller Controller Controller Fat 🤢 API Controller SPA Controller SPA SPA

Slide 20

Slide 20 text

SPA SPA 🤫 ⾒ 👮

Slide 21

Slide 21 text

SPA

Slide 22

Slide 22 text

React Router SPA Next.js (next/link) Location State React Router

Slide 23

Slide 23 text

Link, useNavigate (state Omit) MPA Side E ff ects Props shouldPageLoad

Slide 24

Slide 24 text

Router.tsx SPA src/pages Next.js

Slide 25

Slide 25 text

Code Splitting React.lazy Code Splitting✂ SPA

Slide 26

Slide 26 text

ESLint no-restricted-imports rule no-restricted-imports import import paths patterns ESLint >= v 8 . 1 9 . 0