Bereaksi Pengembangan Aplikasi Menggunakan ReasonReact

Apakah Anda menggunakan Bereaksi untuk membuat antarmuka pengguna? Penulis materi, terjemahan yang kami terbitkan, mengatakan bahwa ia juga bekerja dengan React. Di sini dia ingin berbicara tentang mengapa ReasonML layak ditulis untuk aplikasi Bereaksi.



React adalah alat pengembangan antarmuka yang sangat bagus. Bisakah Anda membuatnya lebih baik? Untuk meningkatkan pekerjaan Anda dengan React, Anda harus terlebih dahulu memahami masalah utamanya. Secara khusus, masalah yang asal-usulnya terletak pada fakta bahwa Bereaksi adalah perpustakaan JavaScript.

Bereaksi dan JavaScript

Jika Anda melihat dengan cermat pada Bereaksi, Anda akan melihat bahwa beberapa prinsip yang mendasari perpustakaan ini asing bagi JavaScript. Secara khusus, kita berbicara tentang kekekalan, tentang prinsip-prinsip pemrograman fungsional dan tentang sistem tipe.

Kekebalan adalah salah satu prinsip dasar Bereaksi. Mutasi pada sifat-sifat komponen atau keadaan aplikasi sangat tidak diinginkan, karena ini dapat menyebabkan konsekuensi yang tidak terduga. JavaScript tidak memiliki mekanisme standar untuk memberikan kekebalan. Struktur data dibuat tidak berubah baik dengan mematuhi konvensi tertentu atau dengan menggunakan perpustakaan seperti immutable-js .

Pustaka React didasarkan pada prinsip-prinsip pemrograman fungsional, karena aplikasi Bereaksi adalah komposisi fungsi. Meskipun JavaScript memiliki beberapa fitur pemrograman fungsional, seperti fungsi kelas satu, ini bukan bahasa pemrograman fungsional. Jika Anda perlu menulis kode deklaratif yang baik dalam JavaScript, Anda harus menggunakan perpustakaan pihak ketiga seperti Lodash / fp atau Ramda .

Apa yang salah dengan sistem jenisnya? React memiliki konsep PropTypes . Ini digunakan untuk mensimulasikan tipe dalam JavaScript, karena bahasa ini sendiri tidak diketik secara statis. Untuk memanfaatkan mengetik statis di JS, sekali lagi, Anda harus menggunakan alat pihak ketiga seperti Flow dan TypeScript .


Bandingkan Bereaksi dan JavaScript

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

Apakah ada bahasa pemrograman yang lebih baik daripada JavaScript yang konsisten dengan Bereaksi?
Anda dapat memberikan jawaban positif untuk pertanyaan ini. Bahasa ini adalah ReasonML .

Nalar menerapkan kekekalan. Karena didasarkan pada OCaml , bahasa pemrograman fungsional, fitur yang sesuai juga dibangun ke dalam Alasan. Bahasa ini juga memiliki sistem tipenya sendiri yang cocok untuk Bereaksi.


Bandingkan Bereaksi, JavaScript, dan Alasan

Ternyata Alasan itu kompatibel dengan prinsip dasar Bereaksi.

Alasan

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


OCaml

Sintaks seperti C dari Reason membuat OCaml tersedia untuk programmer yang terbiasa dengan bahasa umum seperti JavaScript atau Java. Reason memberi pengembang dokumentasi yang lebih baik daripada OCaml, dan komunitas penggemar yang terus berkembang berkembang di sekitarnya. Selain itu, apa yang ditulis dalam Alasan mudah untuk diintegrasikan dengan proyek JS yang ada.


Alasan

Inti dari Alasan adalah OCaml. Alasan memiliki semantik yang sama dengan OCaml, hanya sintaks yang berbeda. Ini berarti bahwa Alasan memungkinkan untuk menulis kode OCaml menggunakan sintaksis mirip-JavaScript. Akibatnya, programmer memiliki fitur OCaml yang luar biasa seperti sistem tipe ketat dan mekanisme pencocokan pola.

Lihatlah potongan kode Alasan untuk membiasakan diri dengan sintaksnya.

let fizzbuzz = (i) =>  switch (i mod 3, i mod 5) {  | (0, 0) => "FizzBuzz"  | (0, _) => "Fizz"  | (_, 0) => "Buzz"  | _ => string_of_int(i)  }; for (i in 1 to 100) {  Js.log(fizzbuzz(i)) }; 

Meskipun pola ini menggunakan mekanisme pencocokan pola, itu tetap sangat mirip dengan JavaScript.

Satu-satunya bahasa yang berfungsi di browser adalah JavaScript, oleh karena itu, untuk menulis untuk browser dalam bahasa apa pun, kita perlu mengompilasinya dalam JavaScript.

BuckleScript

Salah satu fitur Reason yang paling menarik dapat disebut kompiler BuckleScript, yang mengambil kode yang ditulis dalam Reason dan mengubahnya menjadi kode JS yang mudah dibaca dan produktif, di samping itu, juga membersihkannya dari konstruksi yang tidak digunakan.


BuckleScript

Keterbacaan hasil BuckleScript akan berguna jika Anda bekerja di tim yang tidak semua orang kenal Alasan. Orang-orang ini, setidaknya, akan dapat membaca kode JS yang dihasilkan.

Kode alasan terkadang sangat mirip dengan kode JS sehingga kompiler tidak perlu mengubahnya sama sekali. Dengan keadaan ini, Anda dapat menikmati manfaat dari pengetikan dan penulisan kode statis Reason yang sepertinya ditulis dalam JavaScript.

Berikut adalah contoh kode yang berfungsi baik di Alasan dan JavaScript:

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

BuckleScript hadir dengan empat pustaka. Ini adalah perpustakaan standar yang disebut Sabuk ( pustaka standar OCaml tidak cukup di sini), dan binding untuk JavaScript, Node.js, dan DOM API.

Karena BuckleScript didasarkan pada kompiler OCaml, kompilasi sangat cepat - jauh lebih cepat daripada Babel dan beberapa kali lebih cepat daripada TypeScript.

Menggunakan BuckleScript, kami mengkompilasi fragmen kode Alasan di atas yang berisi fungsi fizzbuzz() di JavaScript.


Kompilasi Kode Alasan dalam JavaScript Menggunakan BuckleScript

Seperti yang Anda lihat, kode JS ternyata cukup mudah dibaca. Sepertinya ditulis oleh seorang pria.

Program yang ditulis dalam Alasan dikompilasi tidak hanya dalam JavaScript, tetapi juga dalam kode asli dan dalam kode byte. Sebagai hasilnya, misalnya, Anda dapat menulis aplikasi pada Reason dan menjalankannya di browser, di MacOS, di smartphone yang menjalankan Android dan iOS. Ada permainan Gravitron yang ditulis oleh Jared Forsyth on Reason. Itu dapat dijalankan pada semua platform di atas.

Organisasi interaksi dengan JavaScript

BuckleScript memungkinkan untuk mengatur interaksi Alasan dan JavaScript. Ini berarti tidak hanya kemungkinan menggunakan kode JS yang berfungsi dalam basis kode Alasan, tetapi juga kemungkinan interaksi kode yang ditulis dalam Alasan dengan kode JavaScript ini. Akibatnya, kode yang ditulis dalam Alasan mudah untuk diintegrasikan ke dalam proyek JS yang ada. Selain itu, dalam kode alasan Anda dapat menggunakan paket JavaScript dari NPM. Misalnya, Anda bisa membuat proyek yang membagikan Flow, TypeScript, dan Reason.

Namun, semuanya tidak begitu sederhana. Untuk menggunakan kode JavaScript atau pustaka di Reason, Anda harus terlebih dahulu porting menggunakan binding Reason. Dengan kata lain, untuk menggunakan sistem tipe Reason yang ketat, kita membutuhkan tipe untuk kode JavaScript biasa.

Jika Anda perlu menggunakan pustaka JavaScript apa pun dalam kode Alasan, Anda harus terlebih dahulu beralih ke Indeks Paket Alasan ( Redex ) dan mencari tahu apakah perpustakaan ini telah diangkut ke Alasan. Proyek Redex adalah katalog perpustakaan dan alat-alat yang ditulis dalam perpustakaan Alasan dan JavaScript dengan ikatan Alasan. Jika Anda berhasil menemukan pustaka yang diperlukan dalam direktori ini, Anda dapat menginstalnya sebagai dependensi dan menggunakannya dalam aplikasi Alasan.

Jika Anda tidak dapat menemukan perpustakaan yang diinginkan, Anda harus menulis sendiri binder. Jika Anda baru memulai dengan Alasan, perlu diingat bahwa menulis binder bukanlah tugas pemula. Ini adalah salah satu tugas paling sulit yang harus diselesaikan seseorang untuk mereka yang memprogram Alasan. Sebenarnya, ini adalah topik untuk artikel terpisah.

Jika Anda hanya perlu beberapa fungsi terbatas dari beberapa perpustakaan JavaScript, Anda tidak perlu menulis binding untuk seluruh perpustakaan tersebut. Ini hanya dapat dilakukan untuk fungsi atau komponen yang diperlukan.

ReasonReact

Pada awal artikel, kami berbicara tentang bagaimana itu didedikasikan untuk mengembangkan aplikasi Bereaksi menggunakan Alasan. Anda dapat melakukan ini berkat pustaka ReasonReact .

Mungkin sekarang Anda berpikir: "Saya masih tidak mengerti mengapa perlu menulis Bereaksi aplikasi dalam Alasan." Namun, kami telah membahas alasan utama untuk menggunakan bundel Bereaksi dan Alasan, yaitu bahwa Bereaksi lebih kompatibel dengan Alasan daripada dengan JavaScript. Kenapa begitu? Masalahnya adalah bahwa React dibuat berdasarkan Alasan, atau lebih tepatnya, berdasarkan OCaml.

Jalan Menuju ReasonReact

Prototipe React pertama dikembangkan oleh Facebook dan ditulis dalam Bahasa Meta Standar ( StandardML ), dalam bahasa yang merupakan kerabat OCaml. Kemudian Bereaksi dipindahkan ke OCaml, di samping itu, Bereaksi diangkut ke JavaScript. Ini dilakukan karena fakta bahwa seluruh web menggunakan JavaScript dan mungkin tidak masuk akal untuk membuat pernyataan seperti: "Sekarang kita akan menulis UI di OCaml". Terjemahan Bereaksi menjadi JavaScript terbayar dan menyebabkan distribusi luas perpustakaan ini.

Akibatnya, semua orang terbiasa menganggap React sebagai perpustakaan JS. Bereaksi, serta perpustakaan dan bahasa lain seperti Elm , Redux , Recompose , Ramda , dan PureScript , telah membantu mempopulerkan gaya fungsional pemrograman dalam JavaScript. Dan berkat penyebaran Flow dan TypeScript di JavaScript, pengetikan statis juga menjadi populer. Akibatnya, paradigma pemrograman fungsional menggunakan tipe statis telah menjadi dominan di dunia pengembangan frontend.

Pada tahun 2006, Bloomberg membuat dan mentransfer ke kategori proyek sumber terbuka, kompiler BuckleScript, yang mengubah OCaml menjadi JavaScript. Ini memungkinkan mereka untuk menulis kode front-end yang lebih baik dan lebih aman menggunakan sistem tipe OCaml yang ketat. Mereka mengambil kompiler OCaml yang dioptimalkan dan sangat cepat dan membuatnya menghasilkan kode JavaScript.

Popularitas pemrograman fungsional dan rilis BuckleScript menciptakan iklim ideal yang memungkinkan Facebook untuk kembali ke ide asli React - perpustakaan yang awalnya ditulis dalam StandardML.


ReasonReact

Mereka mencampur semantik OCaml dengan sintaksis JavaScript dan menciptakan Alasan. Selain itu, mereka menciptakan pembungkus Alasan untuk React, disajikan dalam bentuk perpustakaan ReasonReact, yang memiliki fungsi tambahan, seperti merangkum prinsip Redux dalam komponen stateful. Setelah melakukan ini, mereka membawa React kembali ke asalnya .

Tentang Bereaksi Fitur di Alasan

Ketika perpustakaan React diterjemahkan ke dalam JavaScript, kemampuan bahasa disesuaikan dengan kebutuhan Bereaksi dengan membuat berbagai perpustakaan dan alat. Pendekatan ini, khususnya, berarti kebutuhan akan sejumlah besar ketergantungan untuk proyek. Kami tidak akan mengatakan bahwa perpustakaan seperti itu terus berkembang, dan perubahan terjadi secara teratur di dalamnya, membuat versi baru mereka tidak sesuai dengan yang lama. Akibatnya, pengembang harus sangat serius dan berhati-hati dalam memelihara perpustakaan tempat proyeknya bergantung.

Ini menambahkan lapisan kompleksitas tambahan untuk pengembangan JavaScript. Sebagai contoh, aplikasi Bereaksi khas biasanya berisi setidaknya dependensi yang dapat dilihat pada gambar berikut.


Ketergantungan Aplikasi Bereaksi Khas

Inilah tugas-tugas yang diselesaikan dependensi ini:

• Pengetikan statis - Flow / TypeScript.
• Kekebalan - ImmutableJS.
• Routing - ReactRouter.
• Pemformatan Kode - Lebih cantik.
• Linting - ESLint.
• Fungsi bantu - Ramda / Lodash.

Sekarang kita akan menggunakan, alih-alih Bereaksi untuk JavaScript, perpustakaan ReasonReact. Apakah kita perlu, dengan pendekatan ini, semua ketergantungan ini?


Beralih ke ReasonReact

Setelah menganalisis daftar tugas yang sama yang sebelumnya diselesaikan dengan menggunakan alat tambahan, kami menemukan bahwa semuanya dapat diselesaikan menggunakan alat ReasonReact bawaan. Anda dapat membaca lebih lanjut tentang mereka di sini .

Dalam aplikasi yang disiapkan oleh ReasonReact, semua ini dan banyak dependensi lainnya tidak diperlukan. Faktanya adalah bahwa banyak fitur paling penting yang menyederhanakan pengembangan sudah termasuk dalam bahasa. Akibatnya, pekerjaan dengan dependensi disederhanakan, dan, ketika aplikasi tumbuh dan berkembang, pekerjaan ini tidak menjadi rumit.

Semua ini dimungkinkan berkat penggunaan bahasa OCaml, yang berusia lebih dari 20 tahun. Ini adalah bahasa yang matang, prinsip-prinsip dasar dan mekanisme yang telah teruji waktu dan stabil.

Apa selanjutnya

Jika Anda berasal dari dunia JavaScript, mudah untuk memulai dengan Alasan karena sintaksis bahasa ini mirip dengan JavaScript. Jika Anda menulis aplikasi React sebelumnya, beralih ke Reason akan lebih mudah bagi Anda, karena Anda dapat menggunakan semua pengetahuan Anda di bidang React saat bekerja dengan ReasonReact. Di jantung ReasonReact terletak model pemikiran yang sama seperti pada inti React, proses bekerja sama dengan mereka juga sangat mirip. Ini berarti bahwa ketika Anda beralih ke Alasan Anda tidak harus memulai dari awal. Anda akan berurusan dengan Alasan dalam proses.

Cara terbaik untuk mulai menggunakan Alasan dalam proyek Anda adalah secara bertahap memperkenalkan fragmen yang ditulis dalam Alasan ke dalamnya. Seperti yang telah disebutkan, kode alasan dapat digunakan dalam proyek JS, serta kode JS dalam proyek alasan. Pendekatan ini juga berlaku ketika menggunakan ReasonReact. Anda dapat mengambil komponen ReasonReact dan menggunakannya dalam aplikasi React tradisional yang ditulis dalam JavaScript.

Ini persis pendekatan tambahan yang dipilih oleh pengembang Facebook, yang banyak menggunakan Reason ketika mengembangkan messenger Facebook .

Jika Anda ingin menulis aplikasi Bereaksi menggunakan Reason dan mempelajari dasar-dasar bahasa ini dalam praktiknya, lihat materi ini , di mana pengembangan game "Tic Tac Toe" adalah langkah-demi-langkah.

Ringkasan

Pencipta Alasan memiliki dua opsi. Yang pertama adalah mengambil JavaScript dan entah bagaimana memperbaikinya. Jika mereka memilih jalan ini, mereka harus berurusan dengan kelemahan historis JS.

Namun, mereka memilih jalur kedua yang terkait dengan OCaml. Mereka mengambil OCaml, bahasa yang matang dengan kinerja luar biasa, dan memodifikasinya agar terlihat seperti JavaScript.

Bereaksi juga didasarkan pada prinsip-prinsip OCaml. Itu sebabnya menulis aplikasi Bereaksi jauh lebih mudah dan lebih menyenangkan menggunakan Alasan. Bekerja dengan React in Reason menawarkan pendekatan yang lebih stabil dan aman untuk membuat komponen React, karena sistem tipe yang ketat menjamin pengembang dan dia tidak harus menghadapi sebagian besar masalah JavaScript historis.

Pembaca yang budiman! Sudahkah Anda mencoba ReasonReact?