لماذا Astro؟

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

الميزات

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

تشمل بعض النقاط البارزة:

• الجزر (EN): هندسة ويب قائمة على المكونات محسّنة لمواقع الويب القائمة على المحتوى.
• غير مرتبط بواجهة المستخدم (EN): يدعم React و Preact و Svelte و Vue و Solid و HTMX ومكونات الويب والمزيد.
• خادم أولاً (EN): ينقل التصيير المكلف بعيدًا عن أجهزة الزوار.
• صفر جافا سكريبت، افتراضيًا: كمية أقل من جافا سكريبت من جانب العميل لإبطاء موقعك.
• مجموعات المحتوى (EN): تنظيم والتحقق من صحة وتوفير أمان نوع TypeScript لمحتوى Markdown الخاص بك.
• قابل للتخصيص (EN): Partytown و MDX ومئات التكاملات للاختيار من بينها.

مبادئ التصميم

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

Astro هو…

1. قائم على المحتوى: تم تصميم Astro لعرض المحتوى الخاص بك.
2. خادم أولاً: تعمل مواقع الويب بشكل أسرع عند تصيير HTML على الخادم.
3. سريع افتراضيًا: يجب أن يكون من المستحيل بناء موقع ويب بطيء في Astro.
4. سهل الاستخدام: لا تحتاج إلى أن تكون خبيرًا لبناء شيء ما باستخدام Astro.
5. مركز على المطور: يجب أن تمتلك الموارد التي تحتاجها لتكون ناجحًا.

قائم على المحتوى

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

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

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

خادم أولاً

يستفيد Astro من تصيير الخادم بدلاً من تصيير جانب العميل في المتصفح قدر الإمكان. هذا هو نفس النهج الذي تستخدمه أطر الخادم التقليدية - PHP و WordPress و Laravel و Ruby on Rails وما إلى ذلك - منذ عقود. لكنك لست بحاجة إلى تعلم لغة خادم ثانية لفتحها. مع Astro، كل شيء لا يزال مجرد HTML و CSS و JavaScript (أو TypeScript، إذا كنت تفضل ذلك).

هذا النهج يتناقض مع أطر JavaScript الحديثة الأخرى مثل Next.js و SvelteKit و Nuxt و Remix وغيرها. تم بناء هذه الأطر لتصيير جانب العميل لموقعك بالكامل وتتضمن تصيير الخادم بشكل أساسي لمعالجة مخاوف الأداء. وقد تم تسمية هذا النهج باسم تطبيق الصفحة الواحدة (SPA)، على النقيض من نهج تطبيق الصفحات المتعددة (MPA) الخاص بـ Astro.

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

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

سريع افتراضيًا

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

• كل 100 مللي ثانية أسرع → 1% زيادة في التحويلات (Mobify، ربح +380,000 دولار سنويًا)
• أسرع بنسبة 50% → مبيعات أكثر بنسبة 12% (AutoAnything)
• أسرع بنسبة 20% → تحويلات أكثر بنسبة 10% (Furniture Village)
• أسرع بنسبة 40% → زيادة في الاشتراكات بنسبة 15% (Pinterest)
• أسرع بمقدار 850 مللي ثانية → تحويلات أكثر بنسبة 7% (COOK)
• كل ثانية أبطأ → عدد أقل من المستخدمين بنسبة 10% (BBC)

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

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

يمكن لموقع Astro التحميل بشكل أسرع بنسبة 40% مع جافا سكريبت أقل بنسبة 90% من نفس الموقع المبني مع إطار عمل React الأكثر شيوعًا. لكن لا تأخذ كلمتنا فقط: شاهد أداء Astro يترك Ryan Carniato (منشئ Solid.js و Marko) في حالة من الذهول.

سهل الاستخدام

هدف Astro هو أن يكون في متناول كل مطور ويب. تم تصميم Astro ليكون مألوفًا وسهل الاستخدام بغض النظر عن مستوى المهارة أو الخبرة السابقة في تطوير الويب.

لغة واجهة المستخدم .astro هي مجموعة شاملة من HTML: أي HTML صالح هو صياغة قوالب Astro صالحة! لذا، إذا كنت تستطيع كتابة HTML، يمكنك كتابة مكونات Astro! ولكنها أيضًا تجمع بين بعض ميزاتنا المفضلة المستعارة من لغات المكونات الأخرى مثل تعبيرات JSX (React) وتنطيق CSS افتراضيًا (Svelte و Vue). هذا القرب من HTML يجعل أيضًا من السهل استخدام التحسين التدريجي وأنماط الوصول الشائعة دون أي عبء إضافي.

ثم تأكدنا من أنه يمكنك أيضًا استخدام لغات مكونات واجهة المستخدم المفضلة لديك التي تعرفها بالفعل، وحتى إعادة استخدام المكونات التي قد تكون لديك بالفعل. React و Preact و Svelte و Vue و Solid وغيرها، بما في ذلك مكونات الويب، مدعومة جميعها لتأليف مكونات واجهة المستخدم في مشروع Astro.

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

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

مركز على المطور

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

يستثمر Astro في أدوات المطور مثل تجربة CLI رائعة منذ لحظة فتح الطرفية، وإضافة VS Code الرسمية لتمييز الصياغة، و TypeScript و Intellisense، والوثائق التي تتم صيانتها بنشاط من قبل مئات المساهمين في المجتمع والمتوفرة بـ 14 لغة.

مجتمعنا الترحيبي والمحترم والشامل على Discord جاهز لتقديم الدعم والتحفيز والتشجيع. افتح موضوع #support للحصول على مساعدة في مشروعك. قم بزيارة قناة #showcase المخصصة لمشاركة مواقع Astro الخاصة بك، ومنشورات المدونة، ومقاطع الفيديو، وحتى الأعمال قيد التقدم للحصول على ملاحظات آمنة ونقد بناء. شارك في الأحداث الحية المنتظمة مثل مكالمة المجتمع الأسبوعية، “Talking and Doc’ing”، واجتماعات API/الأخطاء.

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