Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end rearchitect SPA

Avatar for South South
July 28, 2022
0
450

Front-end rearchitect SPA

Avatar for South

South

July 28, 2022
Tweet

More Decks by South

See All by South
TSConfig Solution Style & subpath imports to switch types on a per-file basis
Avatar for South maminami373
1
220
JSConf JP 2022 introduce React Query
Avatar for South maminami373
2
7.1k
JSConf jp 2021 kaonavi front-end development in the monolithic service
Avatar for South maminami373
1
210
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
Avatar for South maminami373
0
2.2k

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Scaling GitHub
Avatar for Zach Holman holman
462
140k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
It's Worth the Effort
Avatar for 3n 3n
187
28k

Transcript

  1. kaonavi Tech Talk # 7 Yuuki Minami SPA

  2. Yuuki Minami 2018 4 CTO FEST 🍜 @maminami_minami

  3. 7 MPA SPA

  4. None

  5. Front-end Back-end Infrastructure

  6. ( )

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

    Laravel Laravel PHP

  8. (Laravel PHP) ⾒ TTFB

  9. None

  10. 7 2019 React jQuery (Laravel PHP) EC 2

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

  12. MPA SPA API Next.js CloudFront + S 3

  13. SPA

  14. SPA

  15. SPA ( Laravel MPA) & SPA -> React Router v

    6 SPA

  16. URL Middleware, Controller Action Dispatch Side E ff ects MPA

  17. MPA SPA MPA: Side E ff ects SPA: Side E

    ff ects Side E ff ects

  18. Side Effects SPA SPA : Side E ff ects (

    ) SPA Controller SPA URL Side E ff ects Controller SPA

  19. Controller Controller Controller Fat 🤢 API Controller SPA Controller SPA

    SPA

  20. SPA SPA 🤫 ⾒ 👮

  21. SPA

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

  23. Link, useNavigate (state Omit) MPA Side E ff ects <Link>

    Props shouldPageLoad

  24. Router.tsx <Route> SPA src/pages Next.js

  25. Code Splitting React.lazy Code Splitting✂ SPA

  26. ESLint no-restricted-imports rule no-restricted-imports import import paths patterns ESLint >=

    v 8 . 1 9 . 0
  27. None

  28. MPA SPA 🥺 🥰

  29. None

  30. !! !!🕺 !