أصبحت JavaScript شائعة بشكل متزايد على مر السنين ، وينمو المجتمع بسرعة ، ويعمل المطورون باستمرار على تطوير وبناء أدوات للغة على أساس يومي.
هذا يجعل الأمر مربكًا عندما يتعلق الأمر بتحديد الأداة / إطار العمل / المكتبة التي يجب استخدامها لمهمة معينة لأن هناك دائمًا خيارات متعددة لأي شيء تريد القيام به في JavaScript. في البداية ، لا يزال من الصعب تحديد أي مكتبة أو إطار عمل للتعلم.
تركز هذه المقالة على إزالة الغموض عن فائدة استخدام أطر عمل / مكتبات متعددة للواجهة الأمامية لجافا سكريبت وتقدم في النهاية صورة أوضح عنها. الغرض منه هو جعل عملية اتخاذ القرار لاختيار واحد أسهل.
تتفاعل
React ليس إطار عمل ولكنه مكتبة JavaScript لبناء واجهات المستخدم.
إنه مفتوح المصدر ويتم صيانته بواسطة Facebook ومجموعة من المطورين الأفراد. تمت كتابة React في الأصل بواسطة Jordan Walke كأداة داخلية Facebook. تم فتحه لاحقًا وإصداره للجمهور في عام 2013 ، واكتسب نطاقًا واسعًا من الشعبية منذ ذلك الحين.
تتضمن بعض الميزات ما يلي.
التثبيت / الاستخدام
يمكن استخدام 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
Vue.js هو إطار عمل JavaScript تقدمي لبناء واجهات مستخدم تفاعلية وتطبيقات من صفحة واحدة. إنه إطار عرض نموذجي مع المكتبة الأساسية ، مع التركيز على طبقة العرض. تحظى Vue بشعبية نظرًا لقدرتها على تشغيل تطبيقات صفحة واحدة. على عكس React ، يستخدم Vue HTML خام وليس JSX.
Vue.js هو مصدر مفتوح وقد تم إنشاؤه في الأصل بواسطة Evan du وتم إصداره للجمهور في فبراير 2014. فيما يلي بعض الميزات.
التثبيت / الاستخدام
يمكنك استخدام Vue.js على الواجهة الأمامية إما عبر CDN أو مع Node.js
لاستخدام طريقة CDN ، يمكنك إضافة البرنامج النصي التالي إلى قسم رأس HTML الخاص بك.
البرنامج النصي أعلاه مناسب لأغراض التطوير لأنه يحتوي على رسالة وحدة تحكم مهمة. ولكن للإنتاج يجب أن تستخدم أدناه.
وللاستخدام مع Nodejs ، يمكنك تثبيته باستخدام الأمر npm.
npm install vue
أوصي بشدة بقراءة وثائق Vue JS الرسمية لمعرفة المزيد أو التفكير في السير في هذا الطريق.
زاوية
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 」: تم تجميعه بنجاح.
استنتاج
لذا فإن ما تختار تعلمه هو تفضيل شخصي أكثر من “أيهما أفضل”.
جميع الأطر / المكتبات المذكورة أعلاه رائعة. وفيما يلي ملخص مقتضب؛
فيما يلي رسم بياني في Google Trends يعرض مقارنة بين تصنيفات الشعبية لثلاثة منهم.
إذا كان تطوير الواجهة الأمامية هو اهتمامك ، فراجع دورة Udemy هذه.