Mengenal Apa Itu Single Page Application

Single Page Application VS Multi Page Application

Yang membedakan SPA dari Multi Page Application (kebanyakan website, seperti blog ini), adalah bagaimana SPA melakukan request dan resource. SPA lebih hemat dibanding dengan Multi Page Application. Contohnya, pada saat berpindah ke halaman baru, SPA hanya me-request data-data yang diperlukannya saja berupa JSON (Javascript Object Notation), tanpa me-request ulang static files seperti file css, html, dan js nya karena itu sudah di load saat pertama kali.

Berbeda dengan Multipage Application yang setiap perpindahan halaman akan merequest ulang seluruh elemen baik itu static files dan data baru untuk halaman tersebut. Contoh website yang menggunakan SPA antara lain gmail, facebook, github, techinasia dan lain sebagainnya. Untuk multipage web application contohnya adalah wikipedia, kaskus, bukalapak dan lain-lain.

Mekanisme yang berjalan pada SPA layaknya kita menggunakan browser secara native dimana secara penuh memanfaatkan perpindahan halaman, data binding, form, dan lain sebagainya dengan menggunakan javascript. Tidak ada waktu menunggu saat terjadi perpindahan halaman. Hal seperti ini memberikan UX(User experience) yang luar biasa kepada user.

Jadi, Perlukah Website Kita Menggunakan SPA ?

Jawabannya, tergantung kebutuhan. Karena bagaimanapun SPA memiliki kekurangan dan ketidak-cocokan pada sistem-sistem tertentu. Selengkapnya, akan saya jelaskan pada daftar keuntungan dan kekurangan Single Page Application di bawah ini.

Keuntungan Single Page Application

1. 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.
2. 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.
3. 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.
4. 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)
5. 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

1. 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
2. Berat saat di-load/buka pertama kali.
   SPA merequest kebanyakan resourcenya saat pertama kali aplikasi dibuka. Hal ini pastinya menyebabkan loading yang sangat lama.
3. Sangat bergantung pada Javascript.
   Semua aksi dalam SPA menggunakan javascript, sehingga ketika javascript di browser dimatikan oleh user aplikasi tidak akan berjalan sama sekali.
4. Kurang aman dibanding dengan Website biasa.
   SPA rawan terhadap serangan Cross-site Scripting (XSS), yang memungkinan hacker me-inject script client-side (Javascript) pada aplikasi.
5. 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.