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

تم عملنا في مرحلة من تاريخنا عندما كان يُنظر إلى JS وAjax وHTML الديناميكي على أنها ثورة أوصلتنا إلى المستقبل. وفجأة، أصبح بإمكاننا تحديث الصفحة ديناميكيًا، والحصول على البيانات من الخادم، وتجنب الاضطرار إلى الانتقال إلى صفحات أخرى، وهو ما كان يُنظر إليه على أنه بطيء ويظهر مستطيل أبيض كبير على الشاشة بين الصفحتين. كانت هناك عبارة اشتهرت على يد جيف أتوود (مؤسس StackOverflow)، ونصها كما يلي: "أي تطبيق يمكن كتابته بلغة JavaScript سيتم كتابته في النهاية بلغة JavaScript." - جيف أتوود

بالنسبة لنا في ذلك الوقت، بدا الأمر وكأنه جرأة لإنشاء تلك التطبيقات. لقد بدا الأمر وكأنه موافقة شاملة على القيام بكل شيء باستخدام JS. لذلك قمنا بكل شيء باستخدام JS، ولم نأخذ الوقت الكافي للبحث عن طرق أخرى للقيام بالأشياء. لم نشعر حقًا بالحافز لتعلم ما يمكن أن تفعله HTML وCSS بشكل صحيح. لم نعتبر الويب حقًا منصة تطبيقات متطورة في مجملها. لقد رأينا ذلك في الغالب كشيء نحتاج إلى حله، خاصة عندما يتعلق الأمر بدعم المتصفح. يمكننا فقط استخدام المزيد من JS لإنجاز الأمور. هل كان من الممكن أن يساعدني تخصيص الوقت لمعرفة المزيد حول كيفية عمل الويب وما هو متاح على النظام الأساسي؟ بالتأكيد، ربما كان بإمكاني حلق مجموعة من التعليمات البرمجية التي لم تكن هناك حاجة إليها حقًا. لكن، في ذلك الوقت، ربما ليس كثيرًا. كما ترى، كانت الاختلافات في المتصفحات كبيرة جدًا في ذلك الوقت. كان هذا هو الوقت الذي كان فيه Internet Explorer لا يزال هو المتصفح المهيمن، وكان Firefox في المرتبة الثانية، لكنه بدأ يفقد حصته في السوق بسبب اكتساب Chrome لشعبية سريعة. على الرغم من أن Chrome وFirefox كانا جيدين جدًا في الاتفاق على معايير الويب، إلا أن البيئات التي كانت تعمل فيها تطبيقاتنا تعني أنه كان علينا دعم IE6 لفترة طويلة. حتى عندما سمح لنا بدعم IE8، كان لا يزال يتعين علينا التعامل مع الكثير من الاختلافات بين المتصفحات. ليس هذا فحسب، بل لم تكن شبكة الويب في ذلك الوقت تحتوي على العديد من الإمكانات المضمنة في النظام الأساسي.

تقدم سريعًا إلى اليوم. لقد تغيرت الأمور بشكل هائل. ولا يقتصر الأمر على أن لدينا المزيد من هذه القدرات أكثر من أي وقت مضى فحسب، بل إن معدل توفرها قد زاد أيضًا. اسمحوا لي أن أطرح السؤال مرة أخرى: هل سيساعدك تخصيص الوقت لمعرفة المزيد حول كيفية عمل الويب وما هو متاح على النظام الأساسي اليوم؟ نعم بالتأكيد. إن تعلم فهم منصة الويب واستخدامها اليوم يمنحك ميزة كبيرة مقارنة بالمطورين الآخرين. سواء كنت تعمل على الأداء أو إمكانية الوصول أو الاستجابة أو كل ذلك معًا أو مجرد شحن ميزات واجهة المستخدم، إذا كنت تريد القيام بذلك كمهندس مسؤول، فإن معرفة الأدوات المتاحة لك تساعدك على الوصول إلى أهدافك بشكل أسرع وأفضل. بعض الأشياء التي قد لا تحتاج إلى مكتبة لها بعد الآن وبمعرفة ما تدعمه المتصفحات اليوم، فإن السؤال إذن هو: ما الذي يمكننا التخلص منه؟ هل نحتاج إلى مكون div للقيام بزوايا مستديرة في عام 2025؟ بالطبع، نحن لا نفعل ذلك. لقد تم دعم الخاصية border-radius بواسطة جميع المتصفحات المستخدمة حاليًا لأكثر من 15 عامًا في هذه المرحلة. وسيأتي أيضًا شكل الزاوية قريبًا، حتى للزوايا الأكثر روعة. دعونا نلقي نظرة على الميزات الحديثة نسبيًا المتوفرة الآن في جميع المتصفحات الرئيسية، والتي يمكنك استخدامها لاستبدال التبعيات الموجودة في قاعدة التعليمات البرمجية الخاصة بك. لا يتمثل الهدف في التخلص فورًا من جميع مكتباتك المفضلة وإعادة كتابة قاعدة التعليمات البرمجية الخاصة بك. أما بالنسبة لكل شيء آخر، فستحتاج إلى أخذ دعم المتصفح في الاعتبار أولاً واتخاذ القرار بناءً على عوامل أخرى خاصة بمشروعك. يتم تنفيذ الميزات التالية في محركات المتصفح الرئيسية الثلاثة (Chromium وWebKit وGecko)، ولكن قد يكون لديك متطلبات مختلفة لدعم المتصفح تمنعك من استخدامها على الفور. لا يزال الوقت مناسبًا للتعرف على هذه الميزات، وربما التخطيط لاستخدامها في مرحلة ما. النوافذ المنبثقة ومربعات الحوار يمكن أن تساعدك واجهة Popover API وعنصر HTML

والعنصر الزائف ::backdrop في التخلص من التبعيات على النوافذ المنبثقة،تلميح الأدوات ومكتبات الحوار، مثل Floating UI، أو Tippy.js، أو Tether، أو React Tooltip. إنها تتعامل مع إمكانية الوصول وإدارة التركيز نيابةً عنك، بشكل خارج الصندوق، وهي قابلة للتخصيص بدرجة كبيرة باستخدام CSS، ويمكن تحريكها بسهولة. الأكورديون يزيل العنصر
وسمة اسمه للعناصر المتبادلة والعنصر الزائف ::details-content الحاجة إلى مكونات الأكورديون مثل Bootstrap Accordion أو مكون React Accordion. إن مجرد استخدام النظام الأساسي هنا يعني أنه من الأسهل على الأشخاص الذين يعرفون HTML/CSS فهم التعليمات البرمجية الخاصة بك دون الحاجة إلى تعلم كيفية استخدام مكتبة معينة أولاً. وهذا يعني أيضًا أنك محصن ضد إجراء تغييرات في المكتبة أو إيقاف تلك المكتبة. وبالطبع، فهذا يعني توفير تعليمات برمجية أقل للتنزيل والتشغيل. لا تحتاج عناصر التفاصيل الحصرية إلى JS لفتحها أو إغلاقها أو تحريكها. بناء جملة CSS الطبقات المتتالية، لقاعدة تعليمات CSS أكثر تنظيمًا، وتداخل CSS، لمزيد من CSS المضغوط، ووظائف الألوان الجديدة، والألوان النسبية، ومزيج الألوان، ووظائف الرياضيات الجديدة مثل abs()، وsign()، وpow() وغيرها تساعد في تقليل التبعيات على معالجات CSS المسبقة، ومكتبات الأدوات المساعدة مثل Bootstrap وTailwind، أو حتى مكتبات CSS-in-JS في وقت التشغيل. إن أداة تغيير قواعد اللعبة :has()، وهي إحدى الميزات الأكثر طلبًا لفترة طويلة، تلغي الحاجة إلى حلول أكثر تعقيدًا تعتمد على JS. المرافق شبيبة يمكن لطرق المصفوفة الحديثة مثل findLast() أو at()، بالإضافة إلى أساليب Set مثل Difference() وintersection() وunion() وغيرها تقليل التبعيات على مكتبات مثل Lodash. استعلامات الحاويات تجعل استعلامات الحاوية مكونات واجهة المستخدم تستجيب لأشياء أخرى غير حجم إطار العرض، وبالتالي تجعلها أكثر قابلية لإعادة الاستخدام عبر سياقات مختلفة. لم تعد هناك حاجة لاستخدام مكتبة واجهة مستخدم ثقيلة لـ JS لهذا الغرض بعد الآن، ولا حاجة لاستخدام polyfill أيضًا. التخطيط لقد كانت الشبكة أو الشبكة الفرعية أو المربع المرن أو متعدد الأعمدة موجودة منذ فترة طويلة، ولكن بالنظر إلى نتائج استطلاعات حالة CSS، فمن الواضح أن المطورين يميلون إلى توخي الحذر الشديد عند تبني أشياء جديدة، والانتظار لفترة طويلة جدًا قبل أن يفعلوا ذلك. كانت هذه الميزات بمثابة خط الأساس لفترة طويلة ويمكنك استخدامها للتخلص من التبعيات على أشياء مثل نظام شبكة Bootstrap، أو أدوات flexbox المساعدة الخاصة بـ Foundation Framework، أو شبكة Bulma الثابتة، أو شبكة Materialize، أو أعمدة Tailwind. أنا لا أقول أنه يجب عليك إسقاط الإطار الخاص بك. اعتمدها فريقك لسبب ما، وقد تكون إزالتها مشروعًا كبيرًا. لكن النظر إلى ما يمكن أن تقدمه منصة الويب دون تضمين طرف ثالث في الأعلى يأتي مع الكثير من الفوائد. أشياء قد لا تحتاجها بعد الآن في المستقبل القريب الآن، دعونا نلقي نظرة سريعة على بعض الأشياء التي لن تحتاج إلى مكتبة لها في المستقبل القريب. وهذا يعني أن الأشياء المذكورة أدناه ليست جاهزة تمامًا للتبني الجماعي، ولكن التعرف عليها والتخطيط للاستخدام المحتمل لاحقًا يمكن أن يكون مفيدًا. تحديد المواقع مرساة يعالج وضع مرساة CSS موضع العناصر المنبثقة وتلميحات الأدوات بالنسبة للعناصر الأخرى، ويهتم بإبقائها في العرض، حتى عند تحريك الصفحة أو تمريرها أو تغيير حجمها. يعد هذا مكملاً رائعًا لواجهة برمجة تطبيقات Popover المذكورة سابقًا، مما سيجعل من الأسهل الانتقال بعيدًا عن حلول JS الأكثر كثافة في الأداء. واجهة برمجة تطبيقات الملاحة يمكن استخدام Navigation API للتعامل مع التنقل في تطبيقات الصفحة الواحدة وقد تكون مكملاً رائعًا، أو حتى بديلاً، لمهام React Router أو توجيه Next.js أو Angular. عرض واجهة برمجة التطبيقات الخاصة بالانتقالات يمكن لواجهة برمجة تطبيقات View Transitions التحرك بين الحالات المختلفة للصفحة. في تطبيق من صفحة واحدة، يجعل هذا الانتقال السلس بين الحالات أمرًا سهلاً للغاية، ويمكن أن يساعدك في التخلص من مكتبات الرسوم المتحركة مثل Anime.js، أو GSAP، أو Motion.dev. والأفضل من ذلك، أنه يمكن أيضًا استخدام واجهة برمجة التطبيقات (API) مع التطبيقات متعددة الصفحات. هل تذكرون سابقًا، عندما قلت إن السبب وراء قيامنا ببناء تطبيقات ذات صفحة واحدة في الشركة التي عملت فيها منذ 15 عامًا هو تجنب الوميض الأبيض لإعادة تحميل الصفحة عند التنقل؟ لو كانت واجهة برمجة التطبيقات هذه متاحة في ذلك الوقت، لكنا قادرين على تحقيق تأثيرات انتقال جميلة للصفحة بدون إطار عمل من صفحة واحدة وبدون تنزيل أولي ضخم للتطبيق بأكمله. الرسوم المتحركة التي تعتمد على التمرير يتم تشغيل الرسوم المتحركة المستندة إلى التمرير في موضع التمرير الخاص بالمستخدم، وليس بمرور الوقت، مما يجعلها حلاً رائعًا لسرد القصص وجولات المنتج. لقد تجاوز بعض الأشخاص الحد الأقصى في استخدامها، ولكن عند استخدامها بشكل جيد، يمكن أن تكون أداة تصميم فعالة للغاية، ويمكن أن تساعد في التخلص من المكتبات مثل: ScrollReveal، أو GSAP Scroll، أوWOW.js. تحديدات قابلة للتخصيص التحديد القابل للتخصيص هو عنصر

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free