# Frontend Adalah: Pengertian, Fungsi, dan Contohnya

> Frontend adalah bagian aplikasi yang dilihat dan dipakai pengguna. Pahami HTML, CSS, JavaScript, cara kerja di browser, framework, dan tugas frontend developer.

**URL:** https://www.ciptadusa.com/blog/frontend-adalah  
**Type:** blog  
**Author:** PT Cipta Dua Saudara  
**Category:** Teknologi  
**Published:** 2026-10-26  
**Cover:** https://www.ciptadusa.com/media/uploads/blog/2026-10/1792981264338-frontend-adalah-20261026.webp  

## Article

Frontend adalah bagian aplikasi atau website yang dilihat dan dipakai langsung oleh pengguna: tata letak halaman, menu, tombol, formulir, gambar, dan respons saat tombol ditekan. AWS mendefinisikannya sebagai bagian yang dilihat pengguna dan mencakup elemen visual seperti tombol, kotak centang, grafik, dan pesan teks, sehingga pengguna bisa berinteraksi dengan aplikasi ([sumber](https://aws.amazon.com/id/compare/the-difference-between-frontend-and-backend/)).

Contoh sederhananya: saat Anda membuka halaman produk di toko online, frontend yang menyusun foto, harga, pilihan varian, dan tombol "Tambah ke Keranjang". Saat tombol itu ditekan, frontend mengirim permintaan ke backend, menunggu jawabannya, lalu memperbarui ikon keranjang di layar. Artikel ini membahas pengertian frontend, teknologi dasarnya, cara kerjanya di browser, pilihan rendering, framework, kualitas yang perlu dijaga (performa, responsif, aksesibilitas, keamanan), peran frontend developer, dan cara bisnis menilai frontend sebuah proyek.

## Pengertian Frontend

Frontend juga disebut sisi klien (client side), karena kodenya dijalankan di perangkat pengguna, yaitu di dalam browser atau aplikasi mobile. AWS menjelaskan bahwa istilah frontend mengacu pada antarmuka pengguna grafis (GUI) seperti menu navigasi, elemen desain, tombol, gambar, dan grafik. Secara teknis, halaman yang dilihat pengguna beserta komponen UI-nya disebut Document Object Model atau DOM ([sumber](https://aws.amazon.com/id/compare/the-difference-between-frontend-and-backend/)).

MDN, dokumentasi web milik Mozilla, menggambarkan hubungan klien dan server begini: server menyimpan halaman, situs, atau aplikasi. Saat klien ingin membuka sebuah halaman, salinan kode halaman itu diunduh dari server ke perangkat klien, lalu dirender oleh browser dan ditampilkan ke pengguna ([sumber](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works)). Kode yang diunduh dan dirender di perangkat pengguna itulah wilayah frontend.

### Frontend Adalah Bagian Website yang Mana?

Pada website, frontend adalah semua yang tampil dan bisa disentuh pengunjung: header dan menu, isi halaman, formulir kontak, slider, tabel harga, footer, sampai pesan error saat formulir belum lengkap. Bagian yang bekerja di belakangnya, seperti database, aturan bisnis, dan pengecekan hak akses, termasuk backend. Pembahasan lengkap sisi server ada di artikel [backend adalah](/blog/backend-adalah).

### Frontend dan UI/UX, Apa Bedanya?

UI/UX adalah pekerjaan desain: riset pengguna, alur, wireframe, prototipe, dan tampilan visual. Frontend adalah pekerjaan rekayasa yang mengubah desain itu menjadi kode yang berjalan di browser atau aplikasi. Desainer memutuskan tombol apa yang ada dan di mana posisinya, sedangkan frontend developer membuat tombol itu benar-benar bisa ditekan, mengirim data, dan menampilkan hasilnya. Penjelasan sisi desain ada di [UI UX adalah](/blog/ui-ux-adalah).

## Tiga Teknologi Dasar Frontend: HTML, CSS, dan JavaScript

MDN menyebut HTML, CSS, dan JavaScript sebagai tiga lapis teknologi standar web yang saling menumpuk ([sumber](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript)):

| Teknologi | Peran | Contoh di halaman |
| --- | --- | --- |
| HTML | Bahasa markup untuk menyusun struktur dan makna konten | Judul, paragraf, tabel data, gambar, video, tombol |
| CSS | Bahasa aturan gaya untuk tampilan | Warna latar, jenis huruf, tata letak beberapa kolom |
| JavaScript | Bahasa skrip untuk perilaku dinamis | Konten yang diperbarui, peta interaktif, animasi, validasi formulir |

Isi tabel dirangkum dari MDN ([sumber](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript)). MDN memakai contoh sebuah tombol: HTML memberi struktur dan fungsinya, CSS membuatnya enak dilihat, dan JavaScript menambahkan perilaku saat tombol diklik.

AWS menambahkan bahwa JavaScript bekerja dengan memanipulasi DOM. Artinya frontend bisa menangani interaksi dasar sendiri, misalnya menampilkan kalender atau memeriksa apakah alamat email yang diketik sudah valid, lalu meneruskan permintaan yang lebih kompleks ke backend ([sumber](https://aws.amazon.com/id/compare/the-difference-between-frontend-and-backend/)).

## Cara Kerja Frontend di Browser

MDN menjelaskan urutan langkah yang dilalui browser untuk mengubah HTML, CSS, dan JavaScript menjadi piksel di layar, yang disebut critical rendering path ([sumber](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Critical_rendering_path)):

1. Browser mengirim permintaan HTTP, dan server membalas dengan dokumen HTML.
2. Browser mem-parsing HTML menjadi pohon DOM. Setiap kali menemukan tautan ke stylesheet, skrip, atau gambar, browser meminta file tersebut.
3. Dari CSS, browser membangun CSS Object Model (CSSOM).
4. DOM dan CSSOM digabung menjadi render tree yang berisi gaya untuk semua konten yang terlihat.
5. Tahap layout menghitung ukuran dan posisi setiap elemen.
6. Halaman dilukis (paint) ke layar.

Setelah halaman tampil, JavaScript bisa mengubah DOM sebagai respons atas tindakan pengguna. MDN mendefinisikan DOM sebagai API yang merepresentasikan dokumen HTML sebagai pohon node; node bisa dibuat, dipindah, dan diubah, serta diberi event listener yang terpicu saat sebuah kejadian terjadi ([sumber](https://developer.mozilla.org/en-US/docs/Glossary/DOM)).

Ilustrasi alur di aplikasi pemesanan internal (contoh untuk menjelaskan konsep, bukan data proyek nyata):

1. Admin gudang membuka halaman "Pesanan Hari Ini". Frontend menampilkan kerangka tabel dan indikator memuat.
2. Frontend meminta daftar pesanan ke API backend, lalu mengisi tabel dengan hasilnya.
3. Admin mengetik nama pelanggan di kolom pencarian. Frontend menyaring baris tabel langsung di browser tanpa memuat ulang halaman.
4. Admin menekan "Tandai Dikirim". Frontend menonaktifkan tombol agar tidak ditekan dua kali, mengirim permintaan ke backend, lalu mengubah status baris menjadi "Dikirim" setelah backend mengonfirmasi.
5. Jika koneksi gagal, frontend menampilkan pesan yang jelas dan tombol untuk mencoba lagi.

Perhatikan bahwa keputusan penting, misalnya apakah admin itu berhak menandai pesanan, tetap diperiksa backend. Frontend bertugas membuat prosesnya jelas dan nyaman dipakai.

## Rendering: SSR, CSR, dan Situs Statis

Ada beberapa cara menghasilkan HTML yang dilihat pengguna, dan pilihan ini memengaruhi kecepatan tampil, SEO, dan beban server.

- **Client-side rendering (CSR).** HTML dibuat oleh JavaScript di browser. MDN mencatat manfaatnya: perpindahan halaman tidak butuh memuat ulang penuh sehingga aplikasi terasa responsif, dan pembaruan berikutnya cukup mengambil data dari API ([sumber](https://developer.mozilla.org/en-US/docs/Glossary/CSR)).
- **Server-side rendering (SSR).** HTML dibuat di server lalu dikirim ke klien. Menurut MDN, halaman SSR masih bisa dibaca sebagian tanpa JavaScript, lebih mudah dibaca crawler mesin pencari dan media sosial, dan server bisa mengambil semua data yang dibutuhkan sekaligus ([sumber](https://developer.mozilla.org/en-US/docs/Glossary/SSR)).
- **Situs statis.** Konten dibuat saat build, bukan saat ada permintaan, dan bisa disajikan dari CDN tanpa server aplikasi ([sumber](https://developer.mozilla.org/en-US/docs/Glossary/SSR)).

MDN menegaskan SSR dan CSR tidak saling meniadakan dan bisa digabung dalam satu aplikasi, misalnya server mengirim kerangka halaman lalu klien mengambil data tambahan ([sumber](https://developer.mozilla.org/en-US/docs/Glossary/CSR)). Aplikasi yang hanya memuat satu dokumen lalu memperbarui isinya lewat JavaScript disebut single-page application (SPA). MDN mencatat SPA bisa terasa lebih dinamis, dengan kompromi di sisi SEO, pengelolaan state, navigasi, dan pemantauan performa ([sumber](https://developer.mozilla.org/en-US/docs/Glossary/SPA)). Untuk proyek Next.js, perbandingan strategi rendering dibahas lebih detail di [SSR, SSG, atau ISR](/blog/ssr-ssg-isr-nextjs).

## Framework dan Library Frontend

MDN menjelaskan bahwa framework adalah library yang membawa aturan tentang cara software dibangun. Aturan ini membuat aplikasi lebih bisa diprediksi, dan prediktabilitas membantu aplikasi tetap terawat saat ukurannya bertambah ([sumber](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction)). MDN menyebut Ember, Angular, Vue, dan React sebagai "big four" framework sisi klien saat ini.

React, misalnya, memperkenalkan dirinya sebagai library untuk antarmuka web dan native. React membangun antarmuka dari potongan-potongan bernama komponen, lalu menggabungkannya menjadi layar, halaman, dan aplikasi ([sumber](https://react.dev/)). Pendekatan komponen ini memudahkan tim memakai ulang bagian yang sama, seperti kartu produk atau tabel data, di banyak halaman.

Framework bukan keharusan. Untuk halaman yang hampir seluruhnya statis, HTML dan CSS dengan sedikit JavaScript sudah cukup. Pilihan sebaiknya mempertimbangkan seberapa interaktif aplikasinya, kemampuan tim yang akan merawatnya, dan kebutuhan SEO. Di CDS, aplikasi web dan platform dibangun dengan React, Next.js, atau Astro, dipilih per proyek berdasarkan kebutuhan, kemampuan tim internal, dan biaya operasional jangka panjang ([sumber](/services/software)).

## Kualitas Frontend yang Perlu Dijaga

AWS menyebut tujuan developer frontend adalah pengalaman pengguna yang positif, aksesibilitas dan performa yang optimal, serta desain responsif yang berjalan baik di berbagai platform dan perangkat ([sumber](https://aws.amazon.com/id/compare/the-difference-between-frontend-and-backend/)). Empat aspek berikut bisa dipakai sebagai acuan.

### Performa dan Core Web Vitals

Google merangkum pengalaman halaman dalam tiga metrik Core Web Vitals, beserta ambang "baik" berikut ([sumber](https://web.dev/articles/vitals)):

| Metrik | Mengukur | Target baik |
| --- | --- | --- |
| Largest Contentful Paint (LCP) | Kecepatan memuat konten utama | Maksimal 2,5 detik sejak halaman mulai dimuat |
| Interaction to Next Paint (INP) | Responsivitas terhadap interaksi | 200 milidetik atau kurang |
| Cumulative Layout Shift (CLS) | Stabilitas visual (tata letak tidak melompat) | 0,1 atau kurang |

Google menyarankan target ini diukur pada persentil ke-75 kunjungan, dipisah antara mobile dan desktop ([sumber](https://web.dev/articles/vitals)). Google Search Central juga menyebut Core Web Vitals yang baik selaras dengan apa yang ingin dihargai sistem peringkat utamanya ([sumber](https://developers.google.com/search/docs/appearance/core-web-vitals)). Checklist teknis untuk Next.js ada di [Next.js untuk SEO dan Core Web Vitals](/blog/seo-core-web-vitals-nextjs).

### Desain Responsif

MDN mendefinisikan responsive web design sebagai pendekatan agar halaman tampil baik di semua ukuran dan resolusi layar sambil tetap mudah dipakai. Tekniknya mencakup tata letak fleksibel dengan grid dan flexbox, media query, gambar responsif, serta meta tag viewport agar halaman tampil semestinya di perangkat mobile ([sumber](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)).

### Aksesibilitas

Web Content Accessibility Guidelines (WCAG) dari W3C menjelaskan cara membuat konten web lebih mudah diakses penyandang disabilitas. WCAG 2.2 berisi 13 pedoman yang dikelompokkan dalam empat prinsip: perceivable, operable, understandable, dan robust, dengan kriteria keberhasilan di level A, AA, dan AAA ([sumber](https://www.w3.org/WAI/standards-guidelines/wcag/)). Contoh penerapannya di frontend: teks alternatif untuk konten non-teks seperti gambar, semua fungsi bisa dipakai dengan keyboard, dan konten yang lebih mudah dilihat dan didengar pengguna ([sumber](https://www.w3.org/WAI/standards-guidelines/wcag/glance/)).

### Keamanan di Sisi Klien

Kode frontend berjalan di perangkat pengguna, sehingga siapa pun bisa melihat dan mengubahnya. Karena itu validasi di browser membantu kenyamanan, tetapi pemeriksaan keamanan tetap harus dilakukan di backend. Risiko khas frontend adalah Cross-Site Scripting (XSS). OWASP menjelaskan XSS sebagai serangan injeksi saat skrip berbahaya disisipkan ke situs yang tepercaya, dan celahnya muncul ketika aplikasi memakai input pengguna di output tanpa validasi atau encoding. Skrip tersebut bisa mengakses cookie, token sesi, atau informasi sensitif lain yang disimpan browser ([sumber](https://owasp.org/www-community/attacks/xss/)). Guardrail sebelum produksi dibahas di [security dan deployment Next.js](/blog/nextjs-security-deployment).

## Apa Itu Frontend Developer?

Frontend developer adalah developer yang membangun dan merawat sisi antarmuka aplikasi. AWS menyebut keterampilan utamanya meliputi JavaScript, CSS, dan HTML, pengetahuan desain untuk membuat alur pengguna yang menarik, penguasaan framework frontend, dan optimasi performa ([sumber](https://aws.amazon.com/id/compare/the-difference-between-frontend-and-backend/)).

Tugas frontend developer, dirangkum dari bagian-bagian di atas:

- Menerjemahkan desain UI/UX menjadi komponen dan halaman yang berjalan.
- Menghubungkan tampilan dengan API backend, termasuk status memuat, kosong, dan error.
- Memastikan halaman responsif di berbagai ukuran layar.
- Menjaga performa halaman dan memantau metrik seperti Core Web Vitals.
- Menerapkan praktik aksesibilitas dan mencegah celah seperti XSS.
- Menulis pengujian antarmuka dan ikut memperbaiki masalah setelah rilis.

Developer yang menguasai frontend dan backend sekaligus disebut full-stack developer ([sumber](https://aws.amazon.com/id/compare/the-difference-between-frontend-and-backend/)).

## Cara Bisnis Menilai Frontend Sebuah Proyek

Pemilik bisnis tidak perlu membaca kode untuk menilai kualitas frontend. Daftar periksa berikut adalah panduan internal CDS, bukan standar resmi:

- **Coba di perangkat yang dipakai pengguna Anda.** Buka di ponsel tim lapangan atau pelanggan, bukan hanya di laptop kantor.
- **Minta laporan Core Web Vitals.** Tanyakan hasil LCP, INP, dan CLS halaman utama, beserta alat ukurnya.
- **Uji alur utama sampai selesai.** Misalnya isi formulir, kirim pesanan, dan lihat apa yang terjadi saat data salah atau koneksi putus.
- **Cek aksesibilitas dasar.** Apakah formulir bisa diisi hanya dengan keyboard, dan apakah gambar penting punya teks alternatif.
- **Tanyakan pilihan rendering dan alasannya.** Halaman yang perlu muncul di Google punya kebutuhan berbeda dengan dashboard internal di balik login.
- **Pastikan kode dan komponen diserahkan.** Termasuk dokumentasi agar tim lain bisa melanjutkan.

Uji penerimaan sebelum rilis bisa mengikuti panduan [UAT adalah](/blog/uat-adalah). Komponen anggaran frontend, desain, dan integrasi dibahas di [biaya pembuatan aplikasi berbasis web](/blog/biaya-pembuatan-aplikasi-berbasis-web), sedangkan biaya setelah rilis ada di [biaya maintenance aplikasi](/blog/biaya-maintenance-aplikasi).

## Frontend di Proyek CDS

Di [layanan pembuatan software custom](/services/software) kami, frontend dikerjakan untuk aplikasi web dan platform, aplikasi mobile iOS dan Android, e-commerce dan situs bisnis, serta dashboard internal. Prosesnya dimulai dari tahap Design, yaitu wireframe ke prototipe yang bisa diklik dan diuji dengan pengguna nyata sebelum masuk pengembangan. Pembangunan berjalan dalam sprint dua minggu dengan review kode, pengujian otomatis, dan demo setiap Jumat, dan setiap rilis menyertakan kode sumber penuh, lingkungan staging dan produksi, serta dokumentasi teknis ([sumber](/services/software)).

Jika aplikasi lama Anda lambat atau sulit dipakai dan Anda belum yakin harus memperbaiki atau membangun ulang, tim [konsultasi IT](/services/consulting) kami bisa membantu memetakan masalahnya terlebih dahulu. Kami juga mengembangkan produk sendiri seperti [Zetta CRM](/incubating/zetta-crm), dan hasil kerja untuk klien bisa Anda lihat di [portofolio](/works).

## FAQ Seputar Frontend

### Frontend adalah apa dalam bahasa sederhana?

Frontend adalah bagian aplikasi atau website yang dilihat dan dipakai pengguna, seperti halaman, menu, tombol, dan formulir. Kodenya berjalan di browser atau aplikasi di perangkat pengguna.

### Apa perbedaan frontend dan backend?

Frontend mengurus tampilan dan interaksi di perangkat pengguna. Backend mengurus data, aturan bisnis, dan keamanan di server. Frontend mengirim permintaan, backend memproses dan membalasnya, lalu frontend menampilkan hasilnya.

### Bahasa apa yang dipakai untuk frontend?

Dasarnya HTML untuk struktur, CSS untuk tampilan, dan JavaScript untuk perilaku. Di atasnya, developer dapat memakai framework atau library seperti React, Vue, Angular, atau Ember.

### Apa itu frontend developer?

Frontend developer adalah developer yang membangun antarmuka aplikasi: mengubah desain menjadi kode, menghubungkannya dengan API backend, serta menjaga performa, tampilan responsif, dan aksesibilitas.

### Apakah frontend sama dengan UI/UX?

Tidak. UI/UX adalah pekerjaan desain, sedangkan frontend adalah pekerjaan pemrograman yang mewujudkan desain itu menjadi antarmuka yang berjalan. Keduanya bekerja berdampingan dalam satu proyek.

### Apa itu micro frontend?

Micro frontend adalah pendekatan memecah frontend yang besar menjadi bagian-bagian lebih kecil yang dikembangkan dan dirilis terpisah, mirip cara microservices memecah backend. Artikel di martinfowler.com menyebut manfaatnya berupa codebase yang lebih kecil dan mudah dirawat, tim yang lebih mandiri, dan pembaruan bertahap, dengan biaya berupa ukuran unduhan yang bisa membesar akibat dependensi ganda serta kompleksitas operasional dan tata kelola ([sumber](https://martinfowler.com/articles/micro-frontends.html)). Artikel yang sama menempatkan konteksnya pada produk besar yang dikerjakan banyak tim sekaligus.

## Butuh Frontend yang Cepat dan Mudah Dipakai?

Frontend menentukan kesan pertama pelanggan dan kenyamanan tim Anda memakai aplikasi setiap hari. CDS membantu merancang dan membangun frontend untuk aplikasi web, mobile, e-commerce, dan dashboard internal, lengkap dengan prototipe yang diuji pengguna dan kode yang diserahkan ke tim Anda. Diskusikan kebutuhan Anda lewat halaman [layanan software](/services/software).


---

*Markdown version of https://www.ciptadusa.com/blog/frontend-adalah — generated for AI agents and LLM crawlers.*