مكدس تقنية الويب الجديدة لعام 2020

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

تم إنشاء أول موقع ناجح لي ، وهو الآن مشروع قديم عام 1999 ، باستخدام التقنيات التي يمكن حسابها على أصابع اليد الواحدة: HTML4 و CSS2 و JavaScript3 و Apache 1.1. كل هذا كان يدور على خادم يعمل بنظام Linux 2.0. تضمن الموقع 38000 صفحة. واليوم ، بعد 20 سنة ، لا يزال يصدرها .



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

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

2020 Web Stack

2020 هو بداية عقد جديد. هذا هو الوقت المناسب للحديث عن مكدس تكنولوجيا الويب الجديد.

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

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

الآن لتطوير ودعم المشاريع في مجال اهتماماتي ، أستخدم كومة تقنية تتكون من 12 مستوى.

▍1. مزود سحابة

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

▍2. توزيع Fedora Linux مع SELinux

الأمن هو ما يزعجنا جميعًا حقًا. يمكن مقارنة SELinux بنظام أمان قوي يعمل على نظام Linux. إذا أضفنا إلى هذا جدار حماية iptables - تم تكوينه جيدًا ، فسوف يتحول ذلك إلى السماح لصاحب الموقع بالنوم بهدوء في الليل. إذا لم تكن متأكدًا من أنك بحاجة إلى كل هذا ، فقم بإجراء التجربة التالية. انشر خادمًا جديدًا على مزود السحابة المفضل لديك وشاهد كيف سيتم مهاجمته قريبًا. رأيت كيف بدأت هجمات القوة الغاشمة على خوادم جديدة مع محاولات تسجيل الدخول إلى SSH بعد أقل من 10 دقائق من إنشائها.

▍3. خادم الويب قراءة خدمة الكتابة

أستخدم خادم الويب Read Write Serve مع شهادات TLS من LetsEncrypt. اعتدت أن أكون من محبي Apache ، لقد استغرق الأمر بضع دقائق فقط لإنشاء مواقع جديدة وإطلاقها. لكن منذ أن تحولت من PHP إلى JavaScript ، كان علي أن أنسى Apache. بدا لي أن خادم Express أداة بسيطة للغاية ، ولكن فقط حتى حاولت إعادة إنتاج كل الوظائف التي أعطاني إياشي فيها. نحن نتحدث عن آلية تنسيق المحتوى ، وعن التخزين المؤقت الشرطي ، وعن ضغط البيانات ، وعن إعادة كتابة عناوين URL لكبار المسئولين الاقتصاديين ، وعن CORS ، وعن سياسات حماية المحتوى. كنتيجة لذلك ، قمت بالتبديل إلى خادم Read Write Serve ، حيث توجد كل هذه الميزات افتراضيًا.

▍4. وقت تشغيل التطبيق Node.js

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

▍5. MariaDB قاعدة البيانات

يمكنني استخدام خادم قاعدة البيانات MariaDB. هذا شوكة لـ MySQL تم تغيير اسمها وإتقانها بواسطة مجتمع المصادر المفتوحة. عندما أحتاج إلى تخزين بيانات JSON غير المهيكلة ، فإنني أستخدم PostgreSQL. الحقيقة هي أن هذا يسمح لي بتنفيذ الطلبات مباشرة على خصائص JSON محددة. هذا يشبه MongoDB قليلاً ، ولكنه يعتمد على بناء جملة SQL المألوفة.

▍6. HTTP / 2

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

▍ 7. قالب HTML باستخدام العبارة الزرقاء

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

▍8. كتابة رمز الصفحة باستخدام قراءة الكتابة الوثيقة

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

▍ 9. مكونات الويب القياسية

في مجال العمل مع مكونات الويب ، ألتزم بمعايير W3C. هذه هي DOM الظل ، عناصر المستخدم ، <template> HTML <template> ، وحدات ECMAScript. هذا يتيح لي دمج كل ما أحتاجه بالكامل في الحزم التي أقوم بتوزيعها من خلال NPM. بالنسبة لي ، كانت الميزة الأكبر لكل هذا هي مستوى العزل الذي يوفره الظل الظل. هذا سمح لنا بالتخلص من لعنة CSS ، من تلويث مساحات الأسماء.

▍ 10. جافا سكريبت للنصوص العميلة

لكتابة البرامج النصية للعميل ، أستخدم كود JavaScript المعياري للكائن. لا أطبق الميزات الجديدة لمعيار ECMAScript إلا عندما يظهر دعمهم في أحدث إصدارات المتصفح. هذا هو ، أنا أدرجها في ترسانتي في الوقت الحالي عندما أرى أن جميع المتصفحات الرئيسية " تتحول إلى اللون الأخضر" على caniuse.com . أنا تجنب polyfills.

▍11. تصميم CSS

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

 <link href='/fonts/source-serif-pro-400-latin.woff2' rel=preload as=font crossorigin /> 

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

▍ 12. إعداد الموارد الرسومية باستخدام GIMP و InkScape

وأخيرًا ، لإعداد الموارد الرسومية ، أستخدم اثنين من المحررين. أقوم بإعداد صور نقطية بتنسيق PNG باستخدام GIMP ، وناقلات مواد SVG باستخدام InkScape.

التقنيات التي فقدت جاذبيتها السابقة

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

• أدوبي فوتوشوب والمصور. هذان تطبيقان رائعان استوفيا لسنوات عديدة جميع احتياجاتي الرسومية. أقول للأسف "وداعًا" لهم وأشكرهم على كونهم معي. الآن كل ما أحتاجه هو بدائلهم المجانية المفتوحة المصدر.
• مسج. أصبحت هذه المكتبة غير ضرورية عندما انتهت حروب التوافق عبر المستعرض. كانت ميزة jQuery الأكثر قيمة بالنسبة لي هي بناء الجملة المحدد. اتضح أن الطلب كبير جدًا على ذلك ، حيث تمت إضافته في عام 2009 إلى DOM باعتباره querySelector .
• AJAX. هذا السلف من الويب 2.0. تحولت الآن إلى بقايا الماضي. يتم استبدال واجهة برمجة تطبيقات XMLHttpRequest بواجهة برمجة تطبيقات fetch حديثة وأبسط ، بينما يحل JSON محل XML.
• ساس / SCSS. أعترف أن كتابة كود CSS بدون متغيرات كان غير فعال ؛ ونتيجة لذلك ، أحب الكثير من الناس SASS. وكانت الوحدات أيضا ميزة مهمة للغاية. ولكن في النهاية ، من أجل استخدام كل هذا في JavaScript ، كان عليك قضاء الكثير من الوقت والجهد. في الوقت نفسه ، إلى جانب تطوير الأدوات المساعدة للعمل مع الأنماط ، فإن معيار CSS لم يقف ساكنا. نتيجة لذلك ، أصبحت الأدوات المختلفة لتحويل كود CSS تدريجيًا من الماضي.
• BEM. نظام تسمية كيان BEM (Block ، Element ، Modifier) ​​المستخدم في تكوين أسماء الفئات CSS يحل مشكلة مساحة الاسم العالمية. ولكن عليك أن تدفع ثمن ذلك باستخدام تصاميم طويلة جدا. لقد تحولت إلى محددات الوالدين / الأطفال في العناصر الدلالية ، مفضلًا اتباع نهج أسهل معرفات وأسماء الفصل.
  
  على سبيل المثال:
  
  

   header > ul > li {   ... } nav > ul > li {   ... } footer > ul > li {   ... } 

• الخطوط جورجيا وفيردانا. كان هذان الخطان في قمة تصنيف الخطوط الخاص بي لسنوات عديدة. يمكنني الاعتماد على إمكانية الوصول إليها وسهولة قراءتها. ولكن بعد ظهور قاعدة @font-face ، وبعد أن بدأت الخطوط مفتوحة المصدر بالانتشار ، بدأت في استخدام خطوط مماثلة.
• بابل ، Grunt ، Gulp ، Browserify ، WebPack. العناصر الأربعة الأولى في هذه القائمة من غير المرجح أن تفاجئ أي شخص. ولكن لماذا تركت webpack الخاصة بي Webpack؟ حقيقة أن هذا المجمّع قد فقد أهميته بالنسبة لي له بعض الأسباب التي سأركز عليها بمزيد من التفصيل:
  
  
  1. قبل HTTP / 2 مع دعم الاتصالات المستمرة وتعدد إرسال الدفق ، كنا نعتمد على إمكانات هذه الأدوات لبناء حزم موارد التطبيق. لكن التجميع لا يمنحنا أي شيء في عالم به HTTP / 2.
  2. كان معيار ECMAScript 2015 كلمة جديدة في تطوير جافا سكريبت ، فسرع الجميع في استخدام الميزات الجديدة للغة في اللحظة التي رأوا فيها النور. ومع ذلك ، كان هناك مشكلة واحدة. لم يتم دعم الشفرة المكتوبة باستخدام ميزات جديدة بواسطة المتصفحات. لذلك ، كان لابد من نقلها إلى رمز ECMAScript 5. في هذا العمل الذي اعتمدناه على بابل ، كان تطبيقه خطوة قياسية في إعداد مشاريع الويب للنشر. اليوم ، تتوفر جميع الميزات اللغوية الجديدة التي أحتاجها حرفيًا في كل مكان. ونتيجة لذلك ، لم أعد بحاجة إلى بابل.
  3. قبل إمكانية الاستيراد الديناميكي للوحدات النمطية في المتصفحات ، كان لا بد من ترجمة الشفرة إلى تنسيق CommonJS. الآن ، تدعم معظم المتصفحات الرئيسية <script type='module'> (وسيقوم Edge 76+ قريبًا). نتيجةً لذلك ، سنتمكن قريبًا من الترحيب بوحدات ECMAScript ونقول وداعًا لكل شيء آخر.
• JSX. أنا لا أفهم أولئك الذين يعتقدون أن JSX جيد. و "لكنك معتاد على ذلك" بالنسبة لي - وليس حجة.
• البرمجة الوظيفية. قصرت استخدام البرمجة الوظيفية في الكود الخاص بي على تصميمات سطر واحد بسيطة مثل numbers.sort((a, b) => a - b); . لكل شيء آخر ، أستخدم البرمجة الموجهة للكائنات.

التقنيات التي أصبحت المفضلة

فيما يلي نظرة عامة على مستويات مكدس التقنية التي أعجبت بها بشكل خاص:

• وحدات جافا سكريبت. لقد أثبتت الوحدات النمطية نفسها في كود JavaScript من جانب الخادم. وأنا سعيد جدًا بأني أستطيع أخيرًا استخدامها من جانب العميل.
• وجوه المنحى جافا سكريبت فيما يلي خمس قواعد ذهبية لتطوير جافا سكريبت وجوه المنحى:
  
  
  1. استبدال الكائنات مجهولة مع الفئات المسماة.
  2. قم بتعريف وتهيئة جميع خصائص الكائنات في المنشئات.
  3. حماية الكائنات من التغييرات مباشرة بعد الإنشاء.
  4. أعلن الأساليب مع التواقيع غير القابلة للتغيير.
  5. ربط this إلى كل رد الاتصال.
• العبارة الزرقاء يسمح لي هذا النظام باستخدام نهج تعريفي عند إنشاء قوالب وإعداد مواد متنوعة. يجعل من جودة كود HTML للكتابة متعة كبيرة.

النتائج

في السابق ، يمكن أن تتضمن مكدسات تكنولوجيا الويب أربعة عناصر فقط. لكن في الظروف الحديثة ، لن تفاجئ أي شخص بمجموعة من 12 مستوى. لا أريد أن أبدو كشخص يعبّر عن حقائق معروفة ، لكن مع ذلك ، مع استكمال هذه المادة ، سأقول أن كل مطور يمكن أن يكون له مجموعته الخاصة. وسيكون من المثير للاهتمام للغاية بالنسبة لي أن أتعلم ما سوف يطلق عليه الآخرون "المجموعة المثالية لتقنيات الويب لعام 2020".

أعزائي القراء! وما هو الخاص بك - كومة من تقنيات الويب الخاصة بك في عام 2020؟

إخلاء المسئولية من المترجم: Blue Phrase و Read Write Serve و Read Write Doc - التقنيات التي طورها مؤلف هذا المقال. التحميل والتثبيت على مسؤوليتك الخاصة.