Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Front-end rearchitect SPA

Avatar for South South
July 28, 2022
0
470

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
1
270
JSConf JP 2022 introduce React Query
Avatar for South maminami373
2
7.2k
JSConf jp 2021 kaonavi front-end development in the monolithic service
Avatar for South maminami373
1
220
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
Avatar for South maminami373
0
2.3k

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k

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