Jika anda ingin mengembangkan front-end suatu platform, seperti sebuah aplikasi atau web, tentunya anda membutuhkan sebuah framework agar platform tersebut bisa berjalan dengan cepat dan berfungsi dengan semestinya, pengembangan platform menjadi lebih efisien. Ada beberapa front-end framework yang dapat digunakan untuk mengembangkan platform, namun anda mungkin sudah mendengar salah satu framework terkenal yang paling banyak digunakan para pengembang saat ini. Framework ini popularitasnya bahkan berada di urutan nomor satu sejak tahun 2019. Seperti yang tertera dalam judul artikel ini, framework tersebut namanya adalah React. Jika anda baru saja mendengar React atau bahkan istilah front-end framework, tenang saja, kami akan membantu anda untuk memahaminya.
 

Apa itu Front-end Framework?

Front-end framework sendiri terdiri dari 2 kata, front-end dan framework. Front-end merujuk pada GUI (Graphical User Interface), yang artinya adalah tampilan layar dari platform itu sendiri, yang mana anda akan bisa berinteraksi dengan click atau sentuhan. Front-end sendiri membutuhkan suatu fondasi agar web bisa berfungsi dan berjalan cepat. Disinilah framework memulai perannya. Framework adalah sebuah struktur yang dapat digunakan untuk membangun sebuah aplikasi web. Dalam sistem komputer, nantinya framework akan menunjukkan jenis program apa yang dapat atau harus dibangun dan bagaimana program-program tersebut akan saling terkait, agar platform bisa berjalan dengan semestinya.

Jadi, Front-end Framework adalah kumpulan program yang digunakan oleh pengembang platform untuk membangun tampilan platform tersebut. Front-end Framework menyediakan struktur dasar di mana elemen visual halaman platform yang langsung berinteraksi dan dilihat oleh pengguna, seperti tata letak, tombol, dan hal lainnya, dapat dibangun secara efisien. Framework ini biasanya dilengkapi dengan seperangkat aturan dan komponen yang dapat digunakan kembali yang mempermudah keseluruhan proses pengembangan dengan membuatnya lebih cepat dan lebih dapat diandalkan. Dengan ini, pengembang dapat fokus pada penyesuaian desain dan fungsionalitas platform tanpa harus membangun setiap elemen dari awal.

Seperti yang sudah dipaparkan sebelumnya, ada beberapa front-end framework yang dapat digunakan untuk mengembangkan sebuah platform. Dalam artikel ini, kita akan membahas Framework yang popularitasnya meningkat secara drastis sejak tahun 2019 yaitu ReactJS. Ada juga framework yang memiliki nama depan yang sama, yaitu React Native. Meskipun kedua framework tersebut memiliki nama depan yang sama, perlu diingat bahwa kedua framework tersebut bukanlah satu framework yang sama ataupun sebuah ekstensi.
 

Kemunculan Front-end Framework

Dua puluh lima tahun yang lalu, sebelum adanya framework, saat itu pengembangan web hanya dapat menggunakan HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets) , dan JavaScript saja. Ketiga hal tersebut adalah bahasa pemrograman, yang mana HTML menentukan struktur konten, CSS menentukan gaya dan tata letak, dan JavaScript membuat konten menjadi interaktif. Proses ini memakan waktu yang sangat lama, dan tentunya melakukan pengembangan web dengan cara ini juga tidaklah mudah. Pada waktu itu juga, penggunaan CSS saat membuat web agar bisa mendukung banyak browser adalah sebuah mimpi buruk bagi para pengembang. Anggap saja suatu platform terlihat baik - baik saja di satu browser. Namun saat menggunakan browser lain, web tersebut akan menjadi sangat berantakan. Begitu juga yang terjadi dengan JavaScript.

Pada awal tahun 2000-an, pengembangan platform menggunakan JavaScript menjadi jauh lebih menyenangkan dan mudah dibandingkan sebelumnya berkat lahirnya JavaScript library. Library disini artinya kumpulan kode yang dapat digunakan kembali oleh pengembang untuk melakukan tugas-tugas umum dan memecahkan masalah tertentu dalam proyek mereka. Salah satu yang pertama dan populer pada masanya dan masih ada sampai sekarang adalah jQuery.

jQuery dirancang untuk menyederhanakan script sisi klien HTML. Ini membuat hal-hal seperti penjelajahan dan manipulasi dokumen HTML, animasi, penanganan event, dan AJAX (memungkinkan halaman web diperbarui secara asinkron) menjadi sangat sederhana dengan API (mekanisme yang memungkinkan dua komponen perangkat lunak untuk berkomunikasi satu sama lain) yang mudah digunakan yang bekerja pada banyak jenis browser yang berbeda. jQuery mempermudah penggunaan JavaScript di web agar bisa lebih interaktif dan lebih menarik.

Lahirnya jQuery juga menjadi faktor munculnya berbagai front-end framework, salah satu yang pertama adalah Backbone.js. Backbone.js memperbaiki masalah-masalah yang dimiliki jQuery dulunya. Kemudian pada tahun 2010, AngularJS dirilis. AngularJS dengan cepat menjadi framework JavaScript yang paling populer. Framework ini menawarkan pengikatan data dua arah (two-way binding), injeksi dependensi, routing packaging, dan banyak lagi. Lalu, pada tahun 2013, sebuah framework yang tidak kalah saing di dunia pengembangan frontend dirilis. Framework tersebut adalah ReactJS.
 

ReactJS

Dikembangkan oleh Facebook pada tahun 2011, ReactJS adalah library JavaScript front-end yang bersifat open-source (terbuka) untuk membangun antarmuka pengguna atau komponen UI. Ini berarti pengembang dapat menggunakan ReactJS untuk membangun semua bagian dari situs web yang dapat dilihat dan berinteraksi dengan pengguna pada browser mereka. Dibandingkan hanya menggunakan JavaScript, ReactJS membuat proses mendesain antarmuka pengguna (UI) menjadi lebih mudah. ReactJS memungkinkan pengembang untuk membuat elemen-elemen yang dapat dengan mudah dan cepat digunakan kembali di bagian lain dari situs web atau aplikasi. Selain itu, ReactJS juga memungkinkan pengembang untuk mengotomatisasi proses perancangan. Berbeda dengan framework lain seperti Angular, ReactJS tidak memberlakukan aturan yang ketat untuk konvensi kode atau organisasi file. Ini berarti pengembang bebas untuk mengatur konvensi yang paling sesuai dengan mereka dan mengimplementasikan ReactJS sesuai keinginan mereka. Dengan React, pengembang dapat menggunakan sebanyak atau sesedikit mungkin karena fleksibilitasnya.
Cara kerja ReactJS berbeda dengan kebanyakan framework lainnya. Biasanya, Anda meminta sebuah halaman web dengan mengetikkan URL-nya di web browser Anda. Browser Anda kemudian mengirimkan permintaan untuk halaman web tersebut, yang kemudian di-render oleh browser Anda. Jika Anda mengklik tautan pada halaman web tersebut untuk menuju ke halaman lain di situs web, permintaan baru akan dikirim ke server untuk mendapatkan halaman baru tersebut. Pola pemuatan bolak-balik antara browser Anda (sisi klien) dan server terus berlanjut untuk setiap halaman atau resource (sumber daya) baru yang Anda coba akses di situs web. cara untuk memuat situs web seperti ini memang bekerja dengan baik, tetapi pertimbangkan situs web yang sangat berbasis data. Pemuatan bolak-balik halaman web secara penuh akan menjadi terbuang buang dan menciptakan pengalaman pengguna yang buruk.

ReactJS mengambil cara yang berbeda dengan memungkinkan Anda membangun Single Page Application (SPA). Aplikasi satu halaman hanya memuat satu dokumen HTML pada permintaan pertama. Kemudian, aplikasi ini memperbarui bagian tertentu, konten, atau isi dari halaman web yang perlu diperbarui menggunakan JavaScript. Pola ini dikenal sebagai perutean sisi klien karena client side tidak perlu memuat ulang halaman web secara penuh untuk mendapatkan halaman baru setiap kali pengguna membuat permintaan baru. Sebagai gantinya, React mencegat permintaan dan hanya mengambil dan mengubah bagian yang perlu diubah tanpa harus memicu pemuatan ulang halaman penuh. Cara ini menghasilkan performa yang lebih baik dan pengalaman pengguna yang lebih dinamis.
 

React Native

Ketika Facebook pertama kali memutuskan untuk menyediakan layanannya di perangkat seluler, mereka memutuskan untuk menggunakan halaman web seluler berbasis HTML5 dibandingkan menggunakan aplikasi native. Namun, solusi ini tidak bertahan dalam kejaran waktu, menyisakan banyak ruang untuk peningkatan UI dan kinerja. Segera setelah itu, pada tahun 2013, pengembang Facebook, membuat sebuah penemuan yang inovatif, dia menemukan sebuah metode untuk membuat elemen UI untuk aplikasi iOS dengan menggunakan JavaScript. Begitulah cara React Native menjadi hidup. Awalnya dikembangkan hanya untuk iOS, Facebook dengan cepat menindaklanjutinya dengan dukungan Android, sebelum akhirnya framework ini dipublikasikan pada tahun 2015.

Layaknya ReactJS, React Native juga open source (terbuka). Yang menjadi perbedaan signifikan antara ReactJS dan React Native adalah, ReactJS digunakan untuk mengembangkan aplikasi web dan halaman web, sedangkan React Native digunakan untuk mengembangkan aplikasi mobile. React Native adalah framework aplikasi mobile hybrid, yang memungkinkan pengembang untuk mengembangkan aplikasi mobile dengan satu basis kode. Framework JavaScript ini memungkinkan pengembang membuat aplikasi seluler yang dirender secara native di berbagai platform seperti iOS dan Android.

Kata native sendiri ada maknanya. Ketika sebuah aplikasi atau perangkat lunak bersifat native, maka aplikasi atau perangkat lunak tersebut ditulis untuk sistem operasi (OS) alami komputer. Sebagai contoh, platform asli game Xbox 360 adalah Xbox 360 karena dirancang untuk perangkat dan OS tertentu. Aplikasi yang dijalankan secara native dan kode native biasanya memberikan pengalaman pengguna yang lebih baik dengan lebih sedikit masalah kinerja. Aplikasi ini berjalan lebih baik dan lebih cepat karena dibuat sesuai dengan platform tertentu. Seperti namanya, React Native memungkinkan pengembang untuk merender aplikasi secara native. Aplikasi pengembang akan menggunakan platform pemrograman yang sama dengan aplikasi native meskipun tidak dibuat secara khusus untuk perangkat tersebut.
 

Perbedaan ReactJS Dengan React Native

Seperti yang telah dipaparkan sebelumnya, ReactJS dan React Native mengikuti prinsip yang sama dalam pengembangannya. Keduanya adalah framework open source yang bekerja dengan lancar dengan JavaScript. Namun, tujuan pengembangan kedua framework tersebut berbeda. Perbedaan utama antara ReactJS dan React Native terletak pada penggunaan dan kemampuannya. ReactJS adalah library JavaScript untuk membangun antarmuka pengguna dan aplikasi web. ReactJS terutama digunakan untuk mengembangkan UI web yang kompleks dan aplikasi satu halaman yang membutuhkan pembaruan yang sering. Dengan ReactJS, pengembang menulis kode menggunakan React dan mengkompilasinya menjadi JavaScript biasa yang dapat berjalan di browser apa pun. Sedangkan, React Native adalah sebuah framework untuk membangun aplikasi mobile native menggunakan React. Framework ini memungkinkan pengembang untuk membuat aplikasi iOS dan Android native hanya dengan menggunakan JavaScript. Dengan React Native, pengembang menulis kode menggunakan React dan React Native akan mengkompilasinya menjadi kode native iOS dan Android. Ini berarti aplikasi React Native menggunakan API platform asli yang sama dengan kode Objective-C/Swift dan Java/Kotlin biasa.

Kesimpulannya, jika anda ingin membangun antarmuka pengguna dan aplikasi web yang komponennya dapat digunakan kembali, mendukung web front-end, dan dijalankan di server, gunakan ReactJS. Jika anda ingin menggunakan mesin JavaScript yang tersedia di host untuk membangun aplikasi seluler untuk platform yang berbeda (iOS, Android, dan lainnya) dalam JavaScript, gunakan React Native.