Setelah membahas pengertian dan sejarah singkat React JS, dalam tutorial kali ini akan dibahas tentang fungsi dari React JS serta untuk apa React digunakan.
Fungsi dari React JS
Berangkat dari pengertian, React berfungsi untuk merancang user interface. Namun kenapa harus menggunakan React? Karena toh kita tetap bisa membuat user interface web dengan HTML, CSS dan JavaScript saja. Jadi apa fungsi dari React JS?
Untuk menjawab pertanyaan ini, mari bahas sekilas tentang evolusi user interface di web programming.
Melihat dari sejarah, JavaScript awalnya dikembangkan sebagai "bahasa pelengkap" untuk menambah efek interaktif ke HTML. Pemrosesan utama halaman web tetap dilakukan di sisi server menggunakan bahasa server seperti PHP, ASP, atau Java.
Alur yang terjadi adalah ketika user men-klik sebuah link, web browser akan meminta file HTML baru ke web server. Setiap kali proses ini terjadi, halaman web akan dimuat ulang dan berganti menjadi halaman baru. Mayoritas web yang ada di internet saat ini masih memakai prinsip yang sama. Ciri khasnya, halaman web akan reload begitu kita men-klik link atau mengisi form.
Di tahun 1999, Microsoft merilis web browser Internet Explorer 5 dengan fitur XMLHttp Request. Fitur ini memungkinkan JavaScript bisa berkomunikasi langsung ke server tanpa perlu men-load seluruh halaman. Ini cukup revolusioner dan membuka banyak cara baru dalam berinteraksi di suatu website.
Sesaat setelah itu muncul web yang memanfaatkan penuh XMLHttpRequest, di antara yang paling terkenal adalah Gmail. Pada saat kita mengakses gmail, rasanya lebih mirip aplikasi dekstop daripada website. Halaman web tidak butuh refresh ketika sebuah menu di klik, padahal itu sebuah link yang dibuat dari tag <a> HTML biasa.
Saat membuka web Gmail, pada dasarnya kita mengakses satu halaman saja. Yang berubah hanya bagian-bagian tertentu dari halaman tersebut. Karena itulah web seperti gmail disebut dengan istilah SPA (Single Page Application). Web SPA terasa responsive dan lebih cepat sebab web server tidak perlu mengirim halaman baru setiap kali link di klik, tapi cukup data yang diminta JavaScript saja.
Di sisi programming, membuat SPA dengan JavaScript murni terbilang cukup sulit. Terlebih saat itu masih banyak perbedaan implementasi dari satu web browser dengan web browser lain (efek browser war antara IE vs Netscape/Firefox). Inilah yang menjadi alasan munculnya library JavaScript seperti jQuery yang memudahkan penulisan kode antar web browser.
Sejak awal 2010 hingga beberapa tahun setelahnya, jQuery sangat populer dan memiliki fitur AJAX (Asynchronous Javascript and XML) yang memudahkan penulisan XMLHttpRequest.
Akan tetapi seiring kompleksitas website modern, jQuery mengalami kendala saat memproses halaman SPA yang makin kompleks. Di sisi lain, JavaScript terus di update dan memiliki fitur-fitur baru yang bisa menggantikan banyak fungsi jQuery.
Disinilah React hadir sebagai "versi modern" dari jQuery terutama dalam pembuatan SPA. React menerapkan konsep virtual DOM yang lebih efisien, serta memecah halaman web menjadi komponen-komponen kecil yang saling bekerja sama satu sama lain.
Jadi, fungsi utama React adalah mempermudah pembuatan web SPA (Single Page Application).
SPA (Single Page Application) vs MPA (Multi Page Application)
Jika web dengan fitur full AJAX disebut sebagai SPA (Single Page Application), maka "web tradisional" bisa disebut sebagai MPA (Multi Page Application).
Beberapa sumber ada yang menyebut kalau SPA adalah teknologi masa depan. Salah satu bukti kuat, mayoritas web perusahaan besar sudah beralih ke SPA seperti Facebook, Instagram, Twitter, serta semua produk Google (Youtube, Google Drive, Google Map, dll). Web besar dan startup Indonesia juga banyak yang menerapkannya.
Prinsip kerja "web tradisional" vs SPA (sumber gambar: medium)
Namun bukan berarti SPA tidak memiliki kelemahan. Salah satu yang sering dibahas adalah berkaitan dengan SEO (Search Engine Optimization). Search engine seperti Google masih kesulitan meng-index web yang sepenuhnya di generate menggunakan JavaScript. Di sini, MPA atau web tradisional masih lebih mudah di index Google.
Untuk masalah loading time, web SPA memang lebih cepat karena tidak perlu memuat ulang seluruh halaman. Akan tetapi proses loading awal (saat halaman pertama dibuka) butuh waktu yang lebih lama karena harus mendownload banyak kode JavaScript.
Serta bagaimana untuk web browser yang tidak mendukung JavaScript (atau JavaScriptnya di matikan)? Well… web SPA tidak akan bisa berjalan sama sekali.
Atas beberapa alasan itulah sampai sekarang kita masih banyak menemukan web MPA. Teknologi untuk membuat web SPA juga masih relatif baru dan mulai booming sejak kemunculan library/framework JS seperti React atau Vue dalam beberapa tahun ini.
Bagi rekan-rekan yang ingin mendalami web programming atau ingin berkarier sebagai web programmer profesional, menurut saya teknologi SPA tetap menjadi salah satu skill yang harus dimiliki. Memang tidak semua web cocok dibuat menjadi SPA, akan tetapi kita harus punya skill jika client meminta web seperti itu.
Baik, dalam tutorial ini kita sudah membahas bahwa fungsi utama dari React adalah untuk pembuatan web SPA. Selanjutnya kita akan mulai persiapan membuat kode program React, yakni Cara Mengakses File React.