Sẵn sàng thử sức?
Phỏng vấn thử với AI, nhận đánh giá và feedback chi tiết
Micro-frontend là gì? Khi nào nên sử dụng?
Micro-frontend là pattern chia application thành các modules độc lập, mỗi team phụ trách một phần.
Khi nào dùng:
- Team lớn, cần deploy độc lập
- Nhiều technology stacks khác nhau
- Application phức tạp, cần scale
Implementation: Module Federation (Webpack 5), iframe, Web Components, Single-SPA.
Làm thế nào để optimize Core Web Vitals?
LCP (Largest Contentful Paint):
- Preload critical resources, optimize images
- Use CDN, minimize render-blocking CSS/JS
FID (First Input Delay):
- Code splitting, defer non-critical JS
- Use web workers for heavy computation
CLS (Cumulative Layout Shift):
- Set explicit dimensions for images/videos
- Reserve space for async content
Giải thích Testing Pyramid trong Frontend?
Từ dưới lên:
- Unit Tests (nhiều nhất): Test individual functions, components
- Integration Tests: Test component interactions
- E2E Tests (ít nhất): Test full user flows
// Unit test
test('formatDate returns formatted string', () => {
expect(formatDate(new Date('2024-01-15'))).toBe('15/01/2024');
});
// Integration test
test('form submits with valid data', async () => {
render(<ContactForm />);
await userEvent.type(screen.getByLabelText(/email/i), 'test@example.com');
await userEvent.click(screen.getByRole('button', { name: /submit/i }));
expect(mockSubmit).toHaveBeenCalled();
});SSR vs CSR vs SSG - Khi nào dùng?
| Type | Khi nào | Example |
|---|---|---|
| CSR | SPA, dashboard, admin | CRA, Vite |
| SSR | SEO cần, dynamic content | Next.js, Nuxt |
| SSG | Content ít thay đổi, blog | Gatsby, Astro |
Làm thế nào để thiết kế Component Library?
- Design Tokens: Colors, spacing, typography trong JSON/CSS variables
- Compound Components: Flexible composition (Tabs, Select)
- Accessibility: ARIA labels, keyboard navigation
- Documentation: Storybook với examples
- Testing: Visual regression, unit tests
- Versioning: Semantic versioning, changelog
Bạn xử lý technical debt trong frontend như thế nào?
- Track: Document technical debt trong backlog
- Prioritize: Impact vs effort matrix
- Allocate: 20% sprint time cho tech debt
- Prevent: Code review, testing, documentation
- Communicate: Explain business impact to stakeholders