تم تحديث التجميع المتفاعل حديثًا ، في 26 يونيو
2018 ، إلى الإصدار 3.6.0. يبلغ عمر هذا التجمع بالفعل أكثر من ثلاث سنوات ، ولكن ، بشكل ملحوظ على خلفية العديد من
الآخرين (أكثر من 18 ألف Stars GitHub) ، لم تتم رؤيته تقريبًا على حبري. ما هي ميزته؟ باختصار - تقدم الجمعية للمطور "في كل مرة"!
أولا عن الحزن
أولاً ، القليل عن الأشياء الحزينة. إن قيمة البدايات المبدئية لمشاريع التفاعل هائلة. كما تعلم ، فإن React نفسها هي مجرد مكتبة تنفذ مستوى العرض التقديمي ، ومن أجل إنشاء تطبيق كامل ، ستحتاج إلى استخدام العديد من المكتبات الأخرى ، نظرًا لأن نظام React البيئي يقدم الكثير منها. لهذا السبب ، يعد تكوين مشروع React مشكلة خطيرة ، والتي يصعب للغاية على المطور إيجاد حل لها. يفهم دان أبراموف نفسه هذا تمامًا ، قائلاً: "لا يجب أن يقف التكوين في طريق البدء ." ويقدم حلا - إنشاء تطبيق رد فعل . في هذا التجمع الافتتاحي ، الذي اكتسب شعبية كبيرة (أكثر من 51 ألف Stars GitHub) ، حاول المؤلفون حماية المطور من مشكلات التكوين قدر الإمكان ، وإخفاء التكوين الافتراضي ، وخفض مجموعة الوحدات إلى الحد الأدنى ، وتوفير إمكانية الإنشاء التلقائي للمكونات ، وبالتالي خلق شعور بالبساطة و سهولة تطوير تطبيق رد الفعل. علاوة على ذلك ، يقدمون ، بناءً على نفس الرسالة ، قائمة التجميعات الموصى بها. ربما يكون هذا النهج جيدًا لجذب الوافدين الجدد ، ولكن سرعان ما يستنفد نفسه بالقيود ومشكلات التكوين ، وقضايا تطبيق أفضل الوحدات ، وأفضل الممارسات لا تزال بحاجة إلى معالجة. وماذا عن ، على سبيل المثال ، المطور الذي يقوم بتطوير أول مشروع رد فعل له؟
هناك مخرج
إن التجمع المتفاعل هو نهج بديل لحل المشكلة ويقدم "في كل مرة". هذه مجموعة من الوحدات المعترف بها كمعيار واقعي وتم اختبارها في العمل ، وهي مجموعة يتم فيها تطبيق أفضل الممارسات في تنظيم المشروع ، بما في ذلك مراعاة قابلية التوسع والأداء ، يتم تقديم التقنيات التي تساعد المبرمج على تطوير وتصحيح التعليمات البرمجية بسرعة.
يضعها مطورو التجميع على أنها قابلة للتطوير بدرجة كبيرة ، "دون اتصال بالإنترنت أولاً" (بمجرد أن يعمل التطبيق الذي تم تنزيله بلا اتصال بالإنترنت) ، مع مراعاة تجربة أفضل المطورين ، والتي تهدف إلى الأداء العالي والمبنية وفقًا لـ "أفضل الممارسات" ، والقوية ، "جاهزة للإنتاج" ، أساس تم اختباره في المعركة لتطوير تطبيقات التفاعل.
المكتبات المطبقة
مزيد من المعلومات حول الوحدات المستخدمة:
- React، v16.4 (Fiber) - التنفيذ التدريجي لخوارزمية React الرئيسية التي تزيد الإنتاجية في تطوير المهام مثل الرسوم المتحركة وتنظيم العناصر على الصفحة وحركة العناصر ؛
- React Router ، الإصدار 4.3 - موجه بحكم الواقع لتطبيقات التفاعل ، يجعل من الممكن إنشاء تطبيقات باستخدام عناوين URL صديقة لمحرك البحث ؛
- Redux ، v4 - مكتبة توفر دفق بيانات أحادي الاتجاه بشكل صارم ، مما يجعل منطق التطبيق أكثر قابلية للتنبؤ به ويسهل فهمه ؛
- Redux Saga ، v0.16 - مكتبة مصممة لتبسيط وتحسين تنفيذ الآثار الجانبية (أي إجراءات مثل العمليات غير المتزامنة مثل تحميل البيانات ، وما إلى ذلك) في تطبيقات React / Redux ؛
- Reselect ، v3 - مكتبة تسمح لك بمنع إعادة رسم البيانات التي تم تلقيها وإعادة فرزها بشكل غير ضروري ، مما يؤدي بدوره إلى تسريع تطبيق React / Redux ؛
- ImmutableJS ، v4 - مكتبة تسهل العمل مع البيانات الثابتة في تطبيقات React / Redux ؛
- Styled Components ، v3.3 - مكتبة تسمح لك بالتخلص من فئات CSS كمرحلة وسيطة بين المكون وأنماطه ؛
- React Loadable ، v5.4 - مكتبة تسمح لك بتنفيذ نهج موجه للمكونات لفصل الكود وتنفيذ التحميل المتأخر ؛
- Jest v23.1 ، Enzyme v3.3 - مكتبات لاختبار تطبيقات التفاعل.
قابلية التوسع والأداء
نفذت الجمعية باستمرار مبادئ دعم قابلية التوسع وزيادة الإنتاجية ، بالتفصيل من قبل مطور التجميع ماكس ستويبر في محاضرته "تحجيم تطبيقات ReactJS" ودان أبراموف في محاضرة "مكونات العرض ومكونات الحاوية" .
على وجه الخصوص ، تشمل هذه المبادئ:
- فصل المكونات في العرض والحاويات ؛
- وضع التعليمات البرمجية وفقًا لمبدأ مكون واحد - مجلد واحد ؛
- استخدام الأدوات الحديثة (المكونات ذات الأنماط ، وحدات CSS) لحل مشكلات وراثة CSS في المشاريع الكبيرة ؛
- تطبيق Redux / Saga لتبسيط تدفق البيانات ، وتبسيط العمليات غير المتزامنة.
الترميز ، التصحيح ، الاختبار
يوفر التجميع فرصًا كبيرة لمساعدة المبرمج في كتابة التعليمات البرمجية وتصحيحها:
- جافا سكريبت من الجيل التالي (قوالب صغيرة ، وإعادة هيكلة كائن ، وبناء JSX ، وما إلى ذلك) ؛
- التوليد السريع للمكونات / الحاويات / الطرق مع محدداتها ، والقصاصات ، والمخفضات والاختبارات عبر سطر الأوامر ؛
- "التبديل السريع" للوحدات ، مما يتيح دون تأخير رؤية نتائج التغييرات التي تم إجراؤها على رمز التطبيق ؛
- استخدام Webpack Dll Plugin ، مما يحسن وقت بدء تشغيل التطبيق على الخادم بنسبة 40٪ وأثناء "إعادة التحميل السريع" للوحدات النمطية ؛
- باستخدام AppVeyor و TravisCI (يتم تضمين ملفات التثبيت افتراضيًا) ، مما يسمح لك بتشغيل اختبارات التطبيق تلقائيًا على Windows و Unix ؛
- تحليل ثابت للكود: يقوم ESLint و Prettier و Stylelint تلقائيًا بفحص وتنسيق الشفرة في محررك (التكوين مطلوب ، وملفات التكوين والإرشادات مرفقة) ؛
- التنسيب على Heroku ، AWS S3 cloud services: (التكوين مطلوب ، التعليمات مضمنة).
سطر الأوامر
يوفر التجميع ، كما سبق ذكره ، مجموعة من الأوامر لسطر الأوامر ، حيث يتم تنفيذ العديد من الميزات اللازمة للمطور ، بما في ذلك:
- تهيئة مشروع جديد بتغطية اختبار 100٪ ؛
- إطلاق التطبيق على خادم المطور ؛
- توليد المكونات والحاويات مع محدداتها ، والقصاصات ، والمخفضات والاختبارات ؛
- إصدار نسخة "الإنتاج" من رمز المشروع ؛
- اختبار المشروع ؛
- تصحيح الأخطاء عن بُعد ، والذي يسمح باستخدام خدمة Ngrok لتوفير وصول آمن إلى الخادم المحلي من الإنترنت ؛
- الوبر.
- إدارة الترجمة (إضافة لغات ، واستخراج الرسائل إلى ملفات i18n JSON) ؛
- التنميط ، على الرغم من ذكره من بين مزايا سطر أوامر البناء ، لم يتم العثور عليه للأسف.
هل هناك أي شيء غير ضروري؟
إذا قررت أنك لست بحاجة إلى بعض الوحدات ، يمكنك إزالتها وسيساعدك التجميع في تعليماتك ( هنا وهنا ).
هل تعتقد أن شيئًا ما مفقود؟
الميزات الإضافية التي تقدمها الجمعية:
- "بلا اتصال بالإنترنت أولاً" ، مما يعني أنه بمجرد عمل التطبيق الذي تم تنزيله بلا اتصال بالإنترنت ، حتى في المتصفحات القديمة ؛
- يعني "تطبيق الويب الأصلي" أنه عند الزيارات المتكررة للتطبيق ، سيتلقى المستخدم دعوة لإضافة رمز إلى الشاشة الرئيسية ويمكن استخدام التطبيق تمامًا كتطبيق "أصلي" (ولكن بدون قيود تفرضها متاجر التطبيقات) ؛
- دعم تحسين محرك البحث (إدارة علامات رأس الصفحة) لمحركات البحث التي تدعم فهرسة محتوى JavaScript ؛
- سرعة تحميل خط الويب ، مما يلغي تأخير عرض الصفحة المرتبط بتأخير تحميل الخط ؛
- تحسين الصورة من خلال محمل صور Webpack.
التوثيق
التجميع موثق جيدًا ، على سبيل المثال ، حتى أنه يحتوي على قسم حول حل المشكلات المحتملة .
التحديثات ، البق
يتم تحديث المشروع بانتظام ، والاستجابة على الفور للتغيرات في الوحدات المكونة له (آخر تحديث 06/26/2018) ، ويحل المشاكل بنشاط: على سبيل المثال ، في 11/08/2018 ، تم حل 1367 و 9 مشاكل قيد الحل.
اذن ماذا؟
لذا ، فإن التجميع يعطي مثالًا ممتازًا على التكوين الكامل لمشروع React ، ويخلق الظروف للمبرمج لتسريع كتابة وتصحيح التعليمات البرمجية ، ويقدم أمثلة على تنفيذ أفضل الممارسات المستخدمة في تطوير التطبيقات القابلة للتطوير والإنتاجية.
وأخيرًا - رسالة من مؤلف الجمعية ماكسيميليان ستويبر وفريقه:
"إذا كنت بحاجة إلى أساس متين تم اختباره في المعركة لبناء طعامك الخارق التالي ، ولديك بعض الخبرة في React ، فهذا مثالي لك!"