Front-end rearchitect SPA

Transcript

1. kaonavi Tech Talk # 7 Yuuki Minami SPA
2. Yuuki Minami 2018 4 CTO FEST 🍜 @maminami_minami
3. 7 MPA SPA
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
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
28. MPA SPA 🥺 🥰
30. !! !!🕺 !