Anda di sini

Pemrograman

Mengapa Facebook Membangun React ?

Aditya Suranata - 02 Desember 2015 17:31:17 0

Mengapa Facebook Membangun React ?

Terdapat begitu banyak framework MVC diluar sana. Mengapa tetap saja Facebook membangun lagi framework lainnya yang dinamakan React dan mengapa kita juga mungkin berminat untuk menggunakannya ?

React bukanlah sebuah framework MVC.

React merupakan sebuah pustaka (library) untuk membangun antarmuka pengguna (UI) yang bersifat composable. Hal tersebut melibatkan pembuatan komponen-komponen yang dapat digunakan berulang-ulang dan menampilkan data yang selalu berganti-ganti setiap waktu.

React tidak menggunakan template.

Secara tradisional, UI sebuah aplikasi web dibangun menggunakan template atau direktif HTML. Template-template tersebut mendikte dan menentukan set lengkap dari abstraksi apa saja yang bisa kamu gunakan untuk membangun UI dari aplikasi mu.

Pendekatan yang digunakan React untuk membangun antarmuka pengguna adalah dengan memecahnya kedalam komponen-komponen. Ini berarti React menggunakan bahasa pemrograman yang benar-benar lengkap untuk merender tampilan, yang mana dapat kita lihat sebagai kelebihan ketimbang penggunaan template, seperti beberapa alasan berikut:

  • JavaScript bersifat fleksibel, merupakan bahasa pemrograman yang powerful dengan kemampuan untuk membangun abstraksi-abstraksi. Kemampuan ini benar-benar penting untuk keperluan aplikasi berskala besar.
  • Dengan mempersatukan markup yang kamu buat dengan pandangan logikanya, React dapat dengan nyata membuat tampilan jauh lebih mudah untuk dikembangkan dan dipelihara.
  • Dengan mematangkan sebuah pemahaman dari markup dan konten kedalam JavaScript, tidak ada lagi rentetan string manual dan tentunya memperkecil permukaan yang dapat terkena paparan kerentanan XSS.

Facebook juga membuat JSX, sebuah ekstensi perintah opsional, untuk mengakomodir jika kita lebih memilih kemudahan pembacaan dari HTML ke dalam JavaScript berformat raw.

Pembaharuan Reactive Menjadi Super Simpel

React benar-benar berkilau ketika digunakan pada data selalu berubah seiring waktu.

Dalam aplikasi JavaScript tradisional, kamu perlu melihat pada data apa yang berubah dan secara imperatif juga membuat perubahan pada DOM yang terkait untuk membuatnya tetap terlihat up-to-date. Bahkan AngularJS, yang mana menyediakan antarmuka deklaratif melalui direktif dan data binding juga masih memerlukan fungsi linking untuk memperbaharui DOM node secara manual.

Untuk ini, React mengambil pendekatan dengan cara lain.

Ketika komponen-komponen yang kamu buat diinisialisasi pertama kali, metode render dipanggil, yang kemudian membuat sebuah representasi ringan dari tampilan. Melalui representasi tersebut, sebuah string yang berisi markup diproduksi, dan disuntikan (diinject) kedalam dokumen. Ketika data yang kamu miliki berubah, metode render pun dipanggil kembali. Agar dapat melakukan update seefisien mungkin, maka nilai return dari pemanggilan sebelumnya dicari selisihnya dengan hasil render yang baru menggunakan diff, dan pada akhirnya menghasilkan set perubahan yang super minimal untuk diterapkan pada DOM terkait.

Data yang di-return dari render tidak berbentuk string dan tidak juga berbentuk DOM node -- menurut React, itulah deskripsi ringan dari seperti apa DOM itu seharusnya terlihat.

Proses ini dinamakan rekonsiliasi. Silahkan mencoba jsFiddle ini untuk melihat sebuah contoh dari rekonsiliasi sedang beraksi.

Karena proses perenderan ulang (re-render) ini terjadi dengan sangat cepat (sekitar 1ms untuk TodoMVC), maka secara eksplisit para pengembang tidak perlu melakukan penentuan data binding. Cara dan pendekatan ini telah diketahui sebagai cara yang paling mudah untuk membangun sebuah aplikasi.

HTML Hanyalah Awal

Karena React memiliki representasi ringan dari dokumennya sendiri, maka kita bisa melakukan beberapa hal yang wah dengannya:

  • Facebook memiliki grafik dinamis yang dirender ke <canvas> ketimbang HTML.
  • Instagram punya aplikasi web berhalaman tunggal (single-paged) yang dibangun seutuhnya dengan React dan Backbone.Router . Para desainer secara berkala mengkontribusi code React dengan JSX.
  • Internal prototype telah dibuat yang menjalankan aplikasi berbasis React dalam web worker (fitur baru HTML5) dan menggunakan React untuk mengendalikan native iOS views melalui sebuah Objective-C bridge.
  • Kamu bisa menjalankan Reach di server untuk SEO, performa, code sharing dan seluruh fleksibilitas.
  • Bahkan React dapat berprilaku dengan konsisten, dengan cara standar di semua web browser (termasuk IE8) dan secara otomatis menggunakan event delegation.

Silahkan beralih ke facebook.github.io/react untuk melihat apa yang telah dibangun disana dan melihat dengan lengkap dokumentasi untuk mulai membangun aplikasi dengan React.

Terimakasih telah membaca, dan semoga bermanfaat.

3.059
Image

Aditya Suranata

Aditya suka menulis, bukan hanya sekedar hobi, menulis menjadi medianya untuk mencurahkan pikiran dan perasaan. Di TutorKeren.com kebanyakan menyumbang tulisan sesuai dengan minat dan keahliannya yaitu pada kategori pemrograman dan elektronika. Selain itu juga gemar menulis mengenai hal-hal umum, seperti ilmu alam, sosial dan beberapa pengalamannya yang mungkin bisa berguna untuk orang lain.

Artikel Menarik Lainnya
Mari Gabung

Halo Emo 51 , Ada yang ingin disampaikan? Jangan sungkan untuk gabung diskusi ini. Silahkan Login dulu atau Daftar baru.