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

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

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

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

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

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

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

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

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

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

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

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

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

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

السبب

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

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

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

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

let fizzbuzz = (i) => switch (i mod 3, i mod 5)  ; for (i in 1 to 100) { Js.log(fizzbuzz(i)) };

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

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

بوكلي سكريبت

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

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

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

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

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

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

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

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

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

JavaScript interop

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

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

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

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

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

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

السبب

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

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

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

الطريق إلى العقل

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

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

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

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

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

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

قوة React في العقل

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

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

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

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

دعنا الآن نستبدل JavaScript React بـ ReasonReact.

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

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

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

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

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

يتم إحتوائه

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

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

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

ماذا بعد؟

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

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

تم اختيار هذا النهج التدريجي من قبل مطوري Facebook الذين يستخدمون Reason على نطاق واسع في تطوير تطبيق Facebook Messenger.

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

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