تفاعل تطوير التطبيق باستخدام ReasonReact

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



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

تفاعل وجافا سكريبت

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

الحصانة هي أحد المبادئ الأساسية للرد. الطفرات في خصائص المكونات أو حالة التطبيق غير مرغوب فيها للغاية ، لأن هذا يمكن أن يؤدي إلى عواقب لا يمكن التنبؤ بها. جافا سكريبت ليس لديها آليات قياسية لتوفير الحصانة. تصبح هياكل البيانات غير قابلة للتغيير إما من خلال الالتزام باتفاقيات معينة أو باستخدام مكتبات مثل immutable-js .

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

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


قارن React و JavaScript

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

هل هناك لغة برمجة أفضل من JavaScript تتوافق مع React؟
يمكنك إعطاء إجابة إيجابية على هذا السؤال. هذه اللغة ReasonML .

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


قارن التفاعل و JavaScript والسبب

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

السبب

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


OCaml

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


السبب

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

ألق نظرة على مقتطف رمز السبب للتعرف على بناء الجملة الخاص به.

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)) }; 

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

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

بوكليسكريبت

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


بوكليسكريبت

ستكون سهولة قراءة نتائج BuckleScript مفيدة إذا كنت تعمل في فريق لا يعرف الجميع فيه السبب. سيتمكن هؤلاء الأشخاص ، على الأقل ، من قراءة رمز JS الناتج.

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

فيما يلي مثال على التعليمات البرمجية التي ستعمل في كل من السبب وجافا سكريبت:

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

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

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

باستخدام BuckleScript ، نقوم بتجميع جزء رمز Reason أعلاه الذي يحتوي على وظيفة fizzbuzz() في JavaScript.


تجميع كود السبب في JavaScript باستخدام BuckleScript

كما ترى ، تبين أن كود JS قابل للقراءة تمامًا. يبدو كما لو كتب من قبل رجل.

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

تنظيم التفاعل مع JavaScript

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

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

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

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

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

السبب رد الفعل

في بداية المقال ، تحدثنا عن كيفية تخصيصه لتطوير تطبيقات التفاعل باستخدام Reason. يمكنك القيام بذلك بفضل مكتبة ReasonReact .

ربما تفكر الآن: "ما زلت لا أفهم لماذا من الضروري كتابة تطبيقات رد الفعل في العقل". ومع ذلك ، فقد ناقشنا بالفعل السبب الرئيسي لاستخدام حزمة React and Reason ، وهو أن React متوافق بشكل أفضل مع Reason أكثر من JavaScript. لماذا هذا؟ الشيء هو أن React تم إنشاؤه بناءً على السبب ، أو بالأحرى ، بناءً على OCaml.

الطريق إلى ReasonReact

تم تطوير أول نموذج أولي من قبل Facebook وتم كتابته بلغة Meta Language القياسية ( StandardML ) ، بلغة قريبة من OCaml. ثم تم نقل React إلى OCaml ، بالإضافة إلى ذلك ، تم نقل React إلى JavaScript. تم ذلك بسبب حقيقة أن الويب بأكمله استخدم جافا سكريبت ومن المحتمل أن يكون من غير المعقول الإدلاء بعبارات مثل: "الآن سنكتب واجهة المستخدم على OCaml". أدت ترجمة React إلى JavaScript إلى ثمارها وأدت إلى التوزيع الواسع لهذه المكتبة.

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

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

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


السبب رد الفعل

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

حول ميزات رد الفعل في العقل

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

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


تبعيات تطبيق التفاعل النموذجي

فيما يلي المهام التي تحلها هذه التبعيات:

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

الآن سنستخدم مكتبة ReasonReact ، بدلاً من React for JavaScript. هل نحتاج بهذا النهج إلى كل هذه التبعيات؟


التبديل إلى ReasonReact

بعد تحليل نفس قائمة المهام التي تم حلها سابقًا باستخدام أدوات إضافية ، اكتشفنا أنه يمكن حلها جميعًا باستخدام أدوات ReasonReact المضمنة. يمكنك قراءة المزيد عنها هنا .

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

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

ما هي الخطوة التالية؟

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

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

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

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

الملخص

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

ومع ذلك ، اختاروا المسار الثاني المرتبط بـ OCaml. أخذوا OCaml ، وهي لغة ناضجة ذات أداء ممتاز ، وتعديلها لتبدو مثل JavaScript.

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

أعزائي القراء! هل حاولت ReasonReact؟