كيف تقرر أفضل تقنية لموقعك على الويب

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

ولكن من أين نبدأ؟

هل نحتاج إلى تثبيت أي أدوات؟ هل من الجيد استخدام JavaScript أو الاستمرار في العرض من جانب الخادم باستخدام MVC أو نظام إدارة محتوى الكل في واحد؟ سأشرح كيفية إعادة الحياة إلى مواقع الويب الخاصة بك وإعدادها للمستقبل.

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

حل شامل من جانب الخادم

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

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

  • تعلم مفهوم القوالب لكل نظام إدارة محتوى معين (من التوثيق أو التعلم الإلكتروني)
  • تطبيق المفهوم على التصميم الخاص بك
  • تعلم أفضل الممارسات حول تخزين المحتوى في كل نظام إدارة محتوى
  • صقل موقع الويب ليلائم توقعاتك

كل هذا يمكن القيام به بسرعة كبيرة إذا كنت معتادًا على CMS. لكن من المحتمل ألا تكون مواقع الويب القليلة الأولى الخاصة بك مرشحة لموقع العام. ؟

عندما استخدمت أنظمة CMS في الماضي ، انتهى بي المطاف دائمًا عاجلاً أم آجلاً بإنشاء عناصر تحكم مخصصة (أي ، رمز مخصص) ، نظرًا لأن إخراج HTML لعناصر التحكم القياسية لم يكن كافيًا أو كان يتعارض بشكل مباشر مع معايير الصناعة الجديدة ، مثل Accelerated Mobile Pages. أنا أعتبر هذا أكبر تحذير لأنظمة CMS ، فهي تقيدك بطرق مختلفة لأنها تضع نفسها كمحرك رئيسي لموقع الويب الخاص بك. لقد وجدت نفسي دائمًا أقوم بحل المهام الصغيرة بنسبة 80٪ من الوقت.

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

نهج مقطوعة الرأس

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

اسمحوا لي أن أريكم ذلك على موقع الويب الخاص بي. عندما يأتي الزائر ، يتوقع أن يرى شيئًا مثل هذا:

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

أو قطعنا خادم الويب الخاص بنا بعض الركود وقمنا بتكوين كود HTML على العميل:

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

جافا سكريبت الحديثة

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

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

بشكل عام ، هناك 3 أطر عمل رئيسية لـ JS لديها الكثير من الجذب ومجتمع كبير من حولهم. يضمن التطوير والدعم المستمر. يتم إنشاء الكثير من المواقع الناجحة فوقها ، وقد تستخدم بعضها يوميًا.

1. AngularJS

Angular له أعظم تاريخ بين هؤلاء الثلاثة. تأسست منذ ما يقرب من 10 سنوات في عام 2009! تم تطويره وصيانته بواسطة Google. بالمقارنة مع الأطر الأخرى ، فإنه يحتوي على بناء جملة أكثر تعقيدًا يعتمد على TypeScript وسيتطلب منك إعداد عملية بناء. ومع ذلك ، فهو يدعم نمطية ونموذج MVVM الذي يسمح للتطبيقات المبنية على Angular أن تكون قوية للغاية.

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

2. ReactJS

تم تأسيس React في الأصل وتم فتحها من قِبل Facebook في عام 2013. وهي قائمة على المكونات مما يجعلها سهلة التعلم. يتم تنفيذ مكوناته باستخدام بناء جملة JSX ، والذي يقع بين JavaScript و HTML. من السهل أيضًا اكتشاف البنية الأولية ، حيث إن كل مكون يشبه وحدة نمطية تساهم في إخراج HTML. إذا كنت تحب Legos ، فستحب React!

من الممكن تضمينها في موقع الويب كمكتبة JS أو إعداد عملية بناء واستخدام TypeScript. تمتلك React أيضًا أكبر مجتمع ولديها شقيق يسمى React Native والذي يتيح لك إنشاء تطبيقات محمولة أصلية.

3. VueJS

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

لقد استخدمتها شخصيًا في سيناريوهات عربة التسوق الأكثر تقدمًا في Prestashop ودهشت من السرعة التي تمكنت بها من العمل معًا دون أي معرفة سابقة بـ Vue.

إذا كنت ترغب في إلقاء نظرة متعمقة على المقارنة ، فارجع إلى مقالة رائعة بقلم TechMagic أو مقارنة بواسطة Jens Nauhaus على Medium.

اختيار الإطار الصحيح

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

  • منحنى التعلم السريع - أحتاج إلى إنشاء موقع الويب بأسرع ما يمكن
  • تنفيذ خفيف الوزن - سيكون الموقع صغيرًا جدًا ، لذلك أريد تقليل وقت التحميل
  • سهولة التكامل - لا أرغب في إعداد عمليات الإنشاء ، لكنني أبدأ العمل على الموقع على الفور
  • توثيق جيد - عندما أكون جديدًا على شيء ما ، أجد نفسي أتصفح الوثائق طوال الوقت لحالات استخدام محددة
  • توجيه سهل - هناك عدة صفحات في موقع الويب الخاص بي ، لذا فأنا بحاجة إلى جهاز توجيه للتعامل مع عناوين URL المختلفة
  • توصيل محتوى بسيط - سأستخدم نظام Content-as-a-Service لذا أحتاج إلى طريقة سهلة لكيفية الحصول على المحتوى في JavaScript

لذلك يمكنك أن ترى أن Vue.js يناسب الأفضل في حالتي. إنه سهل الاستخدام والتكامل للمبتدئين ولديه وثائق رائعة مع دروس تعليمية سهلة. اكتب توقعاتك واعرف ما إذا كانت Vue.js تناسبها أيضًا.

النقطة الأخيرة حول توصيل المحتوى مهمة جدًا. تمكّنك جميع أطر عمل JavaScript هذه من الحصول على المحتوى عبر واجهة برمجة تطبيقات REST ، ولكن تنفيذ استدعاءات API الأولية سيستغرق وقتًا طويلاً ولن يكون ممتعًا على الإطلاق. توفر بعض أنظمة CMS بدون رأس مثل Kentico Cloud SDK لـ JavaScript وهو عبارة عن غلاف حول اتصال REST مع العديد من الميزات الإضافية. هذا سيجعل جمع المحتوى أسهل بكثير.

يمكن أن تبدو البنية النهائية للموقع الجديد كما يلي:

يتم حل الطلب الأول للموقع عن طريق إعادة قالب HTML رئيسي مع ملفات JavaScript. عندما يبدأ المتصفح في معالجة منطق JavaScript ، ستتم تهيئة Vue.js وستجعل مكوناتنا تنبض بالحياة. ثم يعمل كل مكون من هذه المكونات بشكل مستقل - يعرض HTML ، أو يجلب البيانات من CMS بدون رأس ، أو ينشر بيانات عمليات إرسال النماذج إلى خدمة ويب للنماذج.

تمكننا هذه البنية من بناء مواقعنا الإلكترونية بسرعة كبيرة أثناء الاستمتاع بها بالفعل. إنه مثل بناء سيارة مع Legos. سيكون موقع الويب خفيف الوزن وسريعًا وعمومًا وأكثر فعالية من حيث التكلفة. لكن دعنا نترك الاقتصاد لمقال آخر. ما هي خبرتك؟ هل جربت الخدمات المصغرة بالفعل؟

مقالات أخرى في السلسلة:

  1. كيف تبدأ في إنشاء موقع ويب رائع لأول مرة
  2. كيف تقرر أفضل تقنية لموقعك على الويب (هذه المقالة)؟
  3. كيفية تعزيز موقع الويب الخاص بك باستخدام Vue.js بأقل جهد
  4. كيفية مزج CMS مقطوعة الرأس مع موقع Vue.js ودفع الصفر
  5. كيفية جعل عمليات إرسال النماذج آمنة على موقع ويب API
  6. بناء موقع ويب فائق السرعة وآمن باستخدام CMS ليس بالأمر الهين. أو هو؟
  7. كيفية إنشاء موقع ويب ثابت باستخدام Vue.js في لمح البصر
  8. كيفية إعداد عملية إنشاء لموقع ثابت بسرعة