الأخبار التكنولوجية والاستعراضات والنصائح!

3 أفضل أطر عمل / مكتبات جافا سكريبت لتطوير الواجهة الأمامية

أصبحت JavaScript شائعة بشكل متزايد على مر السنين ، وينمو المجتمع بسرعة ، ويعمل المطورون باستمرار على تطوير وبناء أدوات للغة على أساس يومي.

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

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

تتفاعل

React ليس إطار عمل ولكنه مكتبة JavaScript لبناء واجهات المستخدم.

إنه مفتوح المصدر ويتم صيانته بواسطة Facebook ومجموعة من المطورين الأفراد. تمت كتابة React في الأصل بواسطة Jordan Walke كأداة داخلية Facebook. تم فتحه لاحقًا وإصداره للجمهور في عام 2013 ، واكتسب نطاقًا واسعًا من الشعبية منذ ذلك الحين.

تتضمن بعض الميزات ما يلي.

  • يوفر مكونات تفاعلية وقابلة للتخصيص وقابلة لإعادة الاستخدام
  • يستخدم DOM الظاهري
  • سريع جدا
  • مكون
  • ربط البيانات أحادي الاتجاه
  • إعادة استخدام الكود
  • لديها نظام بيئي حي ومزدهر وراءها
  • معالجة مريحة لإدارة الدولة
  • التثبيت / الاستخدام

    يمكن استخدام React على الواجهة الأمامية بطريقتين مختلفتين.

    أكثر من CDN

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

    على سبيل المثال ، إذا كنت تستخدم في بيئة تطوير ، فعندئذٍ:


    وللإنتاج


    باستخدام Node.JS

    أفترض أنك قمت بالفعل بتثبيت NodeJS. لتثبيت React ، ما عليك سوى كتابة الأمر التالي.

    sudo npm i -g create-response-app-save-dev

    عند اكتمال التثبيت ، اكتب الأمر التالي

    إنشاء-رد-تطبيق-تطبيق-أول-رد فعل-تطبيق

    سيقوم الأمر أعلاه بتثبيت جميع المكتبات الضرورية اللازمة لكي تعمل React بشكل صحيح ، والتي تتضمن خادم تطوير و webpack و babel.

    انتقل إلى مجلد my-first-response-application وقم بتشغيل الأمر التالي

    بدء npm

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

    تكتسب React شعبية وطلبًا من قبل عدد من المؤسسات الكبيرة. إذا كنت مهتمًا بالتعلم ، فإنني أوصي بأخذ هذه الدورة التدريبية الكاملة.

    Vue.js

    3 أفضل أطر عمل / مكتبات جافا سكريبت لتطوير الواجهة الأمامية 1

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

    Vue.js هو مصدر مفتوح وقد تم إنشاؤه في الأصل بواسطة Evan du وتم إصداره للجمهور في فبراير 2014. فيما يلي بعض الميزات.

  • يوفر مكونات عرض تفاعلية وقابلة للتكوين.
  • يستخدم DOM الظاهري
  • يحافظ على التركيز على المكتبة الأساسية (أي التوجيه وإدارة الحالة)
  • يتم التعامل مع تحديد النطاق في CSS بدون CSS-In-Js
  • ربط أحادي الاتجاه داخل المكونات.
  • دعم ملحقات مهمة
  • إعادة استخدام الكود
  • التثبيت / الاستخدام

    يمكنك استخدام Vue.js على الواجهة الأمامية إما عبر CDN أو مع Node.js

    لاستخدام طريقة CDN ، يمكنك إضافة البرنامج النصي التالي إلى قسم رأس HTML الخاص بك.

    البرنامج النصي أعلاه مناسب لأغراض التطوير لأنه يحتوي على رسالة وحدة تحكم مهمة. ولكن للإنتاج يجب أن تستخدم أدناه.

    وللاستخدام مع Nodejs ، يمكنك تثبيته باستخدام الأمر npm.

    npm install vue

    أوصي بشدة بقراءة وثائق Vue JS الرسمية لمعرفة المزيد أو التفكير في السير في هذا الطريق.

    زاوية

    3 أفضل أطر عمل / مكتبات جافا سكريبت لتطوير الواجهة الأمامية 2

    Angular هو إطار عمل JavaScript هيكلي للصفحات الديناميكية. يسمح باستخدام HTML كلغة نموذجية ويسمح باستخدام بناء جملة HTML للتعبير عن مكونات التطبيق بوضوح ودقة. إنه مشروع مفتوح المصدر تحتفظ به Google ومساهمون آخرون.

    تثبيت

    تأكد من تثبيت أحدث إصدار من Nodejs. أول شيء نحتاج إلى تثبيته هو أداة Angular CLI.

    تثبيت npm -g @ angular / cli

    بمجرد التثبيت ، يمكننا إنشاء مشروع جديد باستخدام الأمر التالي.

    ng الجديد my-first-angular-app

    اتبع الإرشادات التي تظهر على الشاشة. يؤدي هذا إلى إنشاء بعض الملفات والمجلدات ويستخدم الوحدة النمطية npm لتنزيل مكتبات الجهات الخارجية اللازمة لكي يعمل Angular بشكل صحيح.

    لبدء تشغيل التطبيق الذي تم إنشاؤه حديثًا ، قم بتشغيل الأمر التالي من مجلد التطبيق.

    ng الخادم

    يجب أن يبدأ هذا الخادم تلقائيًا على المنفذ 4200.

    [[email protected] my-first-angular-app]# ng يخدم 10٪ بناء 3/3 وحدات 0 activeℹ 「wds」: المشروع يعمل على http: // localhost: 4200 / webpack-dev-server / ℹ 「wds」: إخراج حزمة الويب هو يتم تقديمه من / ℹ 「wds」: 404s سيعود إلى //index.html chunk {main} main.js، main.js.map (main) 47.8 kB [initial] [rendered]

    chunk {polyfills} polyfills.js، polyfills.js.map (polyfills) 264 KB [initial] [rendered]

    chunk {runtime} runtime.js، runtime.js.map (وقت التشغيل) 6.15 كيلو بايت [entry] [rendered]

    chunk {styles} styles.js، styles.js.map (styles) 10 كيلوبايت [initial] [rendered]

    chunk {vendor} vendor.js، vendor.js.map (vendor) 3.81 ميغابايت [initial] [rendered]

    التاريخ: 2019-12-28T12: 08: 20.138Z – Hash: 5d4b93c7bf9e61979c4d – الوقت: 12864ms ** يستمع Angular Live Development Server على المضيف المحلي: 4200 ، افتح المتصفح على http: // localhost: 4200 / ** ℹ 「wdm 」: تم تجميعه بنجاح.

    استنتاج

    لذا فإن ما تختار تعلمه هو تفضيل شخصي أكثر من “أيهما أفضل”.

    جميع الأطر / المكتبات المذكورة أعلاه رائعة. وفيما يلي ملخص مقتضب؛

  • يجب أن تتعلم Angular إذا كنت تريد إطار عمل تريد الوثوق به دون الحاجة إلى التعامل مع التبعيات الخارجية.
  • يجب أن تتعلم React إذا كنت ترغب في إنشاء تطبيق PWA ذي صفحة واحدة سريعًا وأنت مرتاح مع JSX.
  • تمتلك React المجتمع الأكثر حيوية والمزيد من فرص العمل بفضل مجتمعها الكبير.
  • من السهل نسبيًا البدء باستخدام React.
  • React قابل للتخصيص بدرجة كبيرة ويتعامل مع كل جزء من واجهة المستخدم كمكون.
  • تتمتع Vue بنفس مزايا React ولكن بدون JSX.
  • يتزايد سوق العمل في Vue باستمرار.
  • فيما يلي رسم بياني في Google Trends يعرض مقارنة بين تصنيفات الشعبية لثلاثة منهم.

    3 أفضل أطر عمل / مكتبات جافا سكريبت لتطوير الواجهة الأمامية 3

    إذا كان تطوير الواجهة الأمامية هو اهتمامك ، فراجع دورة Udemy هذه.