Apa itu SPA (Single Page Application)?

Apa itu SPA (Single Page Application)

Hai sobat Coders!

Kali ini kita akan membahas mengenai Single Page Application atau biasa disebut SPA. Untuk web programmer mungkin sudah tidak asing lagi tentang istilah SPA. Tetapi masih ada beberapa web programmer yang masih belum tahu seperti apa dan bagaimana cara kerjanya. Yuk langsung saja kita bahas.

Pengertian

Sesuai dengan namanya Single Page Application yaitu sebuah konsep aplikasi web yang memiliki satu halaman saja. Jadi gimana tuh, kok web tetapi hanya satu halaman, apakah cukup? Karena yang kita tahu sebuah aplikasi web biasanya memiliki lebih dari satu halaman. Seperti ada halaman untuk home, login, register dan lain-lain.

Cara Kerja

Pada web biasa atau multi page jika kita melakukan navigasi kehalaman lain, maka browser akan memuat ulang seluruh halaman setelah melakukan request ke server. Berbeda dengan web Single Web Application, ketika kita melakukan navigasi atau berpindah kehalaman lain, maka javascript akan melakukan fetching ke server dan mengganti tampilan ke navigasi lain tanpa perlu browser memuat ulang seluruh halaman.

Analogi

Misalkan kita mempunyai sebuah website yang menampilkan lukisan rumah dan pohon yang memiliki warna. Nah, pada web tradisional atau multi page lukisan rumah dan pohon akan dilukis diserver lalu dikirimkan ke browser untuk ditampilkan.

Namun pada web Single Page Application kita diberikan panduan warna untuk situs tersebut. Kemudian menerapkan warna (data dan konten) untuk mengisi template yang telah dibuat (rumah dan pohon). Jadi semisal web kita sudah mempunyai lukisan rumah dan pohon tetapi belum memiliki warna, kemudian kita ingin memberi warna, tinggal beri saja warnanya tanpa harus membuat ulang rumah dan pohonnya seperti pada web multi page.

Contoh

Salah satu aplikasi web yang memanfaatkan SPA adalah facebook. Misalnya saat kita sedang berada pada halaman home dari facebook, lalu kita navigasi ke halaman grup atau yang lainnya. Di sana kita akan melihat tidak banyak perubahan yang ditampilkan dan lebih cepat. Hal tersebut dikarenakan browser tidak harus memuat ulang seluruh halaman.

Manfaat

Dengan adanya web SPA navigasi antar halaman jadi lebih cepat karena browser tidak perlu memuat seluruh halaman. Dan tentunya akan memberikan User Experience yang luar biasa, karena user tidak perlu menunggu loading saat berpindah antar halaman.

Jika Coders tertarik mengenai Singel Web Application langsung saja sikat kelas Membangun Aplikasi SPA Laravel VueJS dengan Fitur Authentikasi :D

Oke, cukup sekian pembahasan mengenai Single Page Application. Untuk penjelasan lengkapnya silihkan menuju ke What Is a Single Page Application