Psst! Shuning uchun ReasonReact - Reactni yozishning eng yaxshi usuli

Siz foydalanuvchi interfeyslarini yaratish uchun React-dan foydalanyapsizmi? Mayli, men ham. Va endi nima uchun ReasonML-dan foydalanib React dasturlaringizni yozishingiz kerakligini bilib olasiz.

Reaktsiya - bu foydalanuvchi interfeyslarini yozishning ajoyib usuli. Ammo, buni yanada salqin qila olamizmi? Yaxshimi?

Buni yaxshiroq qilish uchun avval uning muammolarini aniqlashimiz kerak. Javob sifatida JavaScript kutubxonasi sifatida asosiy muammo nimada?

Javob dastlab JavaScript uchun ishlab chiqilmagan

Agar siz React-ni sinchkovlik bilan o'rgansangiz, uning asosiy tamoyillari JavaScript uchun begona ekanligini ko'rasiz. Keling, o'zgarmaslik, funktsional dasturlash printsiplari va xususan tizim tizimi haqida gapiraylik.

O'zgarmaslik reaktsiyaning asosiy tamoyillaridan biridir. O'zingizning holatingizni yoki holatingizni muttasil o'zgartirishni xohlamaysiz, chunki bunday qilsangiz, oldindan aytib bo'lmaydigan oqibatlarga olib kelishi mumkin. Javascriptda bizda o'zgarmaslik yo'q. Biz ma'lumotlar konstruktsiyalarimizni konventsiya tomonidan o'zgartirilmaymiz yoki bunga erishish uchun immutableJS kabi kutubxonalardan foydalanamiz.

Reakt funktsional dasturlash tamoyillariga asoslanadi, chunki uning ilovalari funktsiyalarning tarkibiy qismidir. Garchi JavaScript-da ba'zi funktsiyalar mavjud bo'lsa-da, masalan birinchi darajali funktsiyalar, lekin bu funktsional dasturlash tili emas. Biron bir yoqimli deklarativ kod yozmoqchi bo'lsak, Lodash / fp yoki Ramda kabi tashqi kutubxonalardan foydalanishimiz kerak.

Xo'sh, tip tizimida nima bor? Reaktsiyada bizda PropTypes bor edi. Biz ularni JavaScript-dagi turlarni taqlid qilish uchun ishlatganmiz, chunki u statik tipdagi til emas. Murakkab statik yozuvning afzalliklaridan foydalanish uchun yana Flow va TypeScript kabi tashqi bog'liqlikni ishlatishimiz kerak.

Javob berish va JavaScript taqqoslash

Ko'rib turganingizdek, JavaScript React asosiy tamoyillariga mos kelmaydi.

Javobdan JavaScriptga ko'proq mos keladigan boshqa dasturlash tili bormi?

Yaxshiyamki, bizda ReasonML mavjud.

Sababi, biz o'zgarmaslikni qutidan olib tashlaymiz. Funktsional dasturlash tili OCaml-ga asoslanganligi sababli, bizda tilning o'zida ham shunday xususiyatlar mavjud. Sabab, shuningdek, o'z-o'zidan bizga kuchli turdagi tizimni taqdim etadi.

Reaktsiya, JavaScript va sabablarni taqqoslash

Sabab React asosiy tamoyillariga mos keladi.

Sabab

Bu yangi til emas. Bu 20 yildan ortiq vaqtdan beri ishlab turgan dasturlash tili bo'lgan OCaml uchun alternativ JavaScript-ga o'xshash sintaksis va moslama. Sabab Facebook-ning ishlab chiquvchilari tomonidan OCaml-ni o'z loyihalarida (Flow, Infer) ishlatgan.

Sabab, C-ga o'xshash sintaksisi bilan OCaml-ni JavaScript yoki Java kabi asosiy tillardan kelgan odamlar uchun osonlashtiradi. Bu sizga yaxshiroq hujjatlarni (OCaml bilan taqqoslaganda) va uning atrofidagi tobora o'sib borayotgan jamoani taqdim etadi. Bundan tashqari, mavjud JavaScript kod bazangiz bilan integratsiyalashishni osonlashtiradi.

OCaml fikrlash uchun asosiy til bo'lib xizmat qiladi. Sabab OCaml bilan bir xil semantikaga ega - faqat sintaksis boshqacha. Buning ma'nosi shundaki, siz JavaScript-ga o'xshash sintaksis yordamida OCaml yozishingiz mumkin. Natijada siz OCaml-ning ajoyib xususiyatlaridan foydalanishingiz mumkin, masalan, uning kuchli tipli tizimi va naqshning mosligi.

Keling, Sintaksis misolini ko'rib chiqaylik.

fizzbuzz = (i) => ga ruxsat bering
  switch (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Jumboq"
  | _ => string_of_int (i)
  };
uchun (i 1 dan 100 gacha) {
  Js.log (fizzbuzz (i))
};

Ushbu misolda biz taqqoslash usulidan foydalanayotgan bo'lsak ham, u JavaScript-ga juda o'xshaydi, to'g'rimi?

Biroq, brauzerlar uchun ishlatilishi mumkin bo'lgan yagona til - bu JavaScript, shuning uchun biz uni kompilyatsiya qilishimiz kerak.

BukleScript

Sababning kuchli xususiyatlaridan biri bu BuckleScript kompilyator bo'lib, u sizning Sabab kodini oladi va uni o'lik kodni o'chirib yuboradigan va o'qish uchun qulay JavaScript-ga kompilyatsiya qiladi. Sababni hamma ham yaxshi bilmaydigan jamoada ishlasangiz, o'qishga qiziqishingizni baholaysiz, chunki ular kompakt JavaScript kodini o'qiy olishadi.

Javascript bilan o'xshashlik shunchalik yaqinki, ba'zi sabablarga ko'ra kodni kompilyator umuman o'zgartirishi shart emas. Shunday qilib, kodni hech qanday o'zgartirmasdan, siz odatiy yozilgan tilning afzalliklaridan bahramand bo'lishingiz mumkin.

qilaylik = (a, b) => a + b;
qo'shing (6, 9);

Bu Sabab va JavaScript kodlaridagi haqiqiy kod.

BuckleScript to'rtta kutubxona bilan ta'minlangan: Belt deb nomlangan standart kutubxona (OCaml standart kutubxonasi etarli emas) va JavaScript, Node.js va, DOM API bilan bog'langan.

BuckleScript OCaml kompilyatoriga asoslanganligi sababli, siz Babeldan tezroq va TypeScript-dan bir necha baravar tezkor ravishda tezkor kompozitsiyani olasiz.

Javob uchun JavaScript-da yozilgan FizzBuzz algoritmimizni tuzaylik.

BuckleScript orqali JavaScript-ga sabablarni kod tuzish

Ko'rib turganingizdek, natijada paydo bo'lgan JavaScript kodi juda yaxshi o'qiladi. Bu JavaScript dasturchisi tomonidan yozilganga o'xshaydi.

Sabab nafaqat JavaScript-ni, balki ona va byt-kodni ham tuzadi. Shunday qilib, siz Reason sintaksisidan foydalanib bitta dastur yozishingiz va uni MacOS, Android va iOS telefonlaridagi brauzerda ishga tushirishingiz mumkin. Jared Forsit tomonidan yozilgan "Gravitron" o'yini bor, u "Sabab" kitobida yozilgan va men yuqorida aytib o'tgan barcha platformalarda o'ynalishi mumkin.

JavaScript intervyu

BuckleScript, shuningdek, JavaScript bilan ishlashga imkon beradi. Siz nafaqat ishlaydigan JavaScript kodini Sabab kod bazangizga joylashtira olasiz, balki JavaScript kodi bilan ham o'zaro ta'sirlashishingiz mumkin. Bu siz mavjud JavaScript kod bazangizga Sabab kodini osongina qo'shishingiz mumkin degan ma'noni anglatadi. Bundan tashqari, NPM ekotizimidagi barcha JavaScript paketlarini sizning Reason kodingizdan foydalanishingiz mumkin. Masalan, siz bitta loyihada oqim, TypeScript va sabablarni birlashtirishingiz mumkin.

Biroq, bu oddiy emas. Javob javascript kutubxonasi yoki kodidan foydalanish uchun uni avval Sabab bog'lab qo'yish orqali sababga etkazishingiz kerak. Boshqacha qilib aytganda, sababingizning kuchli turlaridan foydalanish imkoniyatiga ega bo'lish uchun siz ochmagan JavaScript kodingiz turlarini kiritishingiz kerak.

Javob kodida JavaScript kutubxonasidan har doim foydalanishingiz kerak bo'lsa, kutubxona Sabablar to'plami indeksi (Redex) ma'lumotlar bazasini ko'rib chiqish orqali allaqachon Sabablar guruhiga ulanganligini tekshiring. Sabab va JavaScript kutubxonalarida yozilgan turli xil kutubxonalar va vositalarni Reason bindingi bilan birlashtirgan veb-sayt. Agar siz u erda kutubxonangizni topsangiz, uni qaramlik sifatida o'rnatib, "Reason" dasturida foydalanishingiz mumkin.

Ammo, agar kutubxonangizni topa olmagan bo'lsangiz, o'zingiz bog'lab qo'ygan sabablarni o'zingiz yozishingiz kerak bo'ladi. Agar siz faqat Sababdan boshlasangiz, shuni yodda tutingki, yozishni bog'lash siz boshlamoqchi bo'lgan narsa emas, chunki bu Sabab ekotizimidagi eng qiyin narsalardan biridir.

Yaxshiyamki, men shunchaki Sabablarni bog'laydigan narsalar haqida yozmoqdaman, shuning uchun xabardor bo'ling!

Agar sizga JavaScript kutubxonasidan ba'zi bir funktsiyalar kerak bo'lsa, umuman kutubxonaning sabablarini bog'lash sabablarini yozishingiz shart emas. Siz buni faqat ishlatishingiz kerak bo'lgan funktsiyalar yoki tarkibiy qismlar uchun qilishingiz mumkin.

ReasonReact

Ushbu maqola Reason in Reasonni yozish haqida bo'lib, uni ReasonReact kutubxonasi yordamida amalga oshirishingiz mumkin.

Balki siz hozir "Reasonda Reactdan foydalanishim kerakligini hali ham bilmayman" deb o'ylayotgandirsiz.

Buning asosiy sababini yuqorida aytib o'tgan edik - Sabab JavaScript-ga qaraganda React-ga ko'proq mos keladi. Nima uchun u ko'proq mos keladi? Chunki React Reason, aniqrog'i OCaml uchun ishlab chiqilgan.

Sabablarga yo'l

Reactning birinchi prototipi Facebook tomonidan ishlab chiqilgan va OCamlning amakivachchasi bo'lgan Standard Meta Language (StandardML) da yozilgan. Keyin, u OCamlga ko'chirildi. Javob JavaScript-ga ham ko'chirilgan.

Buning sababi butun veb-sayt JavaScript-ni ishlatganligi sababli: "Endi biz UI-ni OCaml-da quramiz" deyish oqilona emas edi.

Shunday qilib, biz JavaScript kutubxonasi sifatida reaktsiyaga o'rganib qoldik. Boshqa kutubxonalar va tillar bilan o'zaro munosabat qiling - Elm, Redux, Recompose, Ramda va PureScript - JavaScript-da mashhur funktsional dasturlash. Flow va TypeScript-ning o'sishi bilan statik yozish ham ommalashdi. Natijada, statik turlarga ega funktsional dasturlash paradigmasi dunyoda oldingi qismga aylandi.

2016 yilda Bloomberg OCaml-ni JavaScript-ga o'zgartiradigan kompilyator bo'lib, ochiq manbali BuckleScript-ni ishlab chiqdi. Bu ularga OCaml-ning kuchli tipli tizimidan foydalanib, old qismda xavfsiz kod yozish imkoniyatini berdi. Ular optimallashtirilgan va hayratlanarli darajada tezkor OCaml kompilyatorini oldilar va uning orqa tomonidagi generatsion kodni JavaScript-ni yaratuvchisi bilan almashtirdilar.

Funktsional dasturlashning ommabopligi BuckleScript-ning chiqarilishi bilan Facebook birinchi bo'lib ML tilida yozilgan React-ning asl g'oyasiga qaytish uchun ideal muhit yaratdi.

ReasonReact

Ular OCaml semantikasini va JavaScript sintaksisini olib, Sababni yaratdilar. Shuningdek, ular React - ReasonReact kutubxonasi atrofida Reason bandlarini yaratdilar, ular qo'shimcha funktsiyalarga ega edi, masalan Redux printsiplarini davlat tarkibiy qismlariga kiritish. Shunday qilib, ular React-ning asl ildizlariga qaytishdi.

Reasonda reaktsiyaning kuchi

React JavaScript-ga kirganda, turli xil kutubxonalar va vositalarni taqdim etish orqali JavaScript-ni React ehtiyojlariga moslashtirdik. Bu, shuningdek, bizning loyihalarimizga bog'liqlikni anglatadi. Ushbu kutubxonalar hanuz rivojlanayapti va doimiy ravishda muntazam ravishda o'zgartirilib borilmoqda. Shunday qilib, ushbu bog'liqliklarni loyihalaringizda ehtiyotkorlik bilan saqlashingiz kerak.

Bu JavaScript rivojlanishiga yana bir murakkablik sathini qo'shdi.

Sizning React tipik ilovangiz hech bo'lmaganda ushbu bog'liqliklarga ega bo'ladi:

  • statik kiritish - Flow / TypeScript
  • o'zgarmaslik - o'zgarmasJS
  • marshrutizator - ReactRouter
  • formatlash - Prettier
  • linting - ESLint
  • yordamchi funktsiyasi - Ramda / Lodash

Endi ReasonReact uchun JavaScript reaktsiyasini almashtiramiz.

Bu qaramliklar bizga hali ham kerakmi?

  • statik yozish - o'rnatilgan
  • o'zgarmasligi - o'rnatilgan
  • marshrutizatsiya - o'rnatilgan
  • formatlash - o'rnatilgan
  • astarlama - o'rnatilgan
  • yordamchi funktsiyalar - o'rnatilgan

Ushbu o'rnatilgan xususiyatlar haqida boshqa xabarimdan bilib olishingiz mumkin.

ReasonReact dasturida sizga bu va boshqa ko'plab qaramliklar kerak emas, chunki sizning rivojlanishingizni osonlashtiradigan juda ko'p muhim xususiyatlar allaqachon tilning o'zida mavjud. Shunday qilib, paketlaringizni saqlab qolish osonlashadi va vaqt o'tishi bilan sizda murakkablik bo'lmaydi.

Bu 20 yoshdan oshgan OCaml tufayli. Bu barcha asosiy tamoyillari mavjud va barqaror bo'lgan etuk til.

Aylantirmoq

Dastlab, Reason yaratuvchilarida ikkita variant bor edi. JavaScript-ni olish va qandaydir yo'l bilan uni yaxshilang. Bu bilan ular tarixiy og'irliklarga duch kelishlari kerak.

Biroq, ular boshqa yo'ldan borishdi. Ular OCaml-ni etuk til sifatida mukammal ishlashi bilan qabul qildilar va uni JavaScript-ga o'xshash tarzda o'zgartirdilar.

Reaktsiya shuningdek OCaml tamoyillariga asoslanadi. Shuning uchun siz uni Reason-dan foydalanganda, ishlab chiquvchilarni yanada yaxshi tajribaga ega bo'lasiz. React in Reason Reaktsiya komponentlarini yaratishda xavfsizroq usulni anglatadi, chunki kuchli tizim tizimi sizning orqangizga tushgan va siz ko'pgina JavaScript (eskirgan) muammolarni hal qilishingiz shart emas.

Keyingisi nima?

Agar siz JavaScript dunyosidan kelgan bo'lsangiz, uning sababi javascript bilan sintaksis o'xshashligi sababli Sabab bilan boshlashni osonlashtiradi. Agar siz React-da dasturlashtirilgan bo'lsangiz, bu sizga osonroq bo'ladi, chunki ReactReact-da hamma narsadan foydalanishingiz mumkin, chunki ReasonReact-da aqliy model React-ga o'xshash va ish jarayoni juda o'xshash. Bu degani, noldan boshlash kerak emas. Rivojlanayotganingizda sababni bilib olasiz.

Loyihalaringizda Sabablardan foydalanishni boshlashning eng yaxshi usuli bu bosqichma-bosqich amalga oshirishdir. Yuqorida aytib o'tganimdek, siz Sabab kodini olib, uni JavaScript-da va boshqa usulda ishlatishingiz mumkin. Siz xuddi shu narsani ReasonReact yordamida qilishingiz mumkin. Siz ReasonReact komponentini olib, uni React JavaScript dasturingizda ishlatasiz va aksincha.

Ushbu bosqichma-bosqich yondashuvni Facebook Messenger dasturini ishlab chiqishda Reason-dan keng foydalanadigan Facebook-ning ishlab chiquvchilari tanladilar.

Agar siz React in Reason-dan foydalanib dastur qurmoqchi bo'lsangiz va Reason asoslarini amaliy ravishda o'rganmoqchi bo'lsangiz, mening Tic Tac Toe o'yinini birgalikda quradigan boshqa maqolamni tekshiring.

Agar sizda biron bir savol, tanqid, kuzatishlar yoki yaxshilash bo'yicha maslahatlar bo'lsa, quyida sharh yozing yoki menga Twitter yoki blogim orqali xabar bering.