تقنيات التطوير الأمامية التي ربما لم تلاحظها

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

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

واجهة المستخدم

▍ تخطيط الصفحة

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



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



تم إيقاف إصدار ألفا من الإصدار 5 من Bootstrap حاليًا .



إذا كنت تفضل إنشاء مجموعات أنماط لمشاريعك بنفسك (المكونات ، الحشو ، الحاويات ، وما إلى ذلك) ، يمكنك توجيه انتباهك إلى CSS Flexbox ، مما يجعل هذا التخطيط المرن لعناصر صفحة الويب أساس إطار عمل CSS الخاص بك. تتخذ



CSS Grid منهجًا مختلفًا لتنظيم محتوى صفحة الويب من خلال وضعها في شبكة.

▍ تصميم مستجيب

الاستجابة هي قدرة الموقع على تكييف محتواه مع الجهاز الذي يتم عرضه عليه. على سبيل المثال ، على الهاتف الذكي والكمبيوتر المحمول ، ستبدو هذه المقالة مختلفة.



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



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



تعد استعلامات وسائط CSS أداة قوية لدعم التصميم سريع الاستجابة.



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



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

▍ مكونات وضوابط متجانسة

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



إذا كنت ترغب في استخدام أطر العمل والمكتبات الموجودة ، أو Angular ، أو React ، أو Vue لتطوير مشروعاتك ، فإليك بعض الأمثلة على مكتبات الأنماط التي تنفذ مبادئ التصميم متعدد الأبعاد المصممة لهذه الأدوات:

• الزاوي. مكتبة المواد الزاوي حيث يمكنك العثور على مكونات قوية و CDK كامل.
• تتفاعل. يتم تنفيذ مبادئ التصميم متعدد الأبعاد في مكونات الويب لواجهة المستخدم المادية .
• Vue. هنا لدينا Vuetify ، تطبيق تصميم متعدد الأبعاد لمشاريع Vue.

▍Form التحقق من الصحة ومعالجة الأخطاء

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

• الزاوي. نظرًا لأن Angular إطار عمل كامل ، فإنه يوفر لنا واجهة برمجة تطبيقات خاصة للتحقق من صحة النموذج.
• تتفاعل. مكتبة React Hook Form هي على الأرجح أكثر مدقق النماذج شيوعًا في مشاريع React .
• Vue. تم بناء اسم المكتبة المقابلة لـ Vue ، vuelidate ، على تورية مثيرة للاهتمام.

تجربة المستخدم

▍ استخدام آليات غير متزامنة

يمكن أن يستغرق تحميل البيانات في أحد التطبيقات أو حفظ البيانات مللي ثانية أو ثوانٍ أو حتى دقائق. لهذا السبب من المهم إبلاغ المستخدم بهذه العمليات باستخدام المؤشرات المناسبة وعدم منع عمل المستخدم مع المشروع. يمكن أن



تساعدنا محركات JavaScript مثل الوعود وواجهات برمجة تطبيقات المتصفح مثل Fetch في هذه المهام .

▍ دعم المتصفحات القديمة (polyfills)

يتطور عالم تطوير الواجهة الأمامية بسرعة كبيرة. يمكن قول الشيء نفسه بالنسبة للمتصفحات. لكن الأشخاص المختلفين يستخدمون متصفحات مختلفة وإصدارات مختلفة منها. لذلك ، للتأكد من أن الكود الخاص بهم يعمل بشكل صحيح على جميع الأنظمة الأساسية المستخدمة ، يحتاج المطور إلى الاهتمام بالتوافق. على سبيل المثال ، لا يدعم الإصدار الأقدم من IE نفس ميزات JS و CSS التي يدعمها أحدث إصدار من Google Chrome.



يتم استخدام Polyfills لضمان عمل المشروع بشكل صحيح في المتصفحات القديمة . تم وصفها جيدًا في هذه المقالة: "polyfill (polyfiller) هو جزء من التعليمات البرمجية (أو مكون إضافي) يوفر تنفيذًا لتقنية تتوقع أنت ، كمطور ، العثور عليها من بين إمكانات المتصفح القياسية."



لمعرفة ما إذا كانت قاعدة CSS معينة أو وظيفة JS معينة مدعومة في إصدار مستعرض معين ، ألق نظرة على موقع Can I Use .



إذا تحدثنا عن حل مشكلات دعم المتصفح في Angular و React و Vue ، فسيكون الموقف كما يلي:

• الزاوي. يوجد قسم خاص في توثيق Angular لدعم المتصفح.
• تتفاعل. المشاريع التي تم إنشاؤها باستخدام دعم إنشاء تطبيق React ، مثل ReactDOM ، المتصفحات التي تبدأ بـ IE 9. يعتمد هذا الدعم على استخدام polyfills.
• Vue. هنا ، تم وصف تفاصيل دعم المتصفحات القديمة في وثائق CLI.

▍ التوطين والتدويل

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



التعريب (l10n، localization) هو ، كما هو محدد من قبل W3C ، تكييف محتوى منتج أو برنامج أو وثيقة مع اللغة والمتطلبات الثقافية والمتطلبات الأخرى لسوق مستهدف محدد.



يعتمد التدويل (i18n ، التدويل) ، على مواد W3C ، على إنشاء وتطوير محتوى المنتج أو البرنامج أو الوثائق التي تسمح بسهولة توطين الأسواق المستهدفة التي تختلف في الثقافة أو المنطقة أو اللغة.



كلا المفهومين مترابطان ويمكن تنفيذهما بطرق مختلفة. يتضمن ذلك ، على سبيل المثال ، الأساليب التالية:

• استخدم القائمة المنسدلة على الموقع مع قائمة اللغات التي يدعمها المشروع.
• الوصول إلى معلومات حول الموقع الجغرافي للمستخدم (باستخدام واجهة برمجة تطبيقات متصفح الموقع الجغرافي ) وتكييف الموقع وفقًا للبيانات المستلمة.
• تحديد معلومات اللغة في عنوان URL. على سبيل المثال، قد تبدو مثل هذا: example.com?lang=enأو ما شابه ذلك: example.com/enأو حتى مع ذلك: en.example.com.

الآن حول هذه المفاهيم في Angular و React و Vue.

• الزاوي. Angular ، مرة أخرى ، هو إطار عمل كامل ، فهو يمنح المطور حلاً جاهزًا .
• تتفاعل. يمكن حل مهام تدويل المشاريع باستخدام مكتبة رد فعل i18next المشهورة في بيئة React .
• Vue. vue-i18n.

▍

إمكانية الوصول (a11y، accessibility) هي قدرة الموقع على التكيف مع احتياجات المستخدمين ذوي الإعاقة.



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



تقنيات مختلفة قابلة للتطبيق لجعل مشاريع الويب قابلة للوصول. وتشمل هذه ما يلي:

• استخدام سمة الصورة alt.
• استخدام سمات ARIA لتصميم أوصاف محتوى صفحات الموقع.
• دعم القدرة على تغيير حجم النص.
• يتوفر وضع التباين العالي.
• دعم التنقل في الموقع باستخدام لوحة المفاتيح ، ولا سيما المفاتيح ومفاتيح TABالأسهم.

يقوم مشروع a11yproject.com بتنفيذ فكرة توحيد هذه المفاهيم. هذه المبادرة جديرة بالاحترام! كما تبذل مكتبات وأطر عمل JS الرئيسية جهودًا لدعم تطوير المواقع التي يمكن الوصول إليها:

• الزاوي. يوجد قسم خاص في التوثيق لهذا الإطار . يتم دعم تطوير المشاريع التي يمكن الوصول إليها على مستوى Angular CDK .
• تتفاعل. تمت مناقشة إمكانية الوصول أيضًا في وثائق مكتبة React. توجد أيضًا مكتبة خاصة - رد فعل a11y . لكن هذه المكتبة لم تعد مدعومة ، لذا استخدمها بحذر وتذكر أنه من المخطط استبدالها بمكتبة رد الفعل .
• Vue. سيساعدك المكون الإضافي vue-a11y على تطوير مشاريع يمكن الوصول إليها في Vue . تم أخذ اعتبارات إمكانية الوصول في الاعتبار عند إنشاء مكتبة vuetify .

▍ الإخطارات

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

تحميل ومعالجة البيانات

▍ مصدر واحد للبيانات الموثوقة

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





تنفيذ NgRx لنمط التدفق (المصدر - ngrx.io )



تستخدم هذه الأدوات أسماء مختلفة لنفس الكيانات. على سبيل المثال ، ما يطلق عليه NgRx محددات يسمى Getters في Vuex. ما يطلق عليه Angular مخفضات يسمى الطفرات في Vue.



فيما يلي أدوات إدارة الحالة المستخدمة في Angular و React و Vue:

• الزاوي. "إدارة الحالة التفاعلية لـ Angular": NgRx .
• تتفاعل. هنا ، بالطبع ، يتم استخدام Redux .
• Vue. يستخدم Vuex لإدارة حالة تطبيقات Vue .

▍تنزيل البيانات

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

• الزاوي. توصي وثائق Angular باستخدام rxjs والنهج القائم على المراقب (يتم استخدام العناصر المرئية أو الموضوعات هنا).
• تتفاعل. توصي وثائق React باستخدام Fetch API لتحميل البيانات.
• Vue. يفضل مجتمع Vue استخدام مكتبة Axios . يعتمد تنفيذ آلية تحميل البيانات على الوعود.

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



فيما يلي تطبيقات GraphQL لأدوات الواجهة الأمامية التي نهتم بها:

• الزاوي. أبولو الزاوي
• تتفاعل. رد فعل أبولو
• Vue.js. vue-apollo

▍ تخزين البيانات المحلية

تخزين البيانات المحلية هو تخزين البيانات على كمبيوتر المستخدم. يمكن تخزين البيانات باستخدام ملفات تعريف الارتباط ، وكذلك باستخدام localStorage و sessionStorage.

▍ عمال الويب

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



يمكن تطبيق العاملين على الويب في Angular و React و Vue:

• الزاوي. يوجد قسم خاص في توثيق Angular لهذا الموضوع.
• تتفاعل. يوجد خطاف React خاص يمكن العثور عليه هنا .
• Vue. في تطبيقات Vue ، يكون العاملون على الويب مناسبين للاستخدام باستخدام مكتبة vue-worker .

التواصل والأداء

▍ حجم حزمة التطبيق

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





استخدام الإنترنت في جميع أنحاء العالم (المصدر - broadbandsearch.net )



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

• الزاوي. تعتبر حزم التطبيقات الزاويّة سهلة ومريحة للفحص باستخدام أداة تحليل حزمة الويب . علاوة على ذلك ، يمنحنا Angular CLI خيارًا stats-jsonيتيح لنا إنشاء تقرير بعد إنشاء حزمة.
• React. Create React App , .
• Vue. Vue, Angular, report, .

▍- -

عامل الخدمة هو برنامج نصي يتم تشغيله في مستعرض ويب ويدير التخزين المؤقت لبيانات التطبيق. هذه إحدى الآليات المستخدمة لتحويل موقع ويب عادي إلى تطبيق ويب تقدمي (PWA). يمكنك العمل مع PWAs مثل موقع ويب عادي باستخدام HTTPS ، لكن تطبيقات الويب التقدمية لها بعض الميزات الخاصة. وتشمل هذه الإمكانيات ، على سبيل المثال ، تثبيت مثل هذه التطبيقات على الأجهزة المحمولة دون الحاجة إلى نشرها في متاجر التطبيقات المتخصصة ودعم تشغيل التطبيقات دون الوصول إلى الإنترنت.



يمكنك استخدام عمال الخدمة في Angular و React و Vue:

• الزاوي. يوفر Angular آليات لاستخدام عمال الخدمة.
• تتفاعل. إليك برنامج تعليمي حول كيفية تطوير PWA باستخدام تطبيق Create React.
• Vue. هو القدرة على إنشاء برنامج المساعدة العامة في فيو دعم على مستوى CLI.

▍ تقديم الخادم

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

• تحسين مواقع SEO.
• تسريع عرض المواقع في المتصفح.

فيما يلي حلول SSR لأدوات الواجهة الأمامية التي نبحث عنها:

• الزاوي. هناك تستخدم Angular Universal .
• تتفاعل. للتقديم من جانب الخادم من رد فعل التطبيقات، Next.js يستخدم .
• Vue. الخادم - يتم تنفيذ العرض الجانبي لتطبيقات Vue باستخدام إطار عمل NuxtJS .

مولدات الموقع الثابت

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

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

توجد حلول SSG لـ Angular و React و Vue:

• الزاوي. سكالي .
• تتفاعل. غاتسبي (رد فعل GraphQL +)، Next.js .
• Vue. Gridsome ، Nuxt .

تشمل مشاريع SSG الأخرى ما يلي: 11ty ، Hugo ، Jekyll .

تحليلات

▍ مراقبة سلوك المستخدم واختبار أ / ب

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



فيما يلي بعض الحلول لمراقبة سلوك المستخدم واختبار أ / ب:

• تحليلات جوجل (GA). توجد أدلة لاستخدام GA في Angular و React و Vue .
• Kameleoon. — A/B- -.

▍ -

من الصعب تطوير تطبيق ويب عالي الأداء دفعة واحدة. ولكن ، على سبيل المثال ، التطبيق الذي تم تحسينه لتسريع تحميله سوف يولد مشاعر إيجابية من المستخدم أكثر من نسخته الأبطأ. هناك العديد من المشاريع التي تحلل المواقع وتقدم توصيات لتحسينها. على سبيل المثال - PageSpeed ​​Insights من Google.



من بين أدوات مطوري Google Chrome ، يمكنك العثور على أداة قيمة للغاية لتحليل أداء الموقع - Lighthouse . يقوم بتقييم المواقع وفقًا لخمسة معايير (الأداء ، إمكانية الوصول ، أفضل الممارسات ، تحسين محركات البحث ، PWA) باستخدام مقياس من 100 نقطة. بعد التحليل ، يتم إنشاء تقرير يتضمن توصيات لتحسين الموقع.





تحليل موقع باستخدام Lighthouse



محلل أداء آخر يمكنك العثور عليه من بين أدوات مطور Chrome هو لوحة Coverage ، والتي تتيح لك البحث عن كود JS و CSS غير المستخدم. باستبعاد هذا الرمز من المشروع ، يمكنك تقليل حجم الحزمة الخاصة به. سيؤدي ذلك إلى تسريع تحميل الموقع ، والذي سيكون ملحوظًا بشكل خاص على الأجهزة المحمولة.

▍ SEO

SEO ، تحسين محرك البحث ، هو ما تحتاج إلى القيام به لزيادة ترتيب الموقع في محركات البحث ، مثل Google و Bing و DuckDuckGo وغيرها الكثير. يصبح الموقع المُحسَّن جيدًا أكثر وضوحًا. في الواقع ، من المهم جدًا أن يكون هناك وضع خاص في عالم تطوير الويب: "أخصائي تحسين محركات البحث".



إذا تحدثنا عن تحسين محركات البحث في Angular و React و Vue ، فسنحصل على ما يلي:

• Angular. , Angular- Angular Universal-.
• React. SEO React-. — React-.
• Vue. Vue-.

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



ما هي تقنيات التطوير الأمامية الجديدة التي تجدها واعدة أكثر؟