برنامج React التعليمي: كيف تبدأ وكيف تقارن

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

مع وضع ذلك في الاعتبار ، قررنا إنتاج هذا البرنامج التعليمي متعدد الأجزاء من React ، لعرض قدراتها ومعرفة كيفية مقارنتها بـ Angular و VueJS.

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

حالة React في عام 2019

React هي مكتبة عرض يمكننا تتبعها في وقت مبكر من عام 2011 ، عندما ظهر نموذجها الأولي ، المسمى FaxJs ، على صفحتها على Facebook ، تم تقديم React نفسها بواسطة Jordan Walke (وهو أيضًا مؤلف للنموذج الأولي المذكور) في JSConfUS على 29 مايو 2013 ، وتم إتاحته علنًا على GitHub في 2 يوليو 2013.

استمرت React في اكتساب شعبية في عام 2014 ، عندما بدأت المؤتمرات في الظهور لتوسيع المجتمع ونشر React. من وجهة نظري ، كان عام 2015 عامًا هامًا بالنسبة إلى React ، حيث بدأت الشركات الكبرى (مثل Airbnb و Netflix) في إبداء الإعجاب بحلول React واعتمادها. أيضًا ، ظهر React Native في ذلك العام. لم تكن الفكرة وراء React Native شيئًا جديدًا تمامًا ، ولكن كان من المثير للاهتمام مشاهدتها ، خاصةً أنها كانت مدعومة من Facebook.

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

بين ذلك الحين والآن ، أصبحت الكثير من الأشياء الأخرى متاحة ، بما في ذلك أدوات React ، وإعادة كتابة خوارزمية أساسية ، و Fiber ، وتغيير في الإصدار الدلالي ، وما إلى ذلك. سريعًا إلى اليوم ، نحن في الإصدار 16.6.3 ، ربما قبل أسابيع قليلة من توفر الإصدار الجديد مع الخطافات (كان من المفترض أن يكون 16.7.0 ، لكن هذا الإصدار تم إصداره بالفعل بسبب بعض الإصلاحات لـ React.lazy). React معروف ومستقر ويحصل على آراء رائعة.

لكن ما هو رياكت؟

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

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

من الواضح ، إذا أردنا إضافة Redux و React Router وما إلى ذلك ، فإنه يبدأ في الحصول على جميع الأشياء الضرورية لإنشاء تطبيق عادي من صفحة واحدة ، وهو ما قد يكون سببًا لسوء توصيفه أحيانًا كإطار عمل بدلاً من مكتبة . إذا كان هناك أي شيء ، فيمكن القول إنه ، مع كل مكونات تلك البيئة معًا ، فإن مصطلح "framework" مناسب إلى حد ما ، ولكن React بمفردها هي مجرد مكتبة.

دعنا نتوقف عن المصطلحات ونركز على ما هو مختلف في React ، على الأشياء التي لم تكن لدينا قبل بدايتها. بادئ ذي بدء ، عندما تفكر في React لأول مرة ، تعتقد أن JSX ، لأنها أول ما يخطر ببالك عندما تنظر إلى الكود. JSX هو ملحق بناء جملة JavaScript يشبه إلى حد ما HTML / XML. عندما يتعلق الأمر بـ React و JSX ، لدينا بعض الاختلافات عن HTML ، على سبيل المثال ، فئة في React هي className ، ولا يوجد tabindex ولكن tabIndex يقبل النمط كائنات JavaScript التي لها خصائص camelCased ، وما إلى ذلك.

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

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

ومع ذلك ، فإن JSX ليس ضروريًا تمامًا في React. يمكنك كتابة وظائف عادية لإنشاء عناصر بدون استخدام JSX. يمكن استخدام نفس الكود أعلاه كما هو موضح أدناه.

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

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

في الواقع ، لدي سبب آخر لعرض المقتطف أعلاه. في كثير من الأحيان ، لا يفهم المطورون سبب حاجتنا للقيام بما يلي:

 import React from 'react';

يجب أن يكون المقتطف توضيحيًا ذاتيًا. على الرغم من أننا نستخرج Component ، ما زلنا بحاجة إلى React ، لأن Babel transpiles أعلى JSX إلى أدناه React.createElement . لذا ، إذا لم نستورد React ، فسوف تفشل ببساطة بالنسبة لنا. لقد ذكرت Babel ، وهي أداة تساعدنا على تقديم أشياء ليست في JavaScript حتى الآن (أو بالأحرى في المتصفحات) أو امتداد لها بطريقة ما (أو لغات مختلفة مثل TypeScript ، التي يدعمها Babel من Babel 7). بفضل بابل:

• سيتم تحويل JSX إلى وظائف يفهمها المتصفح.
• يمكننا استخدام ميزات جديدة غير موجودة في المتصفحات بعد (على سبيل المثال ، خصائص الفئة).
• يمكننا إضافة ميزات موجودة في المتصفحات الأحدث ولكنها غير موجودة في المتصفحات القديمة مع الحفاظ على دعم المتصفح الأقدم.

باختصار ، الغد هو اليوم في JavaScript ؛ ربما يكون هذا شيئًا يتطلب مقالته الخاصة. تجدر الإشارة إلى أنه يمكن أيضًا تجاوز استيراد React من خلال بعض الأساليب الأخرى (مثل إدخال ProvisionPlugin من خلال Webpack وما إلى ذلك) ، ولكن نظرًا لمحدودية المساحة هنا ، سنتجنبها ونفترض أن المستخدم سيستخدم تطبيق Create React ( CRA) (سنذكر المزيد عن هذه الأداة لاحقًا).

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

كيف تُقارن التفاعل بالزاوية و Vue؟

أنا لا أحب مقارنة المكتبات ، خاصة عندما نضطر إلى مقارنة الكمثرى بالتفاح (المكتبات مقابل الأطر وما إلى ذلك).

لذلك ، سأحاول مقارنة React بـ Angular و Vue باستخدام سلسلة من الأسئلة والإجابات القصيرة التي ليس لها علاقة كبيرة بالأمور التقنية بدلاً من قول شيء مثل "X أفضل من Y لأنه يستخدم JSX وليس قوالب. " نقاط مثل هذه عادة ما تكون تفضيلات شخصية ، اختيارات المرء الذاتية. كما أن السرعة وتخصيص الذاكرة وما إلى ذلك متشابهة تمامًا في React وجميع منافسيها الرئيسيين (يتبادر إلى الذهن Angular و Vue). يوجد تقرير جيد حقًا حول هذا الموضوع ، ولكن يرجى وضع ذلك في الاعتبار: لا تبدو الغالبية العظمى من التطبيقات مثل الجداول الكبيرة حقًا التي تتبادل الصفوف في جدول 10 كيلو. لذلك ، هذه النتائج هي أيضًا تجربة سرعة خالصة. في العالم الحقيقي ، لن تفعل شيئًا كهذا في المقام الأول.

لذلك دعونا نلقي نظرة على بعض الأسئلة المتعلقة بـ React وكيف تقارن بالمنافسة:

أريد أن أحصل على الكثير من فرص العمل. ما مدى شعبية React؟

حسنًا ، من السهل الإجابة عن هذا السؤال — اختر React. في الواقع ، أود أن أقول إن React لديها ما يقرب من 6-10 مرات (انتشار كبير جدًا ، ولكن هناك بعض البوابات حيث تكون 1:50 وبعضها يكون 1: 6) فرص عمل أكثر من Vue و 2-4 مرات أكثر من الزاوي. الطلب على خبراء React قوي ، فلماذا تحظى Vue بشعبية كبيرة على GitHub (لديها عدد من النجوم أكثر من React في الواقع) مع عدد أقل من فرص العمل؟ ليس لدي فكره.

أريد مجتمعًا كبيرًا ، الكثير من المكتبات ، حلولًا سريعة للمشكلات التي قد تنشأ.

تتفاعل. لا مزيد من البحث.

هل هو سهل الاستخدام وهل يجعل التطوير ممتعًا؟

مرة أخرى ، وفقًا لتقارير حالة JS لعامي 2018 و 2017 ، يتمتع كل من React و Vue بسمعة جيدة حقًا ويقول معظم المطورين إنهم سيستخدمونها مرة أخرى. من ناحية أخرى ، يميل Angular ، عامًا بعد عام ، إلى إرسال المزيد والمزيد من الأشخاص يقولون إنهم لن يستخدموه مرة أخرى.

أرغب في إنشاء تطبيق جديد من صفحة واحدة ، لكن لا أريد البحث عن مكتبات.

ربما يكون هذا هو المكان الوحيد الذي أود أن أقول فيه أن Angular هو الخيار الأفضل.

لا توجد شركات كبيرة. أريد أن أكون مستقلاً قدر الإمكان ، فماذا علي أن أختار؟

Vue - هو الوحيد المستقل في ثلاثينا الكبير. (يدعم Facebook React ، بينما تدعم Google موقع Angular).

أسهل بداية وأسرع منحنى تعلم؟

Vue / رد فعل. أنا أميل إلى Vue هنا ، لكن هذا مجرد رأيي الشخصي.

لماذا ا؟ لأنك لا تحتاج حتى إلى معرفة JSX (إنها اختيارية) وهي في الأساس مجرد HTML + CSS + JavaScript.

برنامج React التعليمي: الشروع في العمل على تطبيقك الأول

أسهل طريقة لبدء React في الوقت الحاضر هي استخدام CRA ، وهي أداة CLI تُنشئ مشروعًا لك وتساعدك على تجنب جميع الإعدادات الضرورية لـ Webpack / Babel والمزيد. بدلاً من ذلك ، فإنك تعتمد على كيفية تكوينه افتراضيًا وما تم تضمينه فيه بمرور الوقت. بفضل ذلك ، لا تحتاج إلى الاهتمام بالتحديثات الرئيسية لبعض المكتبات الهامة.

بالطبع ، لاحقًا ، يمكنك "إخراج" نفسك والتعامل مع كل جانب بمفردك عن طريق تشغيل npm run eject . يحتوي هذا الأسلوب على نقاط القوة الخاصة به ، حيث يمكنك تحسين تطبيقك بأشياء قد لا تكون متاحة بخلاف ذلك (على سبيل المثال ، أدوات الديكور) ، ولكن يمكن أن يكون أيضًا مصدرًا للصداع لأنه يتطلب العديد من الملفات الإضافية والكثير من الوقت.

لذا ، فإن أول شيء يجب فعله هو:

 npx create-react-app {app-name}

ثم npm run start وأنت على استعداد للذهاب.

الفئة مقابل مكونات الوظيفة

يجب أن نبدأ بشرح كيف تختلف هذه المكونات. في الأساس ، يمكن أن يكون كل مكون دالة أو فئة . يتمثل الاختلاف الرئيسي بينهما في أن الفئة الأولى بها بعض الميزات غير المتوفرة في مكون الوظيفة: يمكن أن يكون لها حالة وتستخدم المراجع ، ودورة الحياة ، وما إلى ذلك. هذه هي الحالة الحالية للتشغيل ، واعتبارًا من الإصدار 16.7 (أو على أي حال ستكون كذلك) سيتم استدعاؤنا بسبب التغييرات المذكورة بالفعل) ، سيكون لدينا خطافات أيضًا ، لذا ستكون الحالة والمراجع ممكنة باستخدام الخطافات.

هناك نوعان من مكونات الفئة: Component PureComponent . الاختلاف الوحيد بين الاثنين هو أن PureComponent تجري مقارنة ضحلة بين الدعائم والحالة - لها فوائدها الخاصة في حالة لا تريد فيها عمل تصيير "مهدرة" ، حيث يكون المكون وأطفاله في نفس الحالة تمامًا بعد تقديم. ومع ذلك ، فهي مجرد مقارنة ضحلة. إذا كنت تريد تنفيذ المقارنة الخاصة بك (على سبيل المثال ، لأنك تقوم بتمرير خاصيات معقدة) ، فما عليك سوى استخدام Component وتجاوز shouldComponentUpdate (والذي يعود بشكل افتراضي إلى true). منذ 16.6+ ، يتوفر شيء مشابه أيضًا مع مكونات الوظيفة - بفضل React.memo الذي يعد مكونًا ذا ترتيب أعلى ويتصرف افتراضيًا مثل PureComponent (مقارنة ضحلة) ، ومع ذلك ، فإنه يتطلب وسيطة ثانية حيث يمكنك تمرير مقارنة الدعائم المخصصة الخاصة بك .

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

طرق دورة حياة التفاعل

المنشئ (الدعائم)

• اختياري ، خاصة مع كون CRA شائعًا ، حيث يتم تضمين إعلانات حقل الفئة لجافا سكريبت كإعداد افتراضي. من غير المجدي أن تعلن ما إذا كنت تربط أساليبك بوظيفة السهم داخل نص الفصل. يمكن أيضًا تهيئة حالة مماثلة كخاصية فئة.
• يجب استخدامه فقط لتهيئة الحالة المحلية لطرق الكائن والربط في فئات ES6.

componentDidMount ()

• قم بإجراء مكالمات Ajax هنا.
• إذا كنت بحاجة إلى مستمعين للأحداث واشتراكات وما شابه ، فأضفهم هنا.
• يمكنك استخدام setState هنا (لكنها ستجعل المكون يُعرض).

ComponentWillUnmount ()

• ينظف كل الأشياء التي لا تزال جارية - على سبيل المثال ، يجب مقاطعة Ajax ، وإلغاء الاشتراك ، وإزالة أجهزة ضبط الوقت ، وما إلى ذلك.
• لا تستدعي setState ، لأنها غير مجدية لأن المكون لن يتم تركيبه (وستتلقى تحذيرًا).

componentDidUpdate (prevProps، prevState، snapshot)

• يحدث عندما ينتهي المكون للتو من التحديث (لا يحدث في التصيير الأولي).
• يحتوي على ثلاث معلمات اختيارية للاستخدام (الخصائص السابقة ، والحالة السابقة ، ولقطة ستظهر فقط إذا كان المكون الخاص بك ينفذ getSnapshotBeforeUpdate ).
• يحدث فقط إذا كان shouldComponentUpdate يُرجع صحيحًا.
• إذا كنت تستخدم setState هنا ، فيجب عليك حمايتها وإلا ستهبط في حلقة لا نهائية.

shouldComponentUpdate (nextProps، nextState)

• فقط لتحسين الأداء.
• إذا كانت النتائج خاطئة ، فلن يتم استدعاء التصيير.
• يمكن استخدام PureComponent بدلاً من ذلك إذا كان SCO الذي تم تجاوزه مجرد مقارنة ضحلة للدعامات / الحالة.

getSnapshotBeforeUpdate ()

• يمكن استخدامها للاحتفاظ ببعض المعلومات حول DOM الحالي ، على سبيل المثال ، موضع التمرير الحالي والذي يمكن إعادة استخدامه لاحقًا داخل componentDidUpdate لاستعادة موضع التمرير.

componentDidCatch (خطأ ، معلومات)

• مكان يجب أن تحدث فيه أخطاء التسجيل.
• يمكن استدعاء setState ، ولكن في الإصدارات المستقبلية ، سيتم إسقاطها لصالح الطريقة الثابتة getDerivedStateFromError(error) ، والتي ستقوم بتحديث الحالة عن طريق إرجاع قيمة لتحديث الحالة.

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

ثابت getDerivedStateFromError (خطأ)

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

getSnapshotBeforeUpdate ثابتًا (الدعائم ، الحالة)

• يجب استخدامها في الحالات التي تتغير فيها الخاصيات بمرور الوقت - على سبيل المثال ، وفقًا لـ React docs ، قد يكون مفيدًا لمكون انتقالي.
• نظرًا لأنه ثابت ، لا يمكنه الوصول إلى مثيل المكون نفسه.

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

الدولة مقابل الدعائم

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

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

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

تحتوي الدعائم أيضًا على شيء مفيد آخر يسمى defaultProps ، وهو حقل ثابت يمكن أن يخبرك ما هي الخصائص الافتراضية للمكون (عندما لا يتم تمريرها إلى المكون ، على سبيل المثال).

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

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

SetState هي طريقة لتغيير كائن الحالة المحلية (عن طريق إجراء دمج ضحل) ، وبعد ذلك ، يستجيب المكون لذلك عن طريق إعادة عرض نفسه. اعلم أنه بعد استخدام setState ، لن تعكس الخاصية this.state التغييرات المذكورة في الوظيفة على الفور (لها طبيعة غير متزامنة) حيث قد يتم تجميع عدد قليل من حالات setState معًا بسبب التحسين. لديها عدة طرق يمكن استدعاؤها حيث يتيح لنا أحد هذه الاحتمالات القيام بشيء ما مع المكون مباشرة بعد تحديث الحالة:

• setState({value: '5'})
• setState((state, props) => ({value: state.name + “'s”}))
• setState([object / function like above], () => {}) - يتيح لنا هذا النموذج إرفاق callback ، والذي سيتم استدعاؤه عندما تعكس الحالة البيانات التي أردنا الحصول عليها (في الوسيطة الأولى).

 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

رد الفعل السياق

استقرت React مؤخرًا واجهة برمجة تطبيقات السياق (التي كانت في React لبعض الوقت ، ولكنها كانت ميزة تجريبية على الرغم من استخدامها على نطاق واسع من قبل بعض المكتبات الأكثر شعبية مثل Redux) ، مما يساعدنا في حل مشكلة واحدة: حفر الدعائم. يعد حفر الدعائم باختصار طريقة لتمرير الدعائم بعمق داخل الهيكل - على سبيل المثال ، يمكن أن يكون نوعًا من السمات للمكونات ، والترجمة للغة معينة ، ومعلومات المستخدم ، وما إلى ذلك. قبل السياق (أو بالأحرى قبل أن يصبح غير تجريبي) ، تم التنقيب فيه عن طريق المرور بطريقة متكررة من الوالد إلى الطفل حتى آخر ورقة (من الواضح أنه كان هناك Redux الذي يمكنه أيضًا حل المشكلة). اعلم أن هذه الميزة لا تحل سوى الحفر الدعائم وليست بديلاً لأشياء مثل Redux أو Mobx. من الواضح ، إذا كنت تستخدم مكتبة إدارة الدولة من أجل ذلك فقط ، فيمكنك استبدالها بحرية.

تغليف

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