Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

أدوات وبيئات عمل للجافا سكرت يجب ان تعرفها

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Ali Atwa (you can also view the original English article)

استمرت جافا سكريبت لنحو 20 عاما ولا زالت واحده من تلك اللغات التي لا تتوقف عن التطور. النمو السريع للغة مؤخرا يجعلني أتساءل عما إذا كانت تكنولوجيات الجافا سكربت الحديثة الأمامية التي باتت معروفة اليوم ستكون ذات أهمية خلال السنوات القادمه

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

مقدمة

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

بما يزيد عن 350,000 حزمه برمجيه، يحتوي npm ضعف ما يحتويه مخزن أباتشي. وفي الواقع، هو حاليا مخزن الحزم البرمجيه أكبر في العالم.

بمرور ثمانية أشهر ، هناك حاليا حولي 500,000 حزمه برمجيه  وهذا النمو الهائل لا يقارن بمستودعات حزم أخرى.

A comparison of different package registries based on number of modules
المصدر: ModuleCounts.com

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

المكتبات

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

يمكنك استدعاء وظيفه برمجيه وتمرير بعض الاوامر، وستقوم المكتبة باعطاء البيانات الناتجه لك ومع ذلك، فإنها لا تضع اي قيود هيكلية تحد من طريقه استخدامها. اشهر المكتبات البرمجيه لـjavascript:

React

React هي مكتبه بنيت على الجافا سكربت بواسطه مطورين من فيسبوك وانستجرام. صنفت React على انها احب مكتبه للمطورين وفقا لدراسة استقصائية لعام 2017 من موقع Stack Overflow React ايضا من اشهر المكتبات على موقع GitHub وفقا لعدد النجوم المعطاه.

اذا لماذا حظيت React على كل هذا الاهتمام؟ React من خلالها يمكنك انشاء واجهة مستخدم تفاعليه باستخدام طرق بسيطه حيث يمكنك التحكم في حالة التطبيق كان تقول "يجب تغير الصفحه بهذه الطريقه". تستخدم React الى نموذج يستند مكونات حيث يمكن استخدامها كعناصر واجهة المستخدم قابلة لإعادة الاستخدام وكل مكون له حالته الخاصة به.

React a JavaScript library for building interactive views

تستخدم React "مكونات افتراضيه" لذلك لست مضطر للتعامل مباشرة من اجزاء html. تتضمن السمات البارزة الأخرى تتضمن ارسال بيانات أحادية الاتجاه و JSX و CLI لتكوين مشروع React من الصفر.

اذا كنت تؤمن بان مستقبل React قادم فالقي نظره على كورس React للمبتددئين

jQuery

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

jQuery library for DOM manipulation using JavaScript

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

D3: Data-Driven Documents

D3 (أو D3.js) عباره عن مكتبة جافا سكريبت قوية لإنتاج تصورات التفاعلية باستخدام معايير الويب مثل SVG و HTML و CSS. خلافا لغيرها من المكتبات التصور، يقدم D3 نتيجه أفضل للعناصر المرئيه.

D3 يعمل عن طريق ربط البيانات إلى بعناصر html ومن ثم عرضها في الصفحه. كما أن النظام متكامل، فهو يتألف من اضافات ومكتبات التي توسع وظائفه الأساسية. طرحت المكتبة منذ حوالي عام 2011، ولديها العديد من الشروحات والدروس التي يمكن أن تساعدك على البدء.

D3 interactive visualization for the web

إذا كنت تريد عمل رسومات بيانيه بسيطة دون استثمار الكثير من الوقت في ذلك، القي نظره على Chart.js. لدينا سلسلة تمهيدية على Chart.js التي تغطي معظم المرئيات التي يمكنك إنشاءها بواسطه Chart.js

الأطر

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

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

Angular

AngularJS كانت من اشهر الاطر المعتمده على الجافاسكربت بين المطوريين. طرحت بواسطه جوجل وبعض المنظمات والافراد. بالرغم من شرتها، الا انها كانت بها بعض العيوب. قام فريق المطوريين خلال سنتين باصدار نسخه جديده، حتى طرحت النسخه النهائيه في سبتمير 2017.

Angular framework for mobile and desktop

طرحت Angular من اعادة كنابتها من AngularJS. بعض من ميزات 2 Angular  يتضمن ما يلي:

  • TypeScript بينيت من الاساس على JavaScript كلغة رئيسيه
  • تعتمد على المكونات في برمجتها
  • اداء ممتاز على كلا من منصات الويب واجهزة المحمول
  • توفر الادوات اللازمه وامكانيه التحكم بعناصرها على حدى

مع ذلك الترقيه من Angular 1.x الى Angular 2 مختلف تماما وهو واحد من الاسباب ان Angular 2 لم تحظى بنفس الاهتمام من مستخدميها السابقين  لكن يبقى كلا من Angular  و AngularJS اشهر الاطر المستخدمه وفقا ل (Stack Overflow (2017. فعلى موقع GitHub حظيت على 28,000 نجمه.

Vue.js

Vue.js من الاطر الصغيره المبنيه على JavaScript التى اشتهرت هذا العام. من اشهر الاطر على موقع GitHub  وفقا لعدد النجوم. Vue من الاطر البسيطه في التكوين وسهله على المطورين. Vue تعتمد على القوالب للتعامل من عناصر HTML وربطها بالبيانات.

Vuejs The progressive JavaScript framework

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

Ember.js

Ember.js هو اطار يعتمد نمط Model-View-ViewModel. وتتبع مفهوم Convention over configuration لتبسيط البرمجه على المطوريين كما بيئة عمل في Ruby on Rails و Laravel Ember.js يدمج التعبيرات الشائعة في الإطار حتى أنه يمكنك عمل أحد التطبيقات وتشغيلها دون بذل الكثير من الجهد.

Emberjs a framwork for creating ambitious web apps

Ember تضم عادة:

  • Ember CLI: تصم الخيارات والاوامر الاساسية وتضم العديد من الاضافات
  • Ember Data: مكتبه تضم البيانات اللازمه لستخدامها في ضبط اعدادات الخادم
  • Ember Inspector: اضافه متاحه للكروم وفايرفوكس
  • Liquid Fire: اضافه لعمل التاثيرات الحركيه والرسوميه.

الادوات

أداة هي عبارة عن مجموعة من الاوامر التي تساعدك في عملية التطوير. وخلافا للمكتبة، تنفذ الأداة عادة مهمه معينه على جهاز المطور. تأخذ التعليمات البرمجية الخاصة بك كمدخل، وتقوم بتنفيذ مهمة عليها، ومن ثم إرجاع نتائج. الأدوات المستخدمة عادة تشمل  transpilers و build tools و asset minifiers و module bundlers و scaffolding tools.

أدوات: لتنفيذ مهام عامه

ادوات الاغراض العامه هي الأدوات التي تستخدم لأتمتة بعض المهام المتكررة وتشمل:

Gulp

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

Gulp يستخدم pipelines لارسال البيانات من الاداة الى البرنامج المساعد، والنتيجة النهائية ترسل الى مجلد العمل. Gulp أدائها أفضل بالمقارنة مع Grunt لأنها لا تنشئ ملفات مؤقتة لتخزين النتائج، مما يقل من المخرجات والمدخلات.

Automate and enhance your workflow using Gulp

Grunt

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

Grunt the JavaScript task runner

npm

Gulp وGrunt كلامها تحتاج بعض الوقت لتعلمها. الا انه احيانا يحتاج المشروع بعض الحزم التي تريد اضافتها لمشروع Node.js. بالرغم من ان npm اداة لاضافه الحزم البرمجيه. الا انها يمكنها ان تقوم بعمل بعض المهمام المذكوره سلفا.

npm task runner

ادوات: الاختبار

الاختبار عمليه للتحقق من صلاحيه التطبيق بالنسبه للناحيه التقنيه و العمليه المطلوبه. كما انها تساعد تساعد في اكتشاف الثغرات و الخلل لذلك تعتبر عمليه ضرويه في التطوير.

Jest

Jest هي اطار اختباري مطوره من قبل الفيسبوك و مستخدمه من قبل مطورين React. يوجد سوء فهم ان Jest طورت خصيصا لـReact، على الرغم انه وفقا للموقع الرسمي:

على الرغم من ان Jest ربما تعتبر اداة لاختبار React الاانها انها منصه عامه للاختبار، حيث انها قابله للعمل مع اي مكتبة او اطار جافاسكربت بشكل عام.

افضل ما يميز الاداة انها لا تحتاج اعدادت لعمل الاختبار. الاطار مبني على المكتبات التاكيديه وتدعم كلا من وظائف mock و spies.

Delightful JavaScript testing using Jest

لدى Jest ميزه تسمى snapshot تجعلك تختبر واجهه التطبيق ما اذا كانت تتغير بشكل غير متوقع. مطورين فيسبوك والمشاركين يجرون العديد من التحديثات لذلك ليس من العجيب ان تصبح الاداه الاكثر استخداما.

Mocha

Mocha منصه اختباريه مبناه على الجافا سكربت تدعم المنصفح والدعم التزامني و عمل التقارير الاختباريه واختبار API. عاده ما تكون مصحوبه بمكتبات مساعده مثل Chai  و should.js و expect.js حيث انها لا تضمن اي مكتبات.

Mocha test runner and testing framework

Jasmine

Jasmine منصه اختباريه مبناه على الجافا سكربت، تهدفJasmine الى ان تكون منصه و اطار اختباري مستقل. Jasmine لديها مكتبتها الخاصه لبناء تراكيب برمجيه بسيطه. لا تجري Jasmine الاختبار بمفردها لذلك يجب اسخدام اداه مساعده مثل Karma.

Jasmine test runner and testing framework

الخلاصه

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

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

تتطور بيئة جافا سكريبت بالتأكيد، مما يتضح من الاتجاهات الحالية في تطوير الويب. ان المكتبات وأطر العمل القديمه تغيرت مع التكنولوجيات الجديدة. jQuery، كانت افضل مكتبة جافا سكريبت، تشهد تراجعا ملحوظا في الاستخدام، والشعبية. الجيل الجديد من المكتبات الأمامية، الأطر والأدوات الحديثة تشهد قبولا و استخداما ملحوظا.

التكيف مع  التكنولوجيات الحديثة له فوائد أيضا. فهي توفر العديد من الوظائف مثل React، فمتوسط  الرواتب في هذه الصناعة، حوالي 105,000$ في الولايات المتحدة وفقا لـ "Stack Overflow 2016". لذا تحتاج إلى مواصلة التعلم والتجربة مع أحدث أدوات والأطر للحصول على أفضل النتائج من جافا سكريبت.

ان لم اذكر اطار او مكتبة او اداه تستحق الاشاره اخبرني في التعليقات.

مزيد من المعرفه

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.