logo
Auth

معماری پروژه های Large-Scale در ری‌اکت با استفاده از Next.js

دوره پیشرفته معماری پروژه های Large-Scale در ری‌اکت با استفاده از Next.js - React Query - Zustand - Typescript - Tailwind Css - Mock Service Worker - Storybook - Jest - React Testing Library - Cypress - CI/CD

Video Player Component

یکی از مباحث پر اهمیت در پیاده سازی هر اپلیکیشنی ، بحث معماری استفاده شده در اپلیکیشن هاست. به طور کلی معماری به این موضوع می پردازد که اپلیکیشن به چه نحوی پیاده سازی شود تا قابلیت نگه داری، قابلیت استفاده مجدد، قابلیت در دسترس بودن اپلیکیشن افزایش یابد. یکی از چالش های پیاده سازی زمانی است که اپلیکیشن رشد می کند در این حالت مدیریت کد و بخش های مختلف اپلیکشن پر اهمیت تر می شود. 

در این دوره پیاده سازی ورژن جدید پلتفرم آموزشی کلاسبن به شکل گام به گام آموزش داده می شود. از طراحی رابط کابری تا طراحی  معماری اپلیکیشن تا پیاده سازی جز به جز کامپوننت ها. 

تکنولوژی ها و فریم ورک های جذابی در این دوره استفاده شده است. این پروژه با استفاده از Next.js App Router پیاده سازی شده است. در کنار مفاهیم پیشرفته ری اکت و البته مفاهیم پروژه های Large-Scale. از TailwindCSS برای طراحی رابط کاربری استفاده می کنیم و البته از مفاهیم پیشرفته تر Tailwind برای ساخت بیش از 40 کامپوننت پیشرفته استفاده می شود. تست نویسی یکی دیگر از اجزای مهم اپلیکیشن های Large-Scale است. از React Testing Library - Jest و Cypress برای تست کامپوننت ها، unit test ها، integration test ها و end-to-end test ها استفاده می کنیم. بخش تست نویسی در این دوره یکی از جذاب ترین بخش های این دوره می باشد. در ادامه از Storybook برای مستند سازی کامپوننت ها هم استفاده می کنیم و نتیجه تست ها را در این ابزار ویژه به عنوان گزارش پیاده سازی می کنیم. State Mangement یکی دیگر از مهمترین بخش های هر سیستم سمت فرانت است. از Zustand برای مدیریت state ها استفاده می کنیم و علت استفاده از این ابزار را به طور کامل بررسی می کنیم. برای ارتباط با سرور و کال کردن API های ست سرور هم از React Query و Axios به همراه هم استفاده می کنیم که یکی از بهترین کتابخانه های ارتباط با سرور و کش کردن اطلاعات بازیابی شده از سرور می باشند. 

همین طور از Mock Server Worker استفاده می کنیم تا در صورتی که API های سمت سرور در دسترس نباشن بتوانیم فرآِیند توسعه را ادامه دهیم با دیتاهای غیر واقعی. این ابزار هم یکی از بهترین و پر استفاده ترین ابزارهاست. 

این پروژه با استفاده از Typescript پیاده سازی می شود و از تایپ های مختلفی برای ساخت این اپلیکیشن استفاده می کنیم. در انتهای دوره نحوه دیپلوی کردن پروژه در محیط عملیاتی بررسی می شود و از CI/CD به همراه GitLab استفاده می کنیم تا فرآیند Build  و Deploy در محیط عملیاتی به شکل اتوماتیک انجام شود. 
غیر از موارد گفته شده مطالب دیگری هم بررسی می شود از جمله طراحی آیکون پک برای پروژه و طراحی دیزاین به خصوص برای پروژه و ...
این دوره در واقع یکی از کاملترین و پروژه محورترین دوره های آموزش React در بازار است. امیدوارم که این دوره برای دوستان عزیز تجربه ای منحصر به فرد باشه. 
درود

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

  1. مقدمه
    9 دقیقه

  2. معرفی سیستم های Large-Scale
    18 دقیقه

  3. آماده سازی اولیه پروژه کلاسبن
    9 دقیقه

  4. فیچرهای Next.js App Router
    12 دقیقه

  5. معرفی Error, NotFound, Layout, Route segment
    18 دقیقه

  6. مفهوم dynamic routes
    8 دقیقه

Developed by:AmirHossein Salehpour
Copyright © 2023

All rights reserved