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

Front-end rearchitect SPA

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for South South
July 28, 2022
0
500

Front-end rearchitect SPA

Avatar for South

South

July 28, 2022
Tweet

More Decks by South

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

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.3k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
940
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
380
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
150

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. !! !!🕺 !