ثريد مهم جدا لمطورين الويب ⚠️
-----
ما هو الJAMStack؟
سوف أشرح لكم عن أكثر مجالات الويب التي أحبها و لدي خبرة واسعة فيها
الJAMStack هي طريقة جديدة نسبياً ومميزة جداً لانشاء المواقع أحب اختصرها بهذه العبارة
"Static is the new Dynamic"
لتعرفو كيف تابعو القراءة 😉
-----
ما هو الJAMStack؟
سوف أشرح لكم عن أكثر مجالات الويب التي أحبها و لدي خبرة واسعة فيها
الJAMStack هي طريقة جديدة نسبياً ومميزة جداً لانشاء المواقع أحب اختصرها بهذه العبارة
"Static is the new Dynamic"
لتعرفو كيف تابعو القراءة 😉
حتى نفهم الJAMStack. يجب أن نوضح نقاط أساسية في البداية.
1) هنالك نوعين لصفحات الويب
صفحات Dynamic وهي الصفحات التي تجلب معلوماتها من السيرفر في كل مرة تنادي فيها الصفحة
صفحات Static وهي الصفحات التي تحتوي على جميع معلوماتها داخل الصفحة نفسها من دون الحاجة للربط مع أي سيرفر
1) هنالك نوعين لصفحات الويب
صفحات Dynamic وهي الصفحات التي تجلب معلوماتها من السيرفر في كل مرة تنادي فيها الصفحة
صفحات Static وهي الصفحات التي تحتوي على جميع معلوماتها داخل الصفحة نفسها من دون الحاجة للربط مع أي سيرفر
2) النقطة الثانية الي يجي أن توضح هي أن كل تطبيق ويب يتكون من عدة تقنيات. كل تقنية لها دور في انشاء التطبيق. ترتبط هذه التقنيات مع بعضها على شكلة سلسلة. وهذا ما ندعوه في عالم الويب ال Stack
أكثر stack مشهور هي مواقع الphp و تدعى ب LAMP وهي اختصار ل:
Linux - Apache - MySQL - PHP
أكثر stack مشهور هي مواقع الphp و تدعى ب LAMP وهي اختصار ل:
Linux - Apache - MySQL - PHP
النقطة الأخيرة وهي
مع ان الDynamic هو الحل الأفضل لتطوير المواقع لسهولة اضافة وتعديل المحتوى الا ان هنالك بعض المشاكل يجواهها أصحاب المواقع والمطورين عند استخدامهم حلول الDynamic
سنذكر أهمها 👇
مع ان الDynamic هو الحل الأفضل لتطوير المواقع لسهولة اضافة وتعديل المحتوى الا ان هنالك بعض المشاكل يجواهها أصحاب المواقع والمطورين عند استخدامهم حلول الDynamic
سنذكر أهمها 👇
مشاكل مواقع الDynamic:
1) بطئ تحميل الصفحات
2) تحتوي على الكثير من الثغرات الأمنية التي يمكن استغلالها
3) تطويرها يعتبر معقد نسبياً
4) غير فعالة في الSEO لأن الصفحات لا تحتوي على المحتوى وانما هي صفحة فارغة من المحتوى و عند منادتها تستدعي المعلومات من السيرفر
1) بطئ تحميل الصفحات
2) تحتوي على الكثير من الثغرات الأمنية التي يمكن استغلالها
3) تطويرها يعتبر معقد نسبياً
4) غير فعالة في الSEO لأن الصفحات لا تحتوي على المحتوى وانما هي صفحة فارغة من المحتوى و عند منادتها تستدعي المعلومات من السيرفر
مع أن معظم النقاط المذكورة في الأعلى لها حلول مثل عمل cache لسرعة التحميل أو عمل site map لمساعدة محركات البحث في ارشفة الصفحات.
الا أن هذه الحلول ليست فعالة بما فيه الكفاية. أو بالأحرى هنالك حل أفضل :)
وهو يا عزيزي القارئ الJAMStack ⚡
الا أن هذه الحلول ليست فعالة بما فيه الكفاية. أو بالأحرى هنالك حل أفضل :)
وهو يا عزيزي القارئ الJAMStack ⚡
ما هو الJAMStack؟
هو اسلوب جديد في تطوير تطبيقات الويب ويتكون من 3 عوامل رئيسية مختصرة بالأحرف JAM
JavaScript -> Web Service APIs -> Markup
سنشرح كل واحدة على حدة لنفهم التقنية أكثر 👇
هو اسلوب جديد في تطوير تطبيقات الويب ويتكون من 3 عوامل رئيسية مختصرة بالأحرف JAM
JavaScript -> Web Service APIs -> Markup
سنشرح كل واحدة على حدة لنفهم التقنية أكثر 👇
JavaScript
وهو العامل الأول في الJAMStack ويعتبر الجوهر للتقنية
هو المختص في بناء وتصميم صفاحات الموقع باستخدام مكاتب الJavaScript مثل React و Vue
وهو العامل الأول في الJAMStack ويعتبر الجوهر للتقنية
هو المختص في بناء وتصميم صفاحات الموقع باستخدام مكاتب الJavaScript مثل React و Vue
Reusable APIs
و هو العامل المختص في تزويد الموقع بالمعلومات والميزات التي تحتاج ادخال معلومات من المستخدم.
في هذا الجزء يتم ربط موقعنا بقاعدة بيانات مثلا أو نظام مصادقة أو حتى نظام ادارة محتوى (headless) لتعبئة الموقع بالصفحات.
و هو العامل المختص في تزويد الموقع بالمعلومات والميزات التي تحتاج ادخال معلومات من المستخدم.
في هذا الجزء يتم ربط موقعنا بقاعدة بيانات مثلا أو نظام مصادقة أو حتى نظام ادارة محتوى (headless) لتعبئة الموقع بالصفحات.
Markups
وهو العامل الأخير. أو بالأحرى النتيجة الأخيرة من بعد الدمج بين أول عاملين.
النتيجة هي static pages. صفحات html فقط! غير مربوطة بأي نوع من قواعد البيانات أو السيرفرات
كيف ؟! 👇
وهو العامل الأخير. أو بالأحرى النتيجة الأخيرة من بعد الدمج بين أول عاملين.
النتيجة هي static pages. صفحات html فقط! غير مربوطة بأي نوع من قواعد البيانات أو السيرفرات
كيف ؟! 👇
خطوات عمل موقع JAMStack
1) نقوم ببناء templates لصفحات الموقع مثلا الصفحة الرئيسية، صفحة قائمة المقالات وصفحة المقالات
2) ثم نقوم باستخدام headless cms لانشاء المحتوى
3) في النهاية نستعمل static site generator لجلب جميع البيانات من الcms ثم نبني صفحات html منهم جاهزة للرفع.
1) نقوم ببناء templates لصفحات الموقع مثلا الصفحة الرئيسية، صفحة قائمة المقالات وصفحة المقالات
2) ثم نقوم باستخدام headless cms لانشاء المحتوى
3) في النهاية نستعمل static site generator لجلب جميع البيانات من الcms ثم نبني صفحات html منهم جاهزة للرفع.
في الشكل الطبيعي لمواقع الdynamic. سيتكون موقعك من التالي:
-index.php
-blog.php
-post.php
في الJAMStack ستكون النتيجة التالية
-index.html
-blog.html
-post1.html
-post2.html
-post3.html
... وهكذا
وفي كل مرة تضيف مقالة جديدة يجب أن تبني موقعك مرة أخرى.
-index.php
-blog.php
-post.php
في الJAMStack ستكون النتيجة التالية
-index.html
-blog.html
-post1.html
-post2.html
-post3.html
... وهكذا
وفي كل مرة تضيف مقالة جديدة يجب أن تبني موقعك مرة أخرى.
ما الفائدة التي حصلنا عليها؟
1) استطعنا بناء موقع بسهولة جدا ويمكن تحديث معلوماته من دون تعديل الكود
2) الموقع فقط html يعني سرعة تحميل سريعة جدا
3) وبما انه فقط html يعني أن محركات البحث ستجده بسهولة
4) الموقع نستطيع رفعه على سيرفرات CDN وهي سيرفرات سريعة جدا.
1) استطعنا بناء موقع بسهولة جدا ويمكن تحديث معلوماته من دون تعديل الكود
2) الموقع فقط html يعني سرعة تحميل سريعة جدا
3) وبما انه فقط html يعني أن محركات البحث ستجده بسهولة
4) الموقع نستطيع رفعه على سيرفرات CDN وهي سيرفرات سريعة جدا.
أهم المصادر والأدوات التي تحتاجها لبناء موقع JAMStack
1) Static Site Generator
وانا انصح ب gatsby.com و nextjs.org
2) Headless CMS
وانا انصح ب strapi.io و contentful.com
3) CDN
وانا انصح بnetlify.com
1) Static Site Generator
وانا انصح ب gatsby.com و nextjs.org
2) Headless CMS
وانا انصح ب strapi.io و contentful.com
3) CDN
وانا انصح بnetlify.com
من المواقع التي طورتها بنفسي في السابق باستخدام الJAMStack
ugaritpublishing.com
تم تطوريها باستخدام gatsby + Drupal
ugaritpublishing.com
تم تطوريها باستخدام gatsby + Drupal
من المواقع المشهورة التي تستدخم JAMStack
1) leagueoflegends.com
2) figma.com
3) digitalocean.com
4) reactjs.org
5) freecodecamp.org
1) leagueoflegends.com
2) figma.com
3) digitalocean.com
4) reactjs.org
5) freecodecamp.org
في النهاية، أعتذر لكم على الإطالة لكن لم استطع أن اختصر أكثر و أشرح كل ما هو مهم بنفس الوقت.
شكرا لكل شخص قرأ الthread بالكامل و اتمنى أن يكون قد استدفتم منه و قد نال اعجابكم
لا تنسو تعملو retweet لتعم الفائدة للجميع
لا تتردو في طرح الأسئلة و التعليقات 👇
شكرا لكل شخص قرأ الthread بالكامل و اتمنى أن يكون قد استدفتم منه و قد نال اعجابكم
لا تنسو تعملو retweet لتعم الفائدة للجميع
لا تتردو في طرح الأسئلة و التعليقات 👇
جاري تحميل الاقتراحات...