مقدمة
سواء كنت جديدًا في البرمجة أو مطورًا متمرسًا بالفعل ، في هذه الصناعة ، يعد تعلم مفاهيم ولغات / أطر عمل جديدة أمرًا ضروريًا لمواكبة الاتجاهات.
خذ على سبيل المثال ، React ، التي كانت مفتوحة المصدر فقط بواسطة Facebook منذ أربع سنوات وأصبحت بالفعل الخيار الأول لمطوري JavaScript في جميع أنحاء العالم.
تتمتع Vue و Angular ، بالطبع ، بقاعدة معجبين شرعية. ثم هناك Svelte وأطر أخرى للأغراض العامة مثل Next.js أو Nuxt.js. وجاتسبي ، وجريدسوم ، وكوازار ... وأكثر من ذلك بكثير.
إذا كنت ترغب في إثبات نفسك كمطور جافا سكريبت متمرس ، فيجب أن يكون لديك على الأقل بعض الخبرة مع العديد من أطر العمل والمكتبات - بالإضافة إلى القيام بأعمال JS القديمة الجيدة.
لمساعدتك في أن تصبح خبيرًا في الواجهة الأمامية في عام 2020 ، قمت بتجميع تسعة مشاريع مختلفة ، يركز كل منها على أطر عمل ومكتبات JavaScript مختلفة كمكدس تقني يمكنك إنشاؤه وإضافته إلى محفظتك. تذكر أنه لا يوجد شيء يساعدك أكثر من وضع الأشياء موضع التنفيذ ، لذا انطلق وقم بتشغيل عقلك واجعله ممكنًا.
تمت ترجمة المقال بدعم من EDISON Software ، والتي و .
تطبيق البحث عن الأفلام مع React (مع خطافات)
أول شيء يمكنك البدء به هو إنشاء تطبيق بحث عن الأفلام باستخدام React. فيما يلي صورة لما سيبدو عليه التطبيق النهائي:
ما سوف تتعلم
من خلال بناء هذا التطبيق ، ستحسن مهاراتك في React باستخدام Hooks API الجديدة نسبيًا. يستخدم نموذج المشروع مكونات React ، والكثير من الخطافات ، وواجهة برمجة تطبيقات خارجية ، وبالطبع بعض أنماط CSS.
كومة التقنية والميزات
- تفاعل مع الخطافات
- إنشاء رد فعل التطبيق
- شبيبة
- CSS
بدون استخدام أي فئات ، تمنحك هذه المشاريع نقطة دخول مثالية إلى React الوظيفية وستساعدك بالتأكيد في عام 2020. باستطاعتك العثور . اتبع التعليمات أو اجعلها خاصة بك.
تطبيق الدردشة مع Vue
مشروع آخر رائع بالنسبة لك هو إنشاء تطبيق دردشة باستخدام مكتبة JavaScript المفضلة لدي: VueJS. سيبدو التطبيق كما يلي:
ما سوف تتعلم
في هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء تطبيق Vue من البداية - إنشاء المكونات ، والتعامل مع الحالات ، وإنشاء المسارات ، والاتصال بخدمات الجهات الخارجية ، وحتى التعامل مع المصادقة.
كومة التقنية والميزات
- رأي
- فويكس
- جهاز التوجيه Vue
- عرض CLI
- تاجر مخدرات
- CSS
يعد هذا مشروعًا رائعًا حقًا للبدء في Vue أو تحسين مهاراتك الحالية لبدء التطوير في عام 2020. باستطاعتك العثور .
تطبيق طقس جميل مع Angular 8
سيساعدك هذا المثال في إنشاء تطبيق طقس جميل باستخدام Angular 8:
ما سوف تتعلم
سيعلمك هذا المشروع مهارات قيمة في بناء التطبيقات من البداية - من التصميم إلى التطوير ، وصولاً إلى التطبيق الجاهز للنشر.
كومة التقنية والميزات
- الزاوي 8
- Firebase
- التقديم من جانب الخادم
- CSS مع الشبكة و Flexbox
- ودية المحمول والقدرة على التكيف
- وضع الظلام
- واجهة جميلة
ما أحبه حقًا في هذا المشروع الشامل هو أنك لا تدرس الأشياء بمعزل عن غيرها. بدلاً من ذلك ، ستتعلم عملية التطوير بأكملها من التصميم إلى النشر النهائي.
تطبيق To-Do مع Svelte
يشبه Svelte الطفل الجديد في نهج المكون - على الأقل يشبه React و Vue و Angular. وهذا أحد أهم المنتجات الجديدة لعام 2020.
تطبيقات To-Do ليست بالضرورة الموضوع الأكثر سخونة ، لكنها ستساعدك حقًا على صقل مهاراتك في Svelte. سيبدو مثل هذا:
ما سوف تتعلم
سيوضح لك هذا البرنامج التعليمي كيفية إنشاء تطبيق باستخدام Svelte 3 ، من البداية إلى النهاية. سوف تستخدم المكونات والتصميم ومعالجات الأحداث
كومة التقنية والميزات
- سفلي 3
- مكونات
- التصميم باستخدام CSS
- بناء الجملة ES6
ليس هناك الكثير من مشاريع بداية Svelte الجيدة ، لذلك وجدت .
تطبيق التجارة الإلكترونية مع Next.js
Next.js هو الإطار الأكثر شيوعًا لبناء تطبيقات React التي تدعم العرض من جانب الخادم خارج الصندوق.
سيوضح لك هذا المشروع كيفية إنشاء تطبيق للتجارة الإلكترونية يشبه هذا:
ما سوف تتعلم
في هذا المشروع ، ستتعلم كيفية التطوير باستخدام Next.js - إنشاء صفحات ومكونات جديدة واسترداد البيانات والنمط ونشر تطبيق Next.
كومة التقنية والميزات
- Next.js
- المكونات والصفحات
- أخذ عينات البيانات
- أسلوب
- نشر المشروع
- SSR و SPA
من الرائع دائمًا أن يكون لديك مثال واقعي مثل تطبيق التجارة الإلكترونية لتعلم شيء جديد. أنت تستطيع .
مدونة متعددة اللغات كاملة مع Nuxt.js
Nuxt.js مخصص لـ Vue ، مثل Next.js لـ React: إطار عمل رائع للجمع بين العرض من جانب الخادم والتطبيقات أحادية الصفحة
سيبدو آخر تطبيق يمكنك إنشاؤه على النحو التالي:
ما سوف تتعلم
في نموذج المشروع هذا ، ستتعلم كيفية إنشاء موقع ويب كامل باستخدام Nuxt.js ، من الإعداد الأولي إلى النشر النهائي.
يستفيد من العديد من الميزات الرائعة التي تقدمها Nuxt ، مثل الصفحات والمكونات ، والتصميم باستخدام SCSS.
كومة التقنية والميزات
- Nuxt.js
- المكونات والصفحات
- وحدة ستوريبلوك
- الخلطات
- Vuex لإدارة الدولة
- SCSS للتصميم
- البرمجيات الوسيطة Nuxt
، والذي يتضمن العديد من الميزات الرائعة لـ Nuxt.js. أنا شخصياً أحب العمل مع Nuxt ، لذا يجب أن تجربها لأنها ستجعلك أيضًا مطور Vue رائعًا.
مدونة مع غاتسبي
Gatsby هو مولد موقع ثابت رائع باستخدام React و GraphQL. هذه نتيجة المشروع:
ما سوف تتعلم
في هذا البرنامج التعليمي ، ستتعلم كيفية استخدام Gatsby لإنشاء مدونة ستستخدمها لكتابة مقالاتك الخاصة باستخدام React و GraphQL.
كومة التقنية والميزات
- غاتسبي
- رد فعل
- GraphQL
- الإضافات والسمات
- MDX / Markdown
- بوتستراب CSS
- قوالب
إذا أردت يومًا أن تبدأ مدونة ، كيفية صنعه باستخدام React و GraphQL.
أنا لا أقول أن WordPress هو خيار سيء ، ولكن مع Gatsby يمكنك إنشاء مواقع ويب عالية الأداء باستخدام React - وهو مزيج رائع.
مدونة مع Gridsome
Gridsome for Vue… حسنًا ، لقد حصلنا على ذلك بالفعل مع Next / Nuxt.
لكن الشيء نفسه ينطبق على Gridsome و Gatsby. كلاهما يستخدم GraphQL كطبقة بيانات ، لكن Gridsome تستخدم VueJS. إنه أيضًا منشئ مواقع ثابت رائع لمساعدتك في إنشاء مدونات رائعة:
ما سوف تتعلم
سيعلمك هذا المشروع كيفية إنشاء مدونة بسيطة لبدء استخدام Gridsome و GraphQL و Markdown. يشرح أيضًا كيفية نشر تطبيق من خلال Netlify.
كومة التقنية والميزات
- شبكي
- رأي
- GraphQL
- تخفيض السعر
- Netlify
هذا بالتأكيد ليس البرنامج التعليمي الأكثر اكتمالا ، لكنه يغطي المفاهيم الأساسية لـ Gridsome و .
مشغل صوت مشابه لـ SoundCloud باستخدام Quasar
Quasar هو إطار عمل Vue آخر يمكن استخدامه لبناء تطبيقات الأجهزة المحمولة. في هذا المشروع ، ستقوم بإنشاء تطبيق مشغل صوت مثل:
ما سوف تتعلم
بينما تركز المشاريع الأخرى في الغالب على تطبيقات الويب ، سيوضح لك هذا المشروع كيفية إنشاء تطبيق جوال باستخدام Vue وإطار عمل Quasar.
يجب أن يكون لديك بالفعل كوردوفا يعمل مع إعداد Android Studio / Xcode. إذا لم يكن الأمر كذلك ، فإن الدليل يحتوي على رابط إلى موقع Quasar على الويب حيث يوضحون لك كيفية إعداد كل شيء.
كومة التقنية والميزات
- الكوازار
- رأي
- قرطبة
- أمواج
- مكونات واجهة المستخدم
، مما يدل على قدرات Quasar لبناء تطبيقات الهاتف المحمول.
المصدر: www.habr.com