Psst! Inilah sebabnya ReasonReact adalah cara terbaik untuk menulis React

Apakah Anda menggunakan Bereaksi untuk membangun antarmuka pengguna? Ya saya juga. Dan sekarang, Anda akan belajar mengapa Anda harus menulis aplikasi Bereaksi Anda menggunakan ReasonML.

Bereaksi adalah cara yang cukup keren untuk menulis antarmuka pengguna. Tapi, bisakah kita membuatnya lebih dingin? Lebih baik?

Untuk membuatnya lebih baik, kita perlu mengidentifikasi masalahnya terlebih dahulu. Jadi, apa masalah utama React sebagai pustaka JavaScript?

Bereaksi awalnya tidak dikembangkan untuk JavaScript

Jika Anda melihat lebih dekat pada Bereaksi, Anda akan melihat bahwa beberapa prinsip utamanya adalah asing bagi JavaScript. Mari kita bicara tentang kekekalan, prinsip pemrograman fungsional, dan tipe sistem pada khususnya.

Kekekalan adalah salah satu prinsip inti dari React. Anda tidak ingin mengubah properti atau keadaan Anda karena jika melakukannya, Anda mungkin mengalami konsekuensi yang tidak terduga. Dalam JavaScript, kami tidak memiliki kekekalan di luar kotak. Kami menjaga struktur data kami tidak berubah oleh konvensi, atau kami menggunakan perpustakaan seperti immutableJS untuk mencapainya.

Bereaksi didasarkan pada prinsip-prinsip pemrograman fungsional karena aplikasinya adalah komposisi fungsi. Meskipun JavaScript memiliki beberapa fitur ini, seperti fungsi kelas satu, itu bukan bahasa pemrograman fungsional. Ketika kita ingin menulis beberapa kode deklaratif yang bagus, kita perlu menggunakan pustaka eksternal seperti Lodash / fp atau Ramda.

Jadi, ada apa dengan sistem tipe itu? Dalam Bereaksi, kami memiliki PropTip. Kami telah menggunakannya untuk meniru jenis dalam JavaScript karena itu bukan bahasa yang diketik secara statis. Untuk mengambil keuntungan dari pengetikan statis lanjut, kita perlu menggunakan dependensi eksternal, seperti Flow dan TypeScript.

Bereaksi, dan perbandingan JavaScript

Seperti yang Anda lihat, JavaScript tidak kompatibel dengan prinsip-prinsip inti Bereaksi.

Apakah ada bahasa pemrograman lain yang lebih kompatibel dengan Bereaksi daripada JavaScript?

Untungnya, kami memiliki ReasonML.

Dalam Alasan, kami mendapatkan kekekalan di luar kotak. Karena berbasis pada OCaml, bahasa pemrograman fungsional, kami juga memiliki fitur-fitur seperti itu. Reason juga memberi kami sistem tipe yang kuat sendiri.

Bereaksi, JavaScript, dan perbandingan Alasan

Reason kompatibel dengan prinsip-prinsip inti React.

Alasan

Ini bukan bahasa baru. Ini adalah sintaks seperti JavaScript dan toolchain alternatif untuk OCaml, bahasa pemrograman fungsional yang telah ada selama lebih dari 20 tahun. Reason dibuat oleh pengembang Facebook yang sudah menggunakan OCaml dalam proyek mereka (Flow, Infer).

Reason, dengan sintaks mirip C-nya, membuat OCaml mudah didekati oleh orang-orang yang berasal dari bahasa utama seperti JavaScript atau Java. Ini memberi Anda dokumentasi yang lebih baik (dibandingkan dengan OCaml) dan komunitas yang berkembang di sekitarnya. Plus, itu membuatnya lebih mudah untuk diintegrasikan dengan basis kode JavaScript yang ada.

OCaml berfungsi sebagai bahasa pendukung untuk Alasan. Reason memiliki semantik yang sama dengan OCaml - hanya sintaks yang berbeda. Ini berarti Anda dapat menulis OCaml menggunakan sintaksis mirip-JavaScript Reason. Sebagai hasilnya, Anda dapat memanfaatkan fitur-fitur hebat OCaml, seperti sistem tipe yang kuat dan pencocokan pola.

Mari kita lihat contoh sintaks Reason.

biarkan fizzbuzz = (i) =>
  switch (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
untuk (i dalam 1 hingga 100) {
  Js.log (fizzbuzz (i))
};

Meskipun kami menggunakan pencocokan pola dalam contoh ini, itu masih sangat mirip dengan JavaScript, kan?

Namun, satu-satunya bahasa yang dapat digunakan untuk browser masih JavaScript, artinya kita perlu mengompilasinya.

BuckleScript

Salah satu fitur Reason yang kuat adalah kompiler BuckleScript, yang mengambil kode Reason Anda, dan mengkompilasinya menjadi JavaScript yang mudah dibaca dan berkinerja dengan penghilangan kode mati yang hebat. Anda akan menghargai keterbacaan jika Anda bekerja di tim yang tidak semua orang kenal dengan Alasan, karena mereka masih dapat membaca kode JavaScript yang dikompilasi.

Kemiripan dengan JavaScript begitu dekat sehingga beberapa kode Reason tidak perlu diubah oleh kompiler sama sekali. Jadi, Anda dapat menikmati manfaat dari bahasa yang diketik secara statis tanpa mengubah kode apa pun.

misalkan add = (a, b) => a + b;
tambahkan (6, 9);

Ini adalah kode yang valid dalam Alasan dan JavaScript.

BuckleScript dikirimkan dengan empat pustaka: pustaka standar yang disebut Belt (pustaka standar OCaml tidak mencukupi), dan binding ke JavaScript, Node.js dan, DOM APIs.

Karena BuckleScript didasarkan pada kompiler OCaml, Anda akan mendapatkan kompilasi yang sangat cepat yang jauh lebih cepat daripada Babel dan beberapa kali lebih cepat daripada TypeScript.

Mari kompilasi algoritma FizzBuzz kami yang ditulis dalam Reason to JavaScript.

Kompilasi kode Reason untuk JavaScript melalui BuckleScript

Seperti yang Anda lihat, kode JavaScript yang dihasilkan cukup mudah dibaca. Sepertinya ditulis oleh pengembang JavaScript.

Reason tidak hanya mengkompilasi ke JavaScript, tetapi juga untuk native dan bytecode. Jadi, Anda dapat menulis satu aplikasi menggunakan sintaksis Reason dan dapat menjalankannya di browser pada ponsel MacOS, Android, dan iOS. Ada permainan yang disebut Gravitron oleh Jared Forsyth yang ditulis dalam Reason dan dapat dijalankan di semua platform yang baru saja saya sebutkan.

Interop JavaScript

BuckleScript juga memberi kami interoperabilitas JavaScript. Anda tidak hanya dapat menempelkan kode JavaScript yang berfungsi di basis kode Reason Anda, tetapi kode Reason Anda juga dapat berinteraksi dengan kode JavaScript itu. Ini berarti Anda dapat dengan mudah mengintegrasikan kode Alasan ke dalam basis kode JavaScript yang ada. Selain itu, Anda dapat menggunakan semua paket JavaScript dari ekosistem NPM di kode Alasan Anda. Misalnya, Anda dapat menggabungkan Flow, TypeScript, dan Reason bersama dalam satu proyek.

Namun, ini tidak sesederhana itu. Untuk menggunakan pustaka atau kode JavaScript dalam Alasan, Anda perlu mem-portingnya ke Alasan terlebih dahulu melalui ikatan Alasan. Dengan kata lain, Anda memerlukan jenis kode JavaScript yang belum diketik untuk dapat memanfaatkan sistem tipe kuat Reason.

Kapan pun Anda perlu menggunakan pustaka JavaScript dalam kode Alasan Anda, periksa apakah pustaka itu sudah dipindahkan ke Alasan dengan menelusuri basis data Indeks Paket Alasan (Redex). Ini adalah situs web yang mengumpulkan berbagai pustaka dan alat yang ditulis dalam pustaka Reason dan JavaScript dengan binding Alasan. Jika Anda menemukan perpustakaan di sana, Anda dapat menginstalnya sebagai dependensi dan menggunakannya di aplikasi Alasan Anda.

Namun, jika Anda tidak menemukan perpustakaan Anda, Anda harus menulis sendiri Alasan ikatan. Jika Anda baru saja memulai dengan Alasan, ingatlah bahwa menulis ikatan bukan hal yang ingin Anda mulai, karena itu adalah salah satu hal yang lebih menantang dalam ekosistem Alasan.

Untungnya, saya hanya menulis posting tentang menulis binding Alasan, jadi tetap disini!

Saat Anda memerlukan beberapa fungsionalitas dari pustaka JavaScript, Anda tidak perlu menulis binding Alasan untuk pustaka secara keseluruhan. Anda dapat melakukannya hanya untuk fungsi atau komponen yang perlu Anda gunakan.

ReasonReact

Artikel ini adalah tentang menulis React in Reason, yang dapat Anda lakukan berkat pustaka ReasonReact.

Mungkin Anda sekarang berpikir, "Saya masih belum tahu mengapa saya harus menggunakan React in Reason."

Kami telah menyebutkan alasan utama untuk melakukannya - Alasan lebih kompatibel dengan Bereaksi daripada JavaScript. Mengapa lebih kompatibel? Karena Bereaksi dikembangkan untuk Alasan, atau lebih tepatnya, untuk OCaml.

Jalan Menuju ReasonReact

Prototipe pertama React dikembangkan oleh Facebook dan ditulis dalam Bahasa Standar Meta (StandardML), sepupu OCaml. Kemudian, dipindahkan ke OCaml. React juga ditranskripsi ke JavaScript.

Ini karena seluruh web menggunakan JavaScript, dan mungkin tidak pintar untuk mengatakan, "Sekarang kita akan membangun UI di OCaml." Dan berhasil - Bereaksi dalam JavaScript telah diadopsi secara luas.

Jadi, kami terbiasa Bereaksi sebagai perpustakaan JavaScript. Bereaksi bersama dengan pustaka dan bahasa lain - Elm, Redux, Recompose, Ramda, dan PureScript - membuat pemrograman fungsional dalam JavaScript populer. Dan dengan munculnya Flow dan TypeScript, pengetikan statis menjadi populer juga. Akibatnya, paradigma pemrograman fungsional dengan tipe statis menjadi mainstream di dunia front-end.

Pada 2016, Bloomberg mengembangkan dan open-source BuckleScript, kompiler yang mengubah OCaml menjadi JavaScript. Ini memungkinkan mereka untuk menulis kode aman di front-end menggunakan sistem tipe kuat OCaml. Mereka mengambil kompiler OCaml yang dioptimalkan dan sangat cepat dan menukar kode asli penghasil back-endnya dengan yang menghasilkan JavaScript.

Popularitas pemrograman fungsional bersamaan dengan dirilisnya BuckleScript menghasilkan iklim ideal bagi Facebook untuk kembali ke ide asli React, yang pada awalnya ditulis dalam bahasa ML.

ReasonReact

Mereka mengambil semantik OCaml dan sintaksis JavaScript, dan menciptakan Alasan. Mereka juga menciptakan pembungkus Alasan di sekitar React - ReasonReact library - dengan fungsi tambahan seperti enkapsulasi prinsip-prinsip Redux dalam komponen stateful. Dengan melakukan itu, mereka kembali Bereaksi ke akar aslinya.

Kekuatan Bereaksi dalam Alasan

Ketika Bereaksi datang ke JavaScript, kami menyesuaikan JavaScript dengan kebutuhan Bereaksi dengan memperkenalkan berbagai perpustakaan dan alat. Ini juga berarti lebih banyak ketergantungan untuk proyek kami. Belum lagi bahwa perpustakaan ini masih dalam pengembangan dan perubahan melanggar diperkenalkan secara teratur. Jadi, Anda perlu mempertahankan dependensi ini dengan hati-hati dalam proyek Anda.

Ini menambahkan lapisan kerumitan lain untuk pengembangan JavaScript.

Aplikasi Bereaksi khas Anda akan memiliki setidaknya dependensi berikut:

  • pengetikan statis - Flow / TypeScript
  • immutability - immutableJS
  • routing - ReactRouter
  • pemformatan - Lebih cantik
  • linting - ESLint
  • fungsi pembantu - Ramda / Lodash

Mari sekarang bertukar JavaScript Bereaksi dengan ReasonReact.

Apakah kita masih membutuhkan semua dependensi ini?

  • pengetikan statis - bawaan
  • kekekalan - built-in
  • perutean - bawaan
  • pemformatan - bawaan
  • linting - built-in
  • fungsi pembantu - bawaan

Anda dapat mempelajari lebih lanjut tentang fitur-fitur bawaan ini di pos saya yang lain.

Di aplikasi ReasonReact, Anda tidak memerlukan ini dan banyak dependensi lainnya karena banyak fitur penting yang membuat pengembangan Anda lebih mudah sudah termasuk dalam bahasa itu sendiri. Jadi, memelihara paket Anda akan menjadi lebih mudah dan Anda tidak memiliki peningkatan dalam kompleksitas dari waktu ke waktu.

Ini berkat OCaml, yang berusia lebih dari 20 tahun. Ini adalah bahasa yang matang dengan semua prinsip intinya di tempat dan stabil.

Bungkus

Pada awalnya, pencipta Alasan memiliki dua pilihan. Untuk mengambil JavaScript dan membuatnya lebih baik. Dengan melakukan itu mereka juga perlu berurusan dengan beban historisnya.

Namun, mereka menempuh jalan yang berbeda. Mereka menganggap OCaml sebagai bahasa yang matang dengan kinerja luar biasa dan memodifikasinya sehingga menyerupai JavaScript.

Bereaksi juga didasarkan pada prinsip-prinsip OCaml. Itulah sebabnya Anda akan mendapatkan pengalaman pengembang yang jauh lebih baik ketika Anda menggunakannya dengan Reason. React in Reason merupakan cara yang lebih aman untuk membangun komponen React, karena sistem tipe kuat telah mendukung Anda dan Anda tidak perlu berurusan dengan sebagian besar masalah JavaScript (warisan).

Apa berikutnya?

Jika Anda berasal dari dunia JavaScript, akan lebih mudah bagi Anda untuk memulai dengan Alasan, karena kemiripan sintaksisnya dengan JavaScript. Jika Anda telah memprogram dalam Bereaksi, akan lebih mudah bagi Anda karena Anda dapat menggunakan semua pengetahuan Bereaksi Anda karena ReasonReact memiliki model mental yang sama dengan Bereaksi dan alur kerja yang sangat mirip. Ini berarti Anda tidak perlu memulai dari awal. Anda akan belajar Alasan saat Anda berkembang.

Cara terbaik untuk mulai menggunakan Alasan dalam proyek Anda adalah melakukannya secara bertahap. Saya telah menyebutkan bahwa Anda dapat mengambil kode Alasan dan menggunakannya dalam JavaScript, dan sebaliknya. Anda dapat melakukan hal yang sama dengan ReasonReact. Anda mengambil komponen ReasonReact Anda dan menggunakannya dalam aplikasi JavaScript Bereaksi Anda, dan sebaliknya.

Pendekatan tambahan ini telah dipilih oleh pengembang Facebook yang menggunakan Reason secara luas dalam pengembangan aplikasi Facebook Messenger.

Jika Anda ingin membangun aplikasi menggunakan React in Reason dan mempelajari dasar-dasar Reason dengan cara yang praktis, periksa artikel saya yang lain di mana kita akan membangun permainan Tic Tac Toe bersama.

Jika Anda memiliki pertanyaan, kritik, pengamatan, atau kiat untuk perbaikan, jangan ragu untuk menulis komentar di bawah ini atau hubungi saya melalui Twitter atau blog saya.