البرمجة مجال متجدد بشكل كبير جدا، وميدان تطوير الويب تحديدا متجدد ومتغير بوثيرة رهيبة. لذلك نجد العديد من المدونين والمطورين حول العالم في نهاية كل عام يتحدثون عن حالة الويب وتقنياته التي من المرتقب أن تشهد حضورا ونموا جيدا في السنة الجديدة.
بدوري قررت أن أكتب هذا المقال الذي سيكون طويلا نوعا ما ☕️ لأنني سأتحدث فيه عن جميع تقنيات وأدوات تطوير تطبيقات الويب التي من المتوقع أن تسمع عنها بشكل كبير في عام 2020.
هذا المقال ليس خريطة طريق أو مسارا لتعلم تطوير الويب، هذه ليست غايتي من ورائه. إنما الغرض هو أن تتشكل لدى القارئ والمتابع فكرة عن بيئة تطوير الويب وحزمة الأدوات التي تكون مجتمعة البنية التحتية لهذه البيئة الغنية.
الكثير من الأدوات التي سنتحدث عنها موجودة بالفعل ومستخدمة بشكل واسع منذ مدة، والبعض الآخر ربما تسمع عنه لأول.
على كل حال، اربط حزامك واستعد لسماع الكثير من المصطلحات التي ربما سيفوق عددها عدد سكان الهند 😃 🇮🇳
لنبدأ بمحررات النصوص
عند التفكير في البرمجة عموما فإن أول ما يتبادر إلى الذهن تقريبا هي محررات النصوص أو Text Editors التي نكتب فيها الشفرة البرمجية، لأنها المكان الذي يقضي فيه المبرمج أو المطور جزءًا كبيرا من وقته.
قبل 3 سنوات من الآن، كان محرر Sublime Text هو الأكثر استخدام ومسيطرا على نسبة كبيرة من اختيارات مطوري الويب حول العالم. ولكن في العامين الأخيرين ظهر محرر جديد أكثر تطورا مع تجربة استخدام أفضل ومدعوم من طرف شركة عملاقة اسمها مايكروسوفت. بطبيعة الحال تعرفون الآن عما أتحدث 😉 نعم إنه محرر Visual Studio Code المعروع اختصارا ب VS Code، حيث أظهر استبيان جافاسكريبت الأخير عن كونه المحرر المفضل لما يزيد عن %56 من المشاركين في الإستبيان، متبوعا بمحرر WebStorm من شركة JetBrains ومحرر Vim مفتوح المصدر.
أما محرر Sublime Text فقد تراجع للمركز الرابع بنسبة استخدام لا تتجاوز 10% بعدما جاء في العام الماضي ثانيا أمام WebStorm و Vim اللذين تفوقا عليه في العام الحالي.
أطر عمل CSS
CSS من القطع الأساسية التي لا يمكن الإستغناء عنها في الواجهات الأمامية لتطبيقات الويب. في كل عام لا بد أن تجد هذه اللغة في قائمة التقنيات والأدوات الأكثر استخداما في هذا المجال.
في التطبيقات الكبيرة والإحترافية يكون من الضروري في أحيان كثيرة الإستعانة بإطار عمل CSS لكي يسهل علينا إنشاء تصاميم تجاوبية ومتماسكة في جميع أجزائها وتفاصيلها. ويعتبر إطار العمل Bootstrap أشهر أطر عمل CSS وأكثرها استخداما من طرف مطوري الواجهات الأمامية (Frontend Developers). هذه المكانة المميزة اكتسبها وحافظ عليها Bootstrap منذ سنوات عديدة ومازال إلى اليوم موجودا ومنافسا بقوة.
إلى جانب بوتستراب، نجد أطر عمل أخرى جيدة بعضها قديم مثل Zurb Foundation والبعض الآخر يمكن اعتباره مستجدا مثل إطاري العمل Bulma و Tailwind CSS. هذا الأخير بالخصوص شهد صعودا مثيرا للإنتباه في العامين الأخيرين معتمدا على فلسفة خاصة في تصميم العناصر معروفة بطريقة "Utility classes". هذه الطريقة تعتمد على الإستخدام المكثف للكلاسات في عناصر HTML، كل كلاس مسؤول عن خاصية معينة في CSS، لذلك من العادي جدا عند استخدام Tailwind أن يظهر لدينا كود HTML بهذا الشكل:
<form><inputclass="bg-gray-200 hover:bg-white hover:border-gray-300 focus:outline-none focus:bg-white focus:shadow-outline focus:border-gray-300 ..."/><buttonclass="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline ...">
Sign Up
</button>
</form>
هناك أطر عمل أخرى كثيرة ولكن حصصها صغيرة بالمقارنة مع ما ذكرناه. ليس عليك كمطور واجهات أمامية أن تكون على دراية كاملة بكل تلك الأطر، يكفي أن تختار واحدا منها وتفهم جيدا طريقة عمله لجعله خيارك الأول دائما في مشاريعك الإحترافية.
شخصيا أنا أستخدم Bootstrap منذ سنوات طويلة وإلى اليوم, ولكن منذ فترة بدأت في إستخدام TailWind والأمور تسير على ما يرام معه 🙂
جافاسكريبت واستمرار الثلاثة الكبار في السيطرة
لغة البرمجة جافاسكريبت، مثلها مثل لغة التنسيق CSS، تعتبر من الأعضاء الأساسية في جسد أي تطبيق ويب حديث. لذلك من الضروري على من يريد تعلم تطوير واجهات الويب الأمامية أن يتعلم أساسيات هذه اللغة واكتشاف أهم الوظائف والواجهات البرمجية التي توفرها مثل طريقة التعامل مع عناصر DOM أو ما يصطلح عليه ب DOM Manipulation، وكذلك تعلم استخدام واجهة Fetch API التي تمكننا من عمل طلبات Ajax بطريقة أسهل مما كان عليه الحال مع XMLHttpRequest.
من الضروري كذلك في 2020 أن يكون المطور ملما بشكل جيد بإصدار جافاسكريبت الحديث أو ES6، حيث أن العديد من خصائص هذا الإصدار أصبحت مدعومة أكثر فأكثر من طرف المتصفحات الكبيرة وفي مقدمتها جوجل كروم وفايرفوكس. حتى أنه لم يعد من الضروري في كثير من الحالات الإستعانة ب Babel من أجل عملية Transpiling.
أطر عمل الواجهات الأمامية
فيما يخص أطر عمل جافاسكريبت فإن الكعكة مازالت مقسمة بشكل شبه كامل بين الثلاثة المعروفين: رياكت، Vue.js و أنجولار! هذا ما أكده كذلك استقساء State Of JavaScript لعام 2019 كما ترون في الصورة أسفله.
كل واحد من بين الثلاثة لديه مجتمع كبير من المطورين والمدافعين عنه، ومهما كان الخيار الذي تذهب معه فالأكيد أنه لن يكون خيارا سيئا مادام هنا طلب كاف على الكل في السوق.
إذن لا جديد يذكر تقريبا في موضوع أطر عمل جافاسكريبت في العام الذي نحن بصدد توديعه مقارنة بالعام الذي سبق، باستثناء ظهور مكتبة Svelte التي شهدت قبولا مثيرا للإهتمام من قِبل المطورين حول العالم. لم يسبق لي تجربة هذه المكتبة ولا فكرة لدي عن التغيير الذي جاءت به، ولكن ما لاحظته أن الكثير من الكلام الإيجابي دار حولها في الشهور الماضية وربما يكون العام الجديد هو عام صعود Svelte لمزاحمة الثلاثي المسيطر.
اللغات المترجمة إلى جافاسكريبت (JavaScript Flavors)
منذ مدة ليست بالقصيرة ظهرت لغات برمجة كثيرة فوق جافاسكريبت بهدف إضافة مزايا ومقومات حديثة أثناء كتابة أكواد جافاسكريبت عوض انتظار لسنوات من أجل رؤية تلك المميزات تضاف بالفعل للغة البرمجة جافاسكريبت ودعمها من طرف المتصفحات.
كان أول تلك اللغات ظهورا وأشهرها في بدايات 2010 لغة CoffeeScript، ومن بعدها بسنوات ظهرت كل من ClosureScript ،Typescript و Elm. ولكن اليوم تعتبر Typescript - المطورة من طرف مايكروسوفت - هي الأكثر استخداما من طرف المطورين ومعظم أطر عمل جافاسكريبت تدعمها، بدءًا بأنجولار، ثم React.js وأخيرا Vue.js الذي من المنتظر أن يدعم هذه اللغة بشكل كامل في الإصدار 3 الذي ينتظره عشاق هذه المكتبة على أحر من الجمر.
المطورون ليسوا مجبرين على استخدام Typescript لكتابة أكواد React.js أو Vue.js، بل تعتبر تلك اللغة مجرد خيار ثان فقط لمن أراد الإستعانة بها والإستفادة من بعض المزايا التي لا يدعمها جافاسكريبت مثل Type Checking على وجه الخصوص.
المتصفح لا يفهم سوى لغة البرمجة جافاسكريبت، وبالتالي فإن أكواد Typescript ومثيلاتها يتم ترجمتها إلى جافاسكريبت في مرحلة بناء الملفات المصدرية أو Build time. بتعبير آخر هي مجرد منكهات أو Flavors للغة JavaScript في مرحلة التطوير (Development) ولا نجد لها أي وجود أو أثر في وضعية الإنتاج (Production).
أطر عمل Node.js
بالنسبة لأطر عمل Node.js فإن إكسبريس مايزال في طليعتها ويأتي بعده كل من Nest.js ،Koa و Meteor. ونجد كذلك حضورا قويا لكل من Next.js و Nuxt.js الخاصين بعمل Server Side Rendering لتطبيقات React.js و Vue.js على التوالي، ولهما وجود قوي كذلك في مجال بناء المواقع الساكنة.
وعند ذكر مولدات المواقع الساكنة أو Static Site Generators فإن 2019 كان عام Gatsby.js بامتياز، ويتوقع أن يتواصل صعوده الصاروخي في العام الجديد ويكسب المزيد من ثقة مطوري الويب مستفيدا من شعبية React.js الكبيرة أصلا.
مكتبات الفحص والإختبار (Unit Testing)
إجراء اختبارات Unit Testing في مشاريع جافا سكريبت يصبح مطلوبا من طرف الشركات عاما بعد عام بشكل متنامٍ. وتعد مكتبة Jest الأكثر استخداما في عالم جافاسكريبت وخاصة في بيئتي React.js و Vue.js، بينما في بيئة أنجولار نجد حضورا قويا لإطار العمل Jasmine حيث يعمل الإثنان بتناغم وتوافقية ممتازين.
