Psst! Itulah sebabnya ReasonReact adalah cara terbaik untuk menulis React

Adakah anda menggunakan React untuk membina antara muka pengguna? Baiklah, saya juga. Dan sekarang, anda akan belajar mengapa anda perlu menulis aplikasi React anda menggunakan ReasonML.

React adalah cara yang paling kerap untuk menulis antara muka pengguna. Tetapi, bolehkah kita menjadikannya lebih sejuk? Lebih baik?

Untuk menjadikannya lebih baik, kita perlu mengenal pasti masalahnya terlebih dahulu. Jadi, apakah masalah utama React sebagai perpustakaan JavaScript?

React tidak dimulakan pada mulanya untuk JavaScript

Sekiranya anda melihat dengan lebih dekat di React, anda akan melihat beberapa prinsip utamanya adalah asing kepada JavaScript. Mari kita bincangkan tentang kebolehubahan, prinsip pengaturcaraan berfungsi, dan sistem jenis khususnya.

Kemandirian adalah salah satu prinsip teras React. Anda tidak mahu memupuk prop atau keadaan anda kerana jika anda berbuat demikian, anda mungkin mengalami akibat yang tidak menentu. Dalam JavaScript, kami tidak mempunyai kebolehubahan daripada kotak. Kami mengekalkan struktur data kami tidak berubah oleh konvensyen, atau kami menggunakan perpustakaan seperti JT yang tidak berubah untuk mencapainya.

Reaktik didasarkan pada prinsip-prinsip pemprograman fungsional kerana aplikasinya adalah komposisi fungsi. Walaupun JavaScript mempunyai beberapa ciri ini, seperti fungsi kelas pertama, ia bukan bahasa pengaturcaraan fungsional. Apabila kita ingin menulis beberapa kod deklaratif yang bagus, kita perlu menggunakan perpustakaan luaran seperti Lodash / fp atau Ramda.

Jadi, apa pula dengan sistem jenis? Dalam React, kami mempunyai PropTypes. Kami telah menggunakannya untuk meniru jenis dalam JavaScript kerana ia bukan bahasa yang diketik secara statik sendiri. Untuk mengambil kesempatan daripada penaipan statik yang maju, kita perlu menggunakan kebergantungan luaran seperti Flow dan TypeScript.

Berkesan, dan perbandingan JavaScript

Seperti yang anda lihat, JavaScript tidak sesuai dengan prinsip teras React.

Adakah terdapat bahasa pengaturcaraan lain yang lebih serasi dengan React daripada JavaScript?

Nasib baik, kami mempunyai ReasonML.

Dalam Alasan, kita mendapat kebolehubahan dari kotak. Oleh kerana ia berdasarkan OCaml, bahasa pengaturcaraan fungsional, kami mempunyai ciri-ciri seperti yang dibina dalam bahasa itu sendiri juga. Sebab juga menyediakan kami dengan sistem jenis yang kuat sendiri.

Berbeza, JavaScript, dan perbandingan Sebab

Alasannya bersesuaian dengan prinsip teras React.

Sebab

Ia bukan bahasa baru. Ia adalah sintaks dan rantaian alat seperti JavaScript yang lain untuk OCaml, bahasa pengaturcaraan fungsional yang telah wujud selama lebih daripada 20 tahun. Sebab dibuat oleh pemaju Facebook yang sudah menggunakan OCaml dalam projek mereka (Aliran, Infer).

Sebab, dengan sintaks C seperti, menjadikan OCaml mudah didekati untuk orang yang berasal dari bahasa arus perdana seperti JavaScript atau Java. Ia memberikan anda dokumentasi yang lebih baik (berbanding OCaml) dan masyarakat yang semakin berkembang di sekelilingnya. Tambahan pula, ia memudahkan untuk mengintegrasikan dengan asas kod JavaScript anda.

OCaml berfungsi sebagai bahasa sokongan untuk Alasan. Alasan mempunyai semantik yang sama seperti OCaml - hanya sintaks yang berbeza. Ini bermakna anda boleh menulis OCaml menggunakan sintaks seperti Alasan JavaScript. Akibatnya, anda boleh memanfaatkan ciri-ciri hebat OCaml, seperti sistem jenis yang kuat dan padanan corak.

Mari kita lihat contoh sintaks Alasan.

biarkan fizzbuzz = (i) =>
  suis (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))
};

Walaupun kami menggunakan padanan corak dalam contoh ini, ia masih agak serupa dengan JavaScript, kan?

Walau bagaimanapun, bahasa yang boleh digunakan hanya untuk penyemak imbas masih JavaScript, bermakna kita perlu menyusunnya.

BuckleScript

Ciri-ciri kuat Salah satu ialah compiler BuckleScript, yang mengambil kod Alasan anda, dan menyusunnya ke JavaScript yang boleh dibaca dan performant dengan penghapusan kod mati yang besar. Anda akan menghargai kebolehbacaan jika anda bekerja pada pasukan di mana tidak semua orang akrab dengan Alasan, kerana mereka masih dapat membaca kod JavaScript yang dikompilasi.

Persamaan dengan JavaScript sangat dekat sehingga beberapa kod Alasan tidak perlu diubah oleh pengkomputeran sama sekali. Oleh itu, anda boleh menikmati faedah bahasa ditafsirkan secara statik tanpa sebarang perubahan kepada kod itu.

mari tambah = (a, b) => a + b;
tambahkan (6, 9);

Ini adalah kod yang sah dalam Alasan Kedua dan JavaScript.

BuckleScript dihantar dengan empat pustaka: perpustakaan standard yang disebut Belt (perpustakaan standard OCaml tidak mencukupi), dan pengikat kepada JavaScript, Node.js dan API DOM.

Oleh sebab BuckleScript berdasarkan pengkomputeran OCaml, anda akan mendapat kompilasi yang sangat cepat yang lebih cepat daripada Babel dan beberapa kali lebih cepat daripada TypeScript.

Mari mengkompilasi algoritma FizzBuzz kami yang ditulis dalam Alasan JavaScript.

Penyelesaian kod sebab untuk JavaScript melalui BuckleScript

Seperti yang anda lihat, kod JavaScript yang dihasilkan agak mudah dibaca. Nampaknya ia ditulis oleh pemaju JavaScript.

Bukan sahaja Alasan menyusun JavaScript, tetapi juga kepada native dan bytecode. Oleh itu, anda boleh menulis satu aplikasi menggunakan sintaks Alasan dan dapat menjalankannya dalam penyemak imbas pada MacOS, Android, dan telefon IOS. Ada permainan yang dipanggil Gravitron oleh Jared Forsyth yang ditulis dalam Alasan dan ia boleh dijalankan pada semua platform yang saya sebutkan tadi.

Interop JavaScript

BuckleScript juga menyediakan kami dengan saling kendalian JavaScript. Bukan sahaja anda boleh menyisipkan kod JavaScript kerja anda dalam asas Kod Alasan anda, tetapi kod Alasan anda juga boleh berinteraksi dengan JavaScript itu. Ini bermakna anda boleh mengintegrasikan kod Alasan dengan mudah ke dalam kod JavaScript anda yang sedia ada. Selain itu, anda boleh menggunakan semua pakej JavaScript dari ekosistem NPM dalam kod Alasan anda. Sebagai contoh, anda boleh menggabungkan Aliran, TypeScript, dan Alasan bersama dalam satu projek.

Walau bagaimanapun, ia tidak begitu mudah. Untuk menggunakan perpustakaan JavaScript atau kod dalam Alasan, anda perlu memindahkannya ke Alasan pertama melalui Alasan pengikatan. Dalam erti kata lain, anda memerlukan jenis untuk kod JavaScript anda yang tidak diingip untuk dapat mengambil kesempatan daripada sistem jenis kuat Alasan.

Setiap kali anda perlu menggunakan pustaka JavaScript dalam kod Alasan anda, periksa jika perpustakaan telah dipindahkan ke Alasan dengan melayari pangkalan data Base Package (Redex). Ia merupakan laman web yang mengagregat perpustakaan dan alat yang berbeza yang ditulis dalam perpustakaan Alasan dan JavaScript dengan alasan pengikat. Jika anda mendapati perpustakaan anda di sana, anda hanya boleh memasangnya sebagai kebergantungan dan menggunakannya dalam aplikasi Sebab anda.

Walau bagaimanapun, jika anda tidak menemui perpustakaan anda, anda perlu menulis Alasan pengikat diri anda. Jika anda baru bermula dengan Alasan, perhatikan bahawa penulisan bindings bukan perkara yang anda ingin mulakan, kerana ia adalah salah satu perkara yang lebih mencabar dalam ekosistem Alasan.

Nasib baik, saya hanya menulis jawatan tentang menulis pengikat sebab, jadi tunggu!

Apabila anda memerlukan beberapa fungsi dari pustaka JavaScript, anda tidak perlu menulis pengikatan Alasan untuk perpustakaan secara keseluruhan. Anda boleh melakukannya hanya untuk fungsi atau komponen yang perlu anda gunakan.

ReasonReact

Artikel ini mengenai menulis React in Reason, yang boleh anda lakukan terima kasih kepada perpustakaan ReasonReact.

Mungkin anda sekarang berfikir "Saya masih tidak tahu kenapa saya harus menggunakan React in Reason."

Kami telah menyebut sebab utama untuk berbuat demikian - Sebab lebih serasi dengan React daripada JavaScript. Mengapa ia lebih serasi? Kerana React telah dibangunkan untuk Alasan, atau lebih tepatnya, untuk OCaml.

Jalan ke ReasonReact

Prototaip pertama React telah dibangunkan oleh Facebook dan ditulis dalam Standard Meta Language (StandardML), sepupu OCaml. Kemudian, ia dipindahkan ke OCaml. Reaktik juga disalin ke JavaScript.

Ini kerana seluruh web menggunakan JavaScript, dan itu tidak mungkin pintar untuk mengatakan, "Sekarang kita akan membina UI di OCaml." Dan ia berfungsi - Reaktik dalam JavaScript telah digunakan secara meluas.

Oleh itu, kami telah digunakan untuk React sebagai perpustakaan JavaScript. Bertindak balas bersama dengan perpustakaan dan bahasa lain - Pengaturcaraan berfungsi Elm, Redux, Recompose, Ramda, dan PureScript yang dibuat dalam popular JavaScript. Dan dengan meningkatnya Aliran dan TypeScript, menaip statik menjadi popular juga. Akibatnya, paradigma pengaturcaraan fungsional dengan jenis statik menjadi arus utama dalam dunia front-end.

Pada tahun 2016, Bloomberg dibangunkan dan membuka sumber BuckleScript, pengkompil yang mengubah OCaml ke JavaScript. Ini membolehkan mereka menulis kod selamat di bahagian hadapan menggunakan sistem jenis kuat OCaml. Mereka mengambil pengkompil OCaml yang dioptimumkan dan menggerunkan dan menukarkan kod asalnya yang menjana back-end untuk menghasilkan JavaScript.

Populariti pengaturcaraan berfungsi bersama dengan pembebasan BuckleScript menghasilkan iklim ideal untuk Facebook untuk kembali kepada idea asal React, yang pada mulanya ditulis dalam bahasa ML.

ReasonReact

Mereka mengambil semantik OCaml dan sintaks JavaScript, dan mencipta Alasan. Mereka juga membuat Pembungkus Sebab sekitar React - perpustakaan ReasonReact - dengan fungsi tambahan seperti enkapsulasi prinsip Redux dalam komponen yang berkepentingan. Dengan berbuat demikian, mereka mengembalikan React kepada akar asalnya.

Kuasa Reaktik Atas Sebab

Apabila React datang ke dalam JavaScript, kami menyesuaikan JavaScript untuk keperluan React dengan memperkenalkan pelbagai perpustakaan dan alatan. Ini juga bermakna lebih banyak kebergantungan untuk projek kami. Belum lagi bahawa perpustakaan-perpustakaan ini masih dalam pembangunan dan perubahan pecah diperkenalkan secara teratur. Oleh itu, anda perlu mengekalkan kebergantungan ini dengan berhati-hati dalam projek anda.

Ini menambahkan satu lagi kerumitan ke pembangunan JavaScript.

Permohonan React tipikal anda akan mempunyai sekurang-kurangnya kebergantungan ini:

  • menaip statik - Flow / TypeScript
  • kebolehubahan - tidak berubahJS
  • routing - ReactRouter
  • pemformatan - Prettier
  • linting - ESLint
  • fungsi pembantu - Ramda / Lodash

Sekarang mari tukar Reaksi JavaScript untuk ReasonReact.

Adakah kita masih memerlukan semua ketergantungan ini?

  • menaip statik - terbina dalam
  • kebolehubahan - terbina dalam
  • penghalaan - terbina dalam
  • pemformatan - terbina dalam
  • linting - terbina dalam
  • fungsi pembantu - terbina dalam

Anda boleh mengetahui lebih lanjut mengenai ciri-ciri terbina dalam jawatan saya yang lain.

Dalam aplikasi ReasonReact, anda tidak memerlukan ini dan banyak lagi ketergantungan lain kerana banyak ciri penting yang menjadikan pembangunan anda lebih mudah telah dimasukkan ke dalam bahasa itu sendiri. Oleh itu, mengekalkan pakej anda akan menjadi lebih mudah dan anda tidak mempunyai peningkatan kerumitan sepanjang masa.

Ini adalah terima kasih kepada OCaml, yang berusia lebih daripada 20 tahun. Ia adalah bahasa yang matang dengan semua prinsip terasnya di tempat dan stabil.

Wrap-up

Pada mulanya, pencipta Alasan mempunyai dua pilihan. Untuk mengambil JavaScript dan entah bagaimana menjadikannya lebih baik. Dengan melakukan itu, mereka juga perlu menangani beban sejarahnya.

Walau bagaimanapun, mereka pergi jalan yang berbeza. Mereka mengambil OCaml sebagai bahasa yang matang dengan prestasi yang hebat dan mengubahnya supaya ia menyerupai JavaScript.

Reaktik juga didasarkan pada prinsip-prinsip OCaml. Itulah sebabnya anda akan mendapat pengalaman pemaju yang lebih baik apabila anda menggunakannya dengan Alasan. React in Reason mewakili cara yang lebih selamat untuk membina komponen Reaktik, kerana sistem jenis yang kuat telah mendapat punggung dan anda tidak perlu menangani sebahagian besar masalah JavaScript (warisan).

Apa yang akan datang?

Jika anda datang dari dunia JavaScript, lebih mudah bagi anda untuk memulakan Alasan, kerana persamaan sintaksinya dengan JavaScript. Jika anda telah memprogramkan di React, ia akan menjadi lebih mudah untuk anda kerana anda boleh menggunakan semua pengetahuan React anda sebagai ReasonReact mempunyai model mental yang sama seperti React dan aliran kerja yang sangat serupa. Ini bermakna anda tidak perlu bermula dari awal. Anda akan belajar Alasan seperti yang anda buat.

Cara terbaik untuk mula menggunakan Alasan dalam projek anda adalah untuk melakukannya secara bertahap. Saya telah menyebut bahawa anda boleh mengambil kod Alasan dan menggunakannya dalam JavaScript, dan sebaliknya. Anda boleh melakukan perkara yang sama dengan ReasonReact. Anda mengambil komponen ReasonReact anda dan menggunakannya dalam aplikasi React JavaScript anda, dan sebaliknya.

Pendekatan tambahan ini telah dipilih oleh pemaju Facebook yang menggunakan Alasan secara meluas dalam pembangunan aplikasi Facebook Messenger.

Jika anda ingin membina aplikasi menggunakan React in Reason dan mempelajari asas-asas Alasan secara praktikal, periksa artikel saya yang lain di mana kita akan membina permainan Tic Tac Toe bersama-sama.

Jika anda mempunyai sebarang pertanyaan, kritikan, pemerhatian, atau petua untuk penambahbaikan, jangan ragu untuk menulis komen di bawah atau hubungi saya melalui Twitter atau blog saya.