آموزش AstroJS 101: Frontends سریع و درخشان بسازید!

AstroJS 101: Build Blazing Fast Frontends!

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: با Astro شروع کنید و قدرت ساخت فرانت‌اندهای فوق‌العاده سریع با چندین فریمورک را در یک باز کنید. یاد بگیرید که از React، Preact، Svelte، Vue و Beyond در برنامه Astro خود استفاده کنید. جزایر اجزا را درک کنید: معماری وب مدرن برای ساخت وب سایت های سریعتر. ساخت برنامه های کاربردی مدرن در دنیای واقعی. با Astro شروع کنید: یکی از سریع‌ترین کتابخانه‌های Frontend موجود در بازار. هیدراتاسیون مسئولانه و چرایی اهمیت آن را درک کنید. نحوه عملکرد جزایر جزء در Astro را بیاموزید. رفتار نشانه گذاری اجزای Astro، سبک ها و اسکریپت ها را درک کنید. بیاموزید که "صفر جاوا اسکریپت" در اصطلاحات عملی به چه معناست. سینتکس قالب قدرتمند Astro و تفاوت آن با JSX را بیاموزید. پیاده سازی Component Islands خود را از ابتدا بسازید. پیش نیازها: شما قبلاً HTML، CSS و جاوا اسکریپت را می دانید اصول اولیه Typescript را می دانید، به عنوان مثال، می دانید که چه نوع هایی هستند.

آیا از عملکرد ضعیف وب خسته شده اید؟ آیا از فریمورک‌های سنگین جاوا اسکریپت که وب‌سایت‌هایتان را به هم می‌ریزند ناامید هستید؟ زمان انقلاب فرا رسیده است و Astro رهبری این کار را بر عهده دارد!


بیان مشکل: در دنیای پر سرعت توسعه وب، سرعت و کارایی همه چیز هستند. فریمورک‌های سنتی جاوا اسکریپت اغلب عملکرد را قربانی انعطاف‌پذیری می‌کنند، و توسعه‌دهندگان را با سایت‌های متورم و زمان بارگذاری کند می‌گذارند. Astro با قرار دادن سرعت در خط مقدم بازی را تغییر می‌دهد و به توسعه‌دهندگانی مانند شما قدرت می‌دهد تا وب‌سایت‌های برق آسا را ​​به راحتی ایجاد کنند.


بررسی اجمالی دوره: در این دوره آنلاین جامع به ما بپیوندید که در آن Astro را، چارچوب جاوا اسکریپت تغییر دهنده بازی که برای سرعت ساخته شده است، راز زدایی می کنیم. چه یک توسعه‌دهنده با تجربه باشید و چه به تازگی سفر خود را شروع کرده‌اید، بینش ارزشمندی در مورد اینکه چگونه Astro به شما قدرت می‌دهد تا وب‌سایت‌هایی کارآمد بسازید به دست خواهید آورد.


در پایان دوره، درک عمیقی از Astro به دست خواهید آورد، و مقدمه ای قوی با Astro خواهید داشت - چارچوبی که برای سرعت طراحی شده است.


نکات برجسته:

  1. Astro Fundamentals :

    • از قدرت Astro برای ساختن وب سایت شخصی خود از ابتدا استفاده کنید.

    • محیط توسعه محلی را بدون زحمت راه اندازی کنید.

  2. تسلط جزایر مؤلفه :

    • در معماری پیشگامانه جزایر جزایر Astro عمیقاً شیرجه بزنید.

    • دریابید که چگونه Astro رابط کاربری شما را به اجزای کوچکتر و ایزوله استخراج می‌کند و از زمان بارگذاری سریع و بی‌نظیر اطمینان حاصل می‌کند.

    • با استفاده از چارچوب‌های مورد علاقه خود مانند React، Vue، Svelte و Tailwind CSS، از انعطاف‌پذیری Astro استفاده کنید.

  3. اطلاعات عملی جاوا اسکریپت:

    • مفهوم "جاوا اسکریپت صفر" و پیامدهای دنیای واقعی آن را ابهام زدایی کنید.

    • درک کنید که چرا حذف سربار زمان اجرا جاوا اسکریپت یک تغییر بازی برای عملکرد وب است.

  4. تسلط بر اجزای Astro:

    • با نشانه‌گذاری مؤلفه‌های Astro، سبک‌ها و اسکریپت‌ها عملاً استفاده کنید.

    • پتانسیل کامل نحو الگوی Astro را جدا از JSX باز کنید.

  5. جزایر مؤلفه را آزاد کنید:

    • در هسته معماری Astro شیرجه بزنید و جزایر جزء خود را از ابتدا بسازید.

    • جادوی جزایر اجزای Astro و نقش محوری آنها در توسعه وب را درک کنید.

  6. هیدراتاسیون بهینه:

    • آبرسانی مسئولانه و چرایی اهمیت آن برای تجربه یکپارچه کاربر را بررسی کنید.

  7. مزیت جزیره:

    • درکی عمیق از اینکه چرا جزایر جزء برای توسعه وب مدرن ضروری هستند به دست آورید.


آینده توسعه وب را در آغوش بگیرید.

Astro فقط یک چارچوب دیگر نیست. این یک انقلاب در توسعه وب است. در پایان این دوره، مهارت‌ها و دانش لازم برای ایجاد وب‌سایت‌های سریع‌تر و کارآمدتر با Astro را خواهید داشت و رقابت خود را در گرد و غبار باقی می‌گذارید.


با عملکرد ضعیف وب خداحافظی کنید و به دوره جدیدی از توسعه وب سلام کنید!


اکنون ثبت نام کنید و با Astro استاد سرعت و نوآوری شوید!



سرفصل ها و درس ها

اولین برنامه Astro خود را بسازید Build your first Astro Application

  • (اضافی) PDF: Understanding Astro (500+ صفحه کتاب عملی برای Master Astro) (Extra) PDF: Understanding Astro (500+ Page Practical Book to Master Astro)

  • نمای کلی پروژه Project overview

  • NodeJS را نصب کنید و ویرایشگر کد خود را راه اندازی کنید Installing NodeJS and Setting up your Code Editor

  • Astro Install Wizard The Astro Install Wizard

  • درک ساختار پروژه Astro Understanding the Astro Project Structure

  • مقدمه ای بر Astro Pages Introduction to Astro Pages

  • آناتومی یک جزء اختر The Anatomy of an Astro Component

  • سبک های مؤلفه Astro Astro Component Styles

  • طرح بندی صفحات قابل استفاده مجدد Reusable Page Layouts

  • بزرگ کردن نام اجزاء Capitalising component names

  • تستی در مورد آنچه تاکنون آموخته اید A Test on What You've Learned So Far

  • دستورالعمل جهانی سبک The global style directive

  • فونت های سفارشی و CSS جهانی Custom fonts and global CSS

  • اجزای مستقل Astro Independent Astro components

  • افزودن اسکریپت های تعاملی به اجزای Astro Adding interactive scripts to Astro components

  • اضافه کردن یک تغییر موضوع تعاملی Adding an Interactive theme toggle

  • انتخابگر :global(). The :global() selector

  • مدیریت رویداد Event Handling

  • قالب بندی از طریق متغیرهای CSS Theming via CSS variables

  • دسترسی به اشیاء کلاینت جهانی Accessing global client objects

  • جادوی فیلمنامه ها The magic of scripts

  • تستی در مورد آنچه تاکنون آموخته اید A Test on What You've Learned So Far

  • استفاده از اسکریپت های درون خطی Leveraging inline scripts

  • مراقب انتخابگرهای جهانی در اسکریپت ها باشید Beware of Global Selectors in Scripts

  • استفاده از Markdown برای صفحات Using Markdown for Pages

  • نحوه پیمایش بین صفحات Astro How to Navigate between Astro Pages

  • یکنواختی از طریق Markdown Layouts Uniformity via Markdown Layouts

  • نوشتن طرح‌بندی در Astro Composing Layouts in Astro

  • لوازم جانبی Astro Component Astro Component Props

  • استفاده از ویژگی های Markdown Frontmatter Leveraging Markdown Frontmatter Properties

  • وضعیت ناوبری تعاملی با اسکریپت های Astro Interactive Navigation State with Astro Scripts

  • آهنگسازی اجزای Astro Composing Astro Components

  • تستی در مورد آنچه تاکنون آموخته اید A Test on What You've Learned So Far

  • ناوبری کارت اجزای کامل Complete Component Card Navigation

  • جریان داده الگوی Astro Astro's Template Flow of Data

  • سمت تاریک تعریف:vars The Dark Side of define:vars

  • نحوه بارگذاری چندین فایل در Astro - قسمت 1 How to Load Multiple Files in Astro - Part 1

  • نحوه بارگذاری چندین فایل در Astro - قسمت 2 How to Load Multiple Files in Astro - Part 2

  • تستی در مورد آنچه تاکنون آموخته اید A Test on What You've Learned So Far

  • استقرار یک سایت استاتیک Astro Deploying a static Astro site

  • وب سایت Astro ما چقدر سریع است؟ شوکر!!! How Fast is Our Astro Website? Shocker!!!

اجزای Astro در عمق Astro Components In-depth

  • معرفی Introduction

  • خستگی در زمان اجرا جاوا اسکریپت The Javascript Runtime Fatigue

  • حذف زمان اجرا جاوا اسکریپت Ditching the Javascript Runtime

  • Astro Component چیست؟ - قسمت 1 What is an Astro Component? - Part 1

  • نصب دستی Astro و رندر HTML Manual Astro Installation and Rendering HTML

  • سعادت ترکیب پذیری The Bliss of Composability

  • عنصر ریشه و سبک های محلی در ترکیب بندی ها The Root Element and Local Styles in Compositions

  • بالا بردن عنصر سر؟ Hoisting the Head Element?

  • بازبینی بخش Component Script Revisiting the Component Script Section

  • واکشی داده ها در Astro Fetching Data in Astro

  • بازبینی بخش Component Template Revisiting the Component Template Section

  • برچسب های پویا در Astro Dynamic Tags in Astro

  • جادوی شکاف ها در Astro The Magic of Slots in Astro

  • شباهت ها و تفاوت های JSX Similarities and Differences to JSX

  • Astro Component چیست؟ نتیجه What is an Astro Component? Conclusion

جزیره اجزای خود را بسازید Build Your Own Component Island

  • معرفی Introduction

  • تاریخچه مختصری از اینکه چگونه به اینجا رسیدیم A Brief History of how we Got Here

  • اصول رندر سمت مشتری (CSR) The Basics of Client-Side Rendering (CSR)

  • مزایا و معایب رندر سمت مشتری The PROs and CONs of Client-Side Rendering

  • اصول رندر سمت سرور (SSR) The Basics of Server-Side Rendering (SSR)

  • مزایا و معایب رندر سمت سرور (SSR) The PROs and CONs of Server-Side Rendering (SSR)

  • رندر سمت سرور با هیدراتاسیون سمت مشتری Server-Side Rendering with Client-Side Hydration

  • مزایای رندر سمت سرور با هیدراتاسیون سمت مشتری The Pros of Server-Side Rendering With Client-Side Hydration

  • هیدراتاسیون جزئی برای پیروزی Partial Hydration for the Win

  • جزایر کامپوننت از کجا می آیند؟ Where do Component Islands Come From?

  • اهداف و طراحی API Objectives and API Design

  • شروع کار با جزیره کوچک Getting Started with Mini-island

  • عنصر Content Template The Content Template element

  • اجرای هیدراتاسیون Hydration Implementation

  • اجرای جزئی هیدراسیون - قسمت 1 Partial Hydration Implementation - Part 1

  • اجرای جزئی هیدراسیون - قسمت 2 Partial Hydration Implementation - Part 2

  • مشتری: پیاده سازی هیدراتاسیون تنبل قابل مشاهده Client:visible Lazy Hydration Implementation

  • مشتری: Media Lazy Hydration Implementation Client:media Lazy Hydration Implementation

  • پشتیبانی از Vue Framework (مینی جزیره) Vue Framework Support (Mini-island)

  • استفاده از چارچوب Preact (جزیره کوچک) Preact Framework Usage (Mini-island)

  • نتیجه Conclusion

زندگی مخفی جزایر کامپوننت اختر The Secret Life of Astro Component Islands

  • معرفی Introduction

  • چه زمانی باید از یک کامپوننت چارچوب استفاده کنید؟ When Should you Use a Framework Component?

  • مرحله 1: یک سایت Astro بسازید Step 1: Build an Astro site

  • مرحله 2: یکپارچه سازی چارچوب را نصب کنید Step 2: Install the Framework Integration

  • مراحل 3 و 4: کامپوننت Framework را بنویسید و رندر کنید Steps 3 & 4: Write and Render the Framework Component

  • شروع با هیدراتاسیون مسئولانه Getting Started with Responsible Hydration

  • مشتری: دستورالعمل بار The Client:load Directive

  • راهنمای مشتری:فقط The Client:only Directive

  • دستورالعمل Client:idle The Client:idle Directive

  • دستورالعمل مشتری: قابل مشاهده The Client:visible Directive

  • دستورالعمل مشتری: رسانه The Client:media Directive

  • استفاده از چند فریمورک در Astro Using Multiple Frameworks in Astro

  • اشتراک ایالت بین جزایر جزء Sharing State between Component Islands

  • مدیریت لوازم (و کودکان) در اجزای چارچوب Handling Props (and Children) in Framework Components

  • استفاده از اسلات های متعدد در اجزای چارچوب Using Multiple Slots in Framework Components

  • اجزای چارچوب تودرتو Nested Framework Components

  • Astro Island Gotchas Astro Island Gotchas

  • نتیجه - چرا جزایر؟ Conclusion - Why islands?

نتیجه Conclusion

  • ممنون و خداحافظ (فعلا) Thank you, and Goodbye (for now)

نمایش نظرات

آموزش AstroJS 101: Frontends سریع و درخشان بسازید!
جزییات دوره
7 hours
92
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
476
4.8 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Ohans Emmanuel Ohans Emmanuel

مهندس ارشد نرم افزار و نویسنده منتشر شده.