Front End, atau bagian depan program perangkat lunak atau situs web, adalah segala sesuatu yang digunakan pengguna untuk berinteraksi. Dari sudut pandang pengguna, frontend identik dengan antarmuka pengguna. Dari sudut pandang pengembang, itu adalah desain antarmuka dan pemrograman yang membuat fungsi antarmuka. Sebaliknya, backend mencakup fungsi dan pemrosesan data yang terjadi di belakang layar.
Salah satu tujuan utama pengembangan frontend adalah untuk menciptakan pengalaman pengguna yang lancar atau “tanpa kendala”. Dengan kata lain, tampilan depan aplikasi atau situs web harus intuitif dan mudah digunakan. Meskipun ini terdengar seperti tujuan yang sederhana, namun ternyata sangat rumit karena tidak semua pengguna atau perangkat sama. Misalnya, aplikasi yang dikembangkan untuk perangkat seluler memerlukan tampilan depan yang sangat berbeda dari aplikasi desktop. Situs web harus berfungsi dengan baik di beberapa perangkat dan ukuran layar, itulah sebabnya pengembangan web modern biasanya melibatkan desain responsif.
Contoh komponen Front End meliputi:
- aplikasi atau tata letak halaman
- grafis
- elemen audio dan video
- konten teks
- elemen antarmuka pengguna (tombol, tautan, bilah alat, bilah navigasi, dll.)
- area masukan (kotak dialog), bidang formulir, area teks, dll.)
- alur pengguna (bagaimana satu antarmuka mengarah ke antarmuka berikutnya)
- preferensi pengguna, tema, dan kustomisasi
Masukan pengguna diterima melalui Front End dan diproses di backend program atau situs web. Kode back end membaca dan menulis data dan mengirimkan output ke pengguna melalui frontend. Karena back end dan Front End aplikasi atau situs web bekerja sama, pekerjaan perangkat lunak sering kali memerlukan pengembangan frontend dan backend. Mengembangkan untuk kedua ujungnya disebut pengembangan tumpukan penuh.
CATATAN: Frontend juga dapat ditulis “front end” (sebagai kata benda) atau “front-end” (sebagai kata sifat). Untuk kesederhanaan, kata majemuk tertutup “frontend” telah menjadi istilah yang dapat diterima untuk keduanya.