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
520
0

Front-end rearchitect SPA

Avatar for South

South

July 28, 2022

More Decks by South

See All by South
Automating Web Accessibility Testing with AI Agents
Avatar for South maminami373
1
1.9k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
Avatar for South maminami373
2
310
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.4k

Featured

See All Featured
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
180
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
170
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
990
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.6k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
110
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
430
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
11k

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