ماذا يعني أن تكون مطورًا أماميًا في عام 2020 (وما بعده)

نشرت: 2019-12-19

هل فكرت يومًا في معنى الجزء الأمامي من مطور الواجهة الأمامية حقًا؟ سألت ذات مرة إريك ماير (الذي كان يقوم ببناء مواقع الويب منذ ما يقرب من وجود مواقع ويب) إذا كان يعرف ما يعنيه المصطلح في الأيام الأولى ، وقال نعم. لذلك ، فهو ليس عنوانًا أو منصبًا جديدًا تمامًا ، ولكنه بالتأكيد انتقل في نطاقه على مر السنين.

تعني "الواجهة الأمامية" بشكل أساسي متصفح الويب. أنا أعتبر نفسي مطورًا للواجهة الأمامية ، وأنا بصراحة لن أكره ذلك إذا اتصلت بي بمطور متصفح الويب. ولكن ، ربما لن يتم اكتشاف ذلك (ونوع من الأصوات كما لو كنت تنشئ متصفحات ويب). بصفتك مطورًا للواجهة الأمامية ، فأنت تعمل عن كثب مع متصفحات الويب وتكتب الكود الذي يتم تشغيله فيها ، وتحديداً HTML و CSS و JavaScript وعدد قليل من اللغات الأخرى التي تتحدثها متصفحات الويب (على سبيل المثال ، تنسيقات الوسائط مثل SVG). أو ربما شرح أكثر شيوعًا ، رمز يتم معالجته في النهاية إلى تلك اللغات التي تفهمها المتصفحات. هذه منطقتك كمطور للواجهة الأمامية!

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

صورة لسبعة أيادي تحمل أجهزة محمولة مختلفة مثل الهواتف وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية.
صورة من Shuttershock

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

إذا كنت قد تخرجت للتو من معسكر تدريب على الترميز وكانت تجربتك في إنشاء مواقع الويب ضيقة وجديدة إلى حد ما ، فقد تسامح إذا فكرت في تطوير الواجهة الأمامية على أنه "عناصر React" والتطوير الخلفي على أنه "العقدة" الأشياء "أو" أشياء بايثون "، مثل النكهات الأكثر رواجًا هذه الأيام. أنت لست مخطئا أيضا. تُستخدم React عمومًا كإطار عمل للواجهة الأمامية (إنها حرفياً JavaScript تعمل في المتصفحات). تعد Node و Python أمثلة على اللغات التي لا تعمل بالفعل في متصفحات الويب ؛ تم إنشاؤها للعمل على خوادم الويب (أه ، أجهزة الكمبيوتر).

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

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

صورة أحد الأطفال وهو سخيف والآخر يبدو غاضبًا جدًا وهو يهز قبضته.
صورة من Shuttershock

كلاهما على حق ، على الأرجح. طالما لا أحد يتصرف بفظاظة ، فهذا كله جزء من التدفق.

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

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

طوال الوقت ، لا تزال "الواجهة الأمامية" مجرد المتصفح. لا تزال لغات المتصفحات و HTML و CSS و JavaScript هي التقنيات الأساسية في اللعب. هذه اللغات تتطور وكذلك المتصفحات نفسها ، ولكن بشكل أبطأ. إنهم يفعلون عكس الشعار المفضل لوادي السيليكون: تحرك بسرعة وكسر الأشياء . يتحركون ببطء ونادرًا ما يكسرون أي شيء.

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

إذن ماذا تفعل كمطور للواجهة الأمامية؟

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

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

ما يتغير هو أن المتصفح قادر على المزيد والمزيد من العمل. هناك العديد من الأسباب لذلك ، مثل زيادة قدرة واجهات برمجة التطبيقات للمتصفح ، والمكتبات التي تزداد روعة ، وتحسن أجهزة الكمبيوتر بشكل عام. أصبح تفريغ العمل من الخادم إلى المتصفح أكثر منطقية على مر السنين (تطبيقات الصفحة الواحدة!). على الرغم من أنه من المثير مشاهدة تأرجح البندول للخلف (المواقع المعروضة مسبقًا!) والعثور على حل وسط (JAMstack!).

قد يشمل تطوير الواجهة الأمامية هذه الأيام أيضًا:

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

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

صورة لأشخاص مختلفين ينظرون في كومة قش كبيرة.
صورة من Shuttershock

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

حظا سعيدا!

صورة لكريس كويير يعمل على مكتبه.
صورة من كيمبرلي بيلي ، مصور Flywheel الداخلي

ما التالي: لماذا يختار Chris Coyier Local و Flywheel لتشغيل مواقعه الإلكترونية

تعرف على كيفية استخدام Chris Local و Flywheel للانتقال بمواقعه إلى المستوى التالي. تعرف على ميزاته المفضلة ، وكيف يعتمد على Flywheel لترحيل مواقعه (مجانًا!) ، وأكثر من ذلك بكثير! انقر هنا لمعرفة المزيد.