webdev · 29 Mei 2026

Peta Tooling Frontend

Tools by Category

1. Framework / Library UI

Tool	Buat apa	Kapan pakai
React	Library UI component-based	Default aman, ekosistem besar
Vue	Framework UI yang approachable	Kalau mau DX enak dan struktur jelas
Svelte	Compile-time UI framework	Kalau mau simple dan ringan
Angular	Full framework enterprise	App besar, struktur ketat
SolidJS	Reactive UI performa tinggi	Kalau suka React-like tapi lebih fine-grained

2. Meta-framework

Tool	Buat apa	Kapan pakai
Next.js	React full-stack framework	SEO, SSR, dashboard, web app production
Nuxt	Vue full-stack framework	Next.js versi Vue-ish
SvelteKit	Svelte full-stack framework	App ringan, routing/server built-in
Astro	Content/marketing/static site	Blog, docs, landing page cepat
Remix / React Router Framework	Web app React berbasis route/data loading	Form-heavy app, nested routing

3. Build tool

Tool	Buat apa	Kapan pakai
Vite	Dev server + bundler frontend modern	Default untuk React/Vue/Svelte SPA
Webpack	Bundler klasik	Legacy/enterprise/custom config berat
Rspack	Bundler cepat kompatibel Webpack	Kalau butuh migrasi Webpack lebih cepat
Turbopack	Bundler Next.js modern	Ekosistem Next.js
esbuild	Bundler/transpiler super cepat	Tooling, library, script

Vite adalah build tool modern dengan dev server cepat dan HMR cepat. citeturn425474search1turn425474search5

4. Styling

Tool	Buat apa	Kapan pakai
Tailwind CSS	Utility-first CSS	Cepat bikin UI custom
CSS Modules	Scoped CSS per component	Simple, native-ish
Sass/SCSS	CSS dengan nesting/mixin	Legacy atau prefer CSS tradisional
styled-components / Emotion	CSS-in-JS	Dynamic styling di React
vanilla-extract	Type-safe CSS-in-TS	Design system serius

5. Component library

Tool	Buat apa	Kapan pakai
shadcn/ui	Copy-paste component berbasis Radix + Tailwind	App modern, custom ownership
Radix UI	Headless accessible primitives	Mau bikin design system sendiri
MUI	Material Design React components	Dashboard/admin/internal tool
Chakra UI	Component library ergonomic	Cepat bikin UI React
Ant Design	Enterprise UI components	Admin panel, enterprise dashboard
DaisyUI	Tailwind component classes	Cepat bikin UI dengan Tailwind

6. State management

Tool	Buat apa	Kapan pakai
useState/useReducer	Local state	Default awal
Zustand	Global state simple	Auth state, UI state, app state ringan
Redux Toolkit	Global state kompleks	App besar, state predictable
Jotai	Atomic state	State kecil-kecil per atom
Recoil	Atomic state	Alternatif, tapi momentum lebih lemah
XState	State machine	Flow kompleks: auth, checkout, wizard

7. Server state / data fetching

Tool	Buat apa	Kapan pakai
TanStack Query	Cache API data, loading/error/retry	Hampir default untuk client-side API
SWR	Data fetching React	Simpler alternative
Apollo Client	GraphQL client	Kalau backend GraphQL
urql	GraphQL client ringan	GraphQL tapi ingin lebih simple
tRPC	Type-safe API client-server	Full TS stack

8. Form

Tool	Buat apa	Kapan pakai
React Hook Form	Form management	Default kuat untuk React
Formik	Form library lama	Legacy/populer lama
Zod	Schema validation	Validasi form/API/env
Valibot	Schema validation ringan	Alternatif Zod
Yup	Schema validation lama	Banyak dipakai di legacy

9. Testing

Tool	Buat apa	Kapan pakai
Vitest	Unit/integration test	Default modern, apalagi Vite
Jest	Unit test klasik	Legacy/React Native/banyak ecosystem
Testing Library	Component behavior test	Test dari sudut pandang user
Playwright	E2E web test	Full user journey
Cypress	E2E/component visual test	DX debugging bagus
Storybook	Component workshop/test/docs	Component-driven development

Vitest dibuat untuk bekerja natural dengan Vite dan bisa memakai konfigurasi Vite yang sama. citeturn425474search2turn425474search6 Playwright fokus ke browser automation/E2E lintas Chromium, Firefox, dan WebKit. citeturn425474search3

10. Quality tools

Tool	Buat apa	Kapan pakai
TypeScript	Static typing	Hampir wajib untuk project serius
ESLint	Linting JS/TS	Catch bug/style issue
Prettier	Code formatting	Format otomatis
Biome	Formatter + linter cepat	Alternatif ESLint/Prettier
Knip	Cari unused files/dependencies/exports	Bersihin project
Lefthook / Husky	Git hooks	Jalankan lint/test sebelum commit

11. Package manager

Tool	Catatan
pnpm	Cepat, hemat disk, bagus untuk monorepo
npm	Default Node.js
Yarn	Populer, terutama legacy
Bun	Runtime/package manager cepat, tapi cek kompatibilitas

12. Monorepo

Tool	Buat apa
Turborepo	Task runner/cache monorepo JS/TS
Nx	Monorepo framework lebih lengkap
pnpm workspace	Workspace sederhana
Changesets	Versioning package/library

Stack FE modern yang masuk akal

Untuk React web app biasa:

React
Vite
TypeScript
Tailwind CSS
shadcn/ui
TanStack Query
Zustand
React Hook Form
Zod
Vitest
Testing Library
Playwright
Storybook
ESLint + Prettier/Biome
pnpm

Untuk Next.js app:

Next.js
TypeScript
Tailwind CSS
shadcn/ui
TanStack Query kalau banyak client-side API
React Hook Form + Zod
Vitest
Playwright
Storybook kalau component banyak
ESLint + Prettier/Biome
pnpm

Untuk project kuliah/team kecil, versi realistis:

Wajib:
- React/Next/Vite
- TypeScript
- Tailwind
- ESLint/Prettier atau Biome
- React Hook Form + Zod
- TanStack Query

Bagus kalau sempat:
- Vitest
- Playwright
- Storybook

Tidak usah dulu:
- Redux
- Nx
- microfrontend
- CSS-in-JS kompleks
- custom design system terlalu niat

Mental model frontend tools

Bikin UI:
React / Vue / Svelte

Jalankan & build app:
Vite / Next.js / Nuxt / Astro

Styling:
Tailwind / CSS Modules / Sass

Komponen siap pakai:
shadcn/ui / MUI / Chakra / Ant Design

Data dari API:
TanStack Query / SWR / Apollo

Global state:
Zustand / Redux Toolkit / Jotai

Form:
React Hook Form + Zod

Test:
Vitest / Testing Library / Playwright / Cypress

Dokumentasi component:
Storybook

Quality:
TypeScript / ESLint / Prettier / Biome

Untuk belajar FE tools, urutan yang paling worth it:

1. TypeScript
2. React fundamentals
3. Vite / Next.js
4. Tailwind CSS
5. React Hook Form + Zod
6. TanStack Query
7. Zustand
8. Vitest + Testing Library
9. Playwright
10. Storybook

Storybook itu paling kerasa manfaatnya setelah kamu mulai mikir: “component ini harus reusable, punya banyak state, dan perlu gampang direview orang lain.”