Istilah Single Page Application atau biasa disebut SPA mungkin sudah tidak asing lagi bagi seorang web programmer. Tetapi pasti masih ada beberapa web programmer yang belum tahu seperti apa dan bagaimana cara kerjanya.
Single Page Application merupakan 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.
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.
Salah satu aplikasi web yang memanfaatkan SPA adalah devhoz. Di sana kita akan melihat tampilan yang ringkas dan keren dengan perpindahan antar halaman yang lebih cepat. Hal tersebut dikarenakan browser tidak harus memuat ulang seluruh halaman.
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 yang terlalu lama untuk berpindah antar halaman.
Jadi, Perlukah Website Kita Menggunakan SPA ?
Jawabannya adalah tergantung kebutuhan. Karena bagaimanapun SPA memiliki kekurangan dan kelebihannya. Berikut ini adalah beberapa keuntungan dan kekurangan Single Page Application.
Keuntungan Single Page Application
- Lebih cepat dibandingkan dengan multi page application.
Kebanyakan resource seperti HTML, CSS dan JS diload pada saat pertama kali aplikasi dibuka dan akan berfungsi terus sampai aplikasi ditutup.Perpindahan halaman tidak perlu melakukan request keseluruhan elemen halaman, tetapi hanya data tertentu saja yang belum di request saat inisiasi pertama kali. Ada konsep “virtual DOM” dimana perubahan pada DOM hanya terjadi pada elemen yang berubah. Sedangkan pada Multi Page Application, DOM akan diperbarui secara menyeluruh karena perpindahan halaman harus melakukan request kepada server dan server memberikan respon berupa html. - Tidak perlu mensetup “server”.
SPA hanya memiliki satu buah index.html, beberapa css dan beberapa javascript. Sehingga kita cukup drag index.html terebut untuk menjalankan aplikasi SPA. Namun tentunnya ini sangat basic. Kita tetap membutuhkan server jika ingin mengoptimasi performa dari SPA itu sendiri. - Proses debug sangat mudah cukup dengan menggunakan browser (console).
Jika terjadi error cukup refresh pada browser maka akan tampil errornya di console tidak perlu melalui proses compile. Pada SPA compile akan dilakukan diakhir saat seluruh aplikasi telah selesai dikerjakan(build) dengan menggunakan webpack dan babel(untuk transpile) untuk menghasilkan index.html , file-file css serta file-file javascript yang telah digabungkan menjadi satu. - Satu kode untuk berbagai macam platform.
Dengan javascript kita dapat membuat website, desktop, android, iOS, Windows phone. Terdapat beberapa framework untuk membangun mobile apps dengan javascript antara lain react native dan ionic(berbasiskan angular) - Prosess Caching lebih efektif karena memanfaatkan local storage pada browser.
Sebuah aplikasi dapat mengirim hanya 1 request, lalu responnya di simpan dalam local storage sehingga dapat digunakan kembali bahkan dalam keadaan offline sekalipun.
Kekurangan Single Page Application
- Tidak bagus dalam hal SEO.
Optimasi SEO pada SPA sangat sulit dilakukan karena sejatinya hanya ada 1 halaman yang bisa diindex oleh mesin pencari, serumit dan sebanyak apapun data dari aplikasi tersebut. Route pada SPA tidak bisa dijadikan sebagai URL yang bisa diindex pada mesin pencari. Saat ini, mulai dikembangkan tools SPA untuk keperluan SEO. Metodenya adalah mem-build SPA secara server-side sehingga setiap route yang dihasilkan akan menjadi URL. Contoh tools ini adalah Angular Universal dan Server-side Rendering pada VueJS - Berat saat dibuka/load untuk pertama kali.
SPA merequest kebanyakan resourcenya saat pertama kali aplikasi dibuka. Hal ini pastinya menyebabkan loading yang sangat lama. - Sangat bergantung pada Javascript.
Semua aksi dalam SPA menggunakan javascript, sehingga ketika javascript di browser dimatikan oleh user aplikasi tidak akan berjalan sama sekali. - Masalah kompabilitas browser.
Karena SPA mengandalkan javascript dan browser, ketidakcocokan antaran browser satu dan lainnya lebih beresiko terjadi. Ini bisa disebabkan karena user menggunakan browser lama, perbedaan versi javascript pada browser yang berbeda, dan sebagainya.
Itulah beberapa penjelasan mengenai Single Page Application, sekarang kamu sudah mengetahui apa itu Single Page Application beserta kekurangan dan kelebihannya. Bagi kamu yang ingin membuat website yang menggunakan Single Page Application atau sesuai dengan keinginan kamu bisa langsung kunjungi devhoz dan konsultasikan web seperti apa yang kamu butuhkan.
