لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش 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 خواهید داشت - چارچوبی که برای سرعت طراحی شده است.
نکات برجسته:
Astro Fundamentals :
از قدرت Astro برای ساختن وب سایت شخصی خود از ابتدا استفاده کنید.
محیط توسعه محلی را بدون زحمت راه اندازی کنید.
تسلط جزایر مؤلفه :
در معماری پیشگامانه جزایر جزایر Astro عمیقاً شیرجه بزنید.
دریابید که چگونه Astro رابط کاربری شما را به اجزای کوچکتر و ایزوله استخراج میکند و از زمان بارگذاری سریع و بینظیر اطمینان حاصل میکند.
با استفاده از چارچوبهای مورد علاقه خود مانند React، Vue، Svelte و Tailwind CSS، از انعطافپذیری Astro استفاده کنید.
اطلاعات عملی جاوا اسکریپت:
مفهوم "جاوا اسکریپت صفر" و پیامدهای دنیای واقعی آن را ابهام زدایی کنید.
درک کنید که چرا حذف سربار زمان اجرا جاوا اسکریپت یک تغییر بازی برای عملکرد وب است.
تسلط بر اجزای Astro:
با نشانهگذاری مؤلفههای Astro، سبکها و اسکریپتها عملاً استفاده کنید.
پتانسیل کامل نحو الگوی Astro را جدا از JSX باز کنید.
جزایر مؤلفه را آزاد کنید:
در هسته معماری Astro شیرجه بزنید و جزایر جزء خود را از ابتدا بسازید.
جادوی جزایر اجزای Astro و نقش محوری آنها در توسعه وب را درک کنید.
هیدراتاسیون بهینه:
آبرسانی مسئولانه و چرایی اهمیت آن برای تجربه یکپارچه کاربر را بررسی کنید.
مزیت جزیره:
درکی عمیق از اینکه چرا جزایر جزء برای توسعه وب مدرن ضروری هستند به دست آورید.
آینده توسعه وب را در آغوش بگیرید.
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)
نمایش نظرات