Psst! إليك السبب في أن ReasonReact هي أفضل طريقة لكتابة React

هل تستخدم React لبناء واجهات المستخدم؟ حسنا انا ايضا والآن ، سوف تتعلم لماذا يجب عليك كتابة تطبيقات React الخاصة بك باستخدام ReasonML.

React هي وسيلة رائعة لكتابة واجهات المستخدم. ولكن ، هل يمكننا أن نجعلها أكثر برودة؟ أفضل؟

لجعله أفضل ، نحن بحاجة إلى تحديد مشاكلها أولاً. ما المشكلة الرئيسية في React كمكتبة JavaScript؟

لم يتم تطوير React في البداية لجافا سكريبت

إذا ألقيت نظرة فاحصة على React ، فسترى أن بعض مبادئها الرئيسية غريبة على JavaScript. دعونا نتحدث عن الثبات ، ومبادئ البرمجة الوظيفية ، ونظام الكتابة على وجه الخصوص.

ثبات هو واحد من المبادئ الأساسية لل React. لا ترغب في تغيير الدعائم الخاصة بك أو ولايتك لأنه إذا قمت بذلك ، فقد تواجه عواقب غير متوقعة. في JavaScript ، ليس لدينا قابلية ثابتة للخارج. نحافظ على هياكل البيانات الخاصة بنا غير قابلة للتغيير بموجب اتفاقية ، أو نستخدم المكتبات مثل immutableJS لتحقيق ذلك.

يعتمد React على مبادئ البرمجة الوظيفية لأن تطبيقاتها عبارة عن تركيبة من الوظائف. على الرغم من أن JavaScript يحتوي على بعض هذه الميزات ، مثل وظائف من الدرجة الأولى ، إلا أنها ليست لغة برمجة وظيفية. عندما نريد كتابة بعض الرموز التعريفية اللطيفة ، نحتاج إلى استخدام مكتبات خارجية مثل Lodash / fp أو Ramda.

إذن ، ما الأمر مع نظام الكتابة؟ في React ، كان لدينا PropTypes. لقد استخدمناها لمحاكاة الأنواع الموجودة في جافا سكريبت لأنها ليست لغة مكتوبة بشكل ثابت. للاستفادة من الكتابة الثابتة المتقدمة ، نحتاج مرة أخرى إلى استخدام التبعيات الخارجية ، مثل Flow و TypeScript.

رد ، ومقارنة جافا سكريبت

كما ترى ، جافا سكريبت غير متوافق مع مبادئ React الأساسية.

هل هناك لغة برمجة أخرى ستكون متوافقة مع React أكثر من JavaScript؟

لحسن الحظ ، لدينا ReasonML.

في السبب ، نخرج من الصندوق. نظرًا لأنه يعتمد على لغة البرمجة الوظيفية OCaml ، لدينا ميزات مضمنة في اللغة نفسها أيضًا. السبب يوفر لنا أيضا نظام نوع قوي من تلقاء نفسها.

التفاعل ، وجافا سكريبت ، ومقارنة السبب

السبب متوافق مع مبادئ React الأساسية.

السبب

إنها ليست لغة جديدة. إنه بناء جملة يشبه جافا سكريبت و toolchain لـ OCaml ، وهي لغة برمجة وظيفية موجودة منذ أكثر من 20 عامًا. تم إنشاء السبب بواسطة مطوري Facebook الذين استخدموا OCaml بالفعل في مشاريعهم (Flow، Infer).

السبب ، مع بناء جملة C-like الخاص به ، يجعل OCaml ودودًا للأشخاص القادمين من اللغات الرئيسية مثل JavaScript أو Java. يوفر لك مستندات أفضل (مقارنة بـ OCaml) ومجتمع متنام حوله. بالإضافة إلى ذلك ، فإنه يسهل عملية الدمج مع قاعدة بيانات JavaScript الموجودة لديك.

يخدم OCaml كلغة دعم للسبب. السبب لديه دلالات نفس OCaml - فقط بناء الجملة يختلف. هذا يعني أنه يمكنك كتابة OCaml باستخدام بناء جملة يشبه جافا سكريبت JavaScript. نتيجة لذلك ، يمكنك الاستفادة من ميزات OCaml الرائعة ، مثل نظام الكتابة القوي ومطابقة الأنماط.

دعونا نلقي نظرة على مثال على بناء جملة Reason.

دع fizzbuzz = (i) =>
  رمز التبديل (i mod 3 ، i mod 5) {
  | (0 ، 0) => "FizzBuzz"
  | (0 ، _) => "Fizz"
  | (_ ، 0) => "نبضات Google"
  | _ => string_of_int (i)
  }؛
من أجل (أنا في 1 إلى 100) {
  Js.log (fizzbuzz (ط))
}؛

على الرغم من أننا نستخدم مطابقة الأنماط في هذا المثال ، إلا أنه لا يزال يشبه جافا سكريبت ، أليس كذلك؟

ومع ذلك ، لا تزال جافا سكريبت هي اللغة الوحيدة القابلة للاستخدام في المتصفحات ، مما يعني أننا بحاجة إلى الترجمة إليها.

BuckleScript

واحدة من ميزات Reason القوية هي برنامج مترجم BuckleScript ، الذي يأخذ كود Reason الخاص بك ، ويجمعه إلى JavaScript قابل للقراءة وأداء مع التخلص من الكود الميت. ستقدر سهولة القراءة إذا كنت تعمل ضمن فريق لا يعرف الجميع السبب ، حيث لا يزال بإمكانهم قراءة شفرة JavaScript المترجمة.

التشابه مع جافا سكريبت قريب جدًا لدرجة أن بعضًا من كود Reason لا يحتاج إلى تغيير بواسطة المترجم على الإطلاق. لذلك ، يمكنك التمتع بفوائد اللغة المكتوبة بشكل ثابت دون أي تغيير في الكود على الإطلاق.

واسمحوا add = (a، b) => a + b؛
إضافة (6 ، 9) ؛

هذا رمز صالح في كل من السبب وجافا سكريبت.

يتم شحنها BuckleScript مع أربع مكتبات: المكتبة القياسية تسمى الحزام (مكتبة OCaml القياسية غير كافية) ، والربط إلى JavaScript و Node.js و DOM APIs.

نظرًا لأن BuckleScript يعتمد على برنامج التحويل البرمجي OCaml ، فستحصل على تصنيف سريع بذكاء أسرع بكثير من Babel وعدة مرات أسرع من TypeScript.

دعنا نجمع خوارزمية FizzBuzz المكتوبة في Reason إلى JavaScript.

تجميع شفرة السبب إلى JavaScript من خلال BuckleScript

كما ترون ، كود JavaScript الناتج قابل للقراءة إلى حد كبير. يبدو أنه تمت كتابته بواسطة مطور JavaScript.

لا يتم تجميع السبب مع جافا سكريبت فحسب ، بل أيضًا على لغة أصلية ورمز ثانوي أيضًا. لذلك ، يمكنك كتابة تطبيق واحد باستخدام بناء جملة Reason وتكون قادرًا على تشغيله في المتصفح على هواتف MacOS و Android و iOS. هناك لعبة تسمى Gravitron بواسطة Jared Forsyth مكتوبة في Reason ويمكن تشغيلها على جميع المنصات التي ذكرتها للتو.

جافا سكريبت interop

يوفر BuckleScript أيضًا إمكانية التشغيل المتداخل JavaScript. لا يمكنك فقط لصق شفرة جافا سكريبت العاملة الخاصة بك في قاعدة بيانات كود السبب الخاصة بك ، ولكن يمكن أيضًا أن تتفاعل شفرة السبب الخاصة بك مع شفرة JavaScript هذه. هذا يعني أنه يمكنك بسهولة دمج كود السبب في قاعدة بيانات JavaScript الموجودة لديك. علاوة على ذلك ، يمكنك استخدام جميع حزم JavaScript من النظام البيئي NPM في رمز السبب الخاص بك. على سبيل المثال ، يمكنك دمج Flow و TypeScript و Reason معًا في مشروع واحد.

ومع ذلك ، ليست بهذه البساطة. لاستخدام مكتبات JavaScript أو التعليمة البرمجية في Reason ، يلزمك تحويلها إلى Reason أولاً عبر روابط Reason. بمعنى آخر ، تحتاج إلى أنواع لرمز JavaScript غير المطابق حتى تتمكن من الاستفادة من نظام الكتابة القوي في Reason.

كلما احتجت إلى استخدام مكتبة JavaScript في رمز السبب ، تحقق مما إذا كانت المكتبة قد تم نقلها بالفعل إلى Reason من خلال استعراض قاعدة بيانات Reason Package Index (Redex). إنه موقع ويب يجمع المكتبات والأدوات المختلفة المكتوبة في مكتبات Reason و JavaScript مع روابط Reason. إذا وجدت مكتبتك هناك ، فيمكنك فقط تثبيتها كتبعية واستخدامها في تطبيق Reason الخاص بك.

ومع ذلك ، إذا لم تجد مكتبتك ، فستحتاج إلى كتابة روابط السبب بنفسك. إذا كنت بدأت للتو مع Reason ، فضع في اعتبارك أن روابط الربط ليست شيئًا تريد أن تبدأ به ، لأنها واحدة من أكثر الأمور صعوبة في النظام البيئي Reason.

لحسن الحظ ، أنا فقط أكتب منشورًا حول كتابة روابط السبب ، لذلك لا تنزعج!

عندما تحتاج إلى بعض الوظائف من مكتبة جافا سكريبت ، فلن تحتاج إلى كتابة روابط سبب لمكتبة ككل. يمكنك القيام بذلك فقط للوظائف أو المكونات التي تحتاج إلى استخدامها.

ReasonReact

تتناول هذه المقالة كتابة React in Reason ، والتي يمكنك القيام بها بفضل مكتبة ReasonReact.

ربما كنت تفكر الآن "ما زلت لا أعرف لماذا يجب علي استخدام React in Reason."

لقد ذكرنا بالفعل السبب الرئيسي للقيام بذلك - السبب أكثر توافقًا مع React من JavaScript. لماذا هو أكثر توافقا؟ لأنه تم تطوير React للسبب ، أو بشكل أكثر دقة ، لـ OCaml.

الطريق إلى السبب

تم تطوير أول نموذج أولي لـ React بواسطة Facebook وتم كتابته بلغة Meta Language (StandardML) القياسية ، وهي ابن عم OCaml. ثم ، تم نقله إلى OCaml. React تم نقله أيضًا إلى JavaScript.

وذلك لأن الويب بأكملها كانت تستخدم JavaScript ، وربما لم يكن ذكيًا أن نقول ، "الآن سنقوم بإنشاء واجهة مستخدم في OCaml". وقد نجحت - تم اعتماد React في JavaScript على نطاق واسع.

لذلك ، اعتدنا على الرد كمكتبة جافا سكريبت. يمكنك التفاعل مع المكتبات واللغات الأخرى - Elm و Redux و Recompose و Ramda و PureScript - في جعل البرمجة الوظيفية شعبية في JavaScript. ومع صعود Flow و TypeScript ، أصبحت الكتابة الثابتة شعبية أيضًا. نتيجة لذلك ، أصبح نموذج البرمجة الوظيفية مع الأنواع الثابتة هو السائد في عالم الواجهة الأمامية.

في عام 2016 ، قامت Bloomberg بتطوير BuckleScript مفتوح المصدر ، وهو المترجم الذي يحول OCaml إلى JavaScript. وقد مكنهم ذلك من كتابة رمز آمن على الواجهة الأمامية باستخدام نظام الكتابة القوي من OCaml. أخذوا المترجم المحسن OCaml المحسن والسريع واستبدلوا برمجتها الأصلية لتوليد الشفرة الأصلية لتوليد JavaScript.

ولدت شعبية البرمجة الوظيفية جنبًا إلى جنب مع إصدار BuckleScript المناخ المثالي لفيسبوك للعودة إلى الفكرة الأصلية لـ React ، والتي تمت كتابتها في البداية بلغة ML.

ReasonReact

أخذوا دلالات OCaml وبناء جملة JavaScript ، وخلقوا السبب. كما قاموا أيضًا بتكوين برنامج Reason حول برنامج React - ReasonReact - مع وظائف إضافية مثل تضمين مبادئ Redux في مكونات ذات حالة. من خلال القيام بذلك ، عادوا React إلى جذورها الأصلية.

قوة رد الفعل في العقل

عندما دخلت React إلى JavaScript ، عدّلنا JavaScript إلى React من خلال تقديم مكتبات وأدوات متنوعة. وهذا يعني أيضا المزيد من التبعيات لمشاريعنا. ناهيك عن أن هذه المكتبات لا تزال قيد التطوير ويتم إدخال التغييرات العاجلة بانتظام. لذلك تحتاج إلى الحفاظ على هذه التبعيات بعناية في مشاريعك.

هذا إضافة طبقة أخرى من التعقيد لتطوير جافا سكريبت.

سيكون لدى تطبيق React النموذجي هذه التبعيات على الأقل:

  • الكتابة الساكنة - التدفق / TypeScript
  • ثبات - immutableJS
  • التوجيه - ReactRouter
  • التنسيق - أجمل
  • الوبر - ESLint
  • وظيفة المساعد - رمدا / لودش

دعونا الآن نتبادل تفاعل JavaScript مع ReasonReact.

هل ما زلنا بحاجة إلى كل هذه التبعيات؟

  • الكتابة الساكنة - المدمج في
  • ثبات - المدمج في
  • التوجيه - المدمج في
  • التنسيق - المدمج في
  • الوبر - المدمج في
  • وظائف المساعد - المدمج في

يمكنك معرفة المزيد حول هذه الميزات المضمنة في مشاركتي الأخرى.

في تطبيق ReasonReact ، لا تحتاج إلى هذه والعديد من التبعيات الأخرى نظرًا لأن العديد من الميزات الأساسية التي تسهِّل تطويرك مضمنة بالفعل في اللغة نفسها. لذلك ، ستصبح صيانة الحزم الخاصة بك أكثر سهولة ولن تكون هناك زيادة في التعقيد مع مرور الوقت.

هذا بفضل OCaml ، الذي يزيد عمره عن 20 عامًا. إنها لغة ناضجة مع كل مبادئها الأساسية في مكانها ومستقرة.

يتم إحتوائه

في البداية ، كان لدى المبدعين في Reason خياران. لاتخاذ جافا سكريبت وجعلها بطريقة أفضل. من خلال القيام بذلك ، يجب عليهم أيضًا التعامل مع الأعباء التاريخية.

ومع ذلك ، ذهبوا في مسار مختلف. لقد أخذوا OCaml كلغة ناضجة مع أداء رائع وقاموا بتعديلها بحيث تشبه JavaScript.

ويستند React أيضا على مبادئ OCaml. لهذا السبب ستحصل على تجربة مطور أفضل بكثير عندما تستخدمها مع Reason. يمثل React in Reason طريقة أكثر أمانًا لبناء مكونات React ، نظرًا لأن نظام الكتابة القوي قد استعاد ظهرك ولست بحاجة إلى التعامل مع معظم مشكلات JavaScript (القديمة).

ماذا بعد؟

إذا كنت قادمًا من عالم JavaScript ، فسيكون من الأسهل بالنسبة لك أن تبدأ مع Reason ، بسبب تشابه بناء الجملة مع JavaScript. إذا كنت تقوم بالبرمجة في React ، فسيكون الأمر أسهل بالنسبة لك حيث يمكنك استخدام كل ما لديك من معرفة React لأن ReasonReact لديها نفس النموذج العقلي مثل React وسير العمل المتشابه للغاية. هذا يعني أنك لست بحاجة إلى البدء من نقطة الصفر. سوف تتعلم السبب بينما تتطور.

أفضل طريقة لبدء استخدام السبب في مشاريعك هي القيام بذلك بشكل تدريجي. لقد ذكرت بالفعل أنه يمكنك أخذ كود السبب واستخدامه في جافا سكريبت ، وبالعكس. يمكنك أن تفعل الشيء نفسه مع ReasonReact. يمكنك أخذ مكون ReasonReact الخاص بك واستخدامه في تطبيق React JavaScript الخاص بك ، والعكس.

تم اختيار هذا النهج التدريجي بواسطة مطوري Facebook الذين يستخدمون Reason بشكل مكثف في تطوير تطبيق Facebook Messenger.

إذا كنت ترغب في إنشاء تطبيق باستخدام React in Reason ومعرفة أساسيات Reason بطريقة عملية ، تحقق من مقالتي الأخرى حيث سنقوم ببناء لعبة Tic Tac Toe معًا.

إذا كانت لديك أي أسئلة أو انتقادات أو ملاحظات أو نصائح للتحسين ، فلا تتردد في كتابة تعليق أدناه أو التواصل معي عبر Twitter أو مدونتي.