معرفی Redwood.js: توسعه سریع برنامه با React

Redwood.js React، GraphQL و Prisma را برای توسعه سریع برنامه با الهام از Ruby on Rails متحد می کند. بیایید نگاهی عملی به Redwood.js داشته باشیم.

• برنامه نمونه Redwood را راه اندازی کنید
• مسیریابی با Apollo GraphQL
• افزودن و پیوند دادن یک صفحه
• کار با Redwood.js back end
• افزودن توابع CRUD
• GraphQL
• نتیجه‌گیری

یکی از بزرگترین چالش‌های ساخت یک برنامه وب، انتخاب فناوری‌هایی است که استفاده می‌کنید و ادغام آن‌ها در یک پشته کاری. Redwood.js یک چارچوب مبتنی بر React است که یک پشته خارج از جعبه را ارائه می‌کند، بنابراین می‌توانید با فناوری‌های اثبات‌شده‌ای که قبلاً به خوبی در چارچوب ادغام شده‌اند کار کنید.

Redwood.js React، GraphQL و Prisma را برای مدیریت UI، API و پایداری داده برنامه شما متحد می‌کند. در اطراف این هسته ابزارهای کمکی و قابلیت های داخلی مانند تست و ورود به سیستم وجود دارد. پشتیبانی خط فرمان برای چارچوب هایی مانند Auth0 و TailwindCSS. و توانایی هدف قرار دادن هر دو استقرار بدون سرور و IaaS (Infrastructure-as-a-Service).

اگر به دنبال راه ساده‌تری برای ساخت برنامه‌های مبتنی بر React هستید، Redwood.js می‌تواند انتخاب خوبی باشد. برای معرفی عملی Redwood به ادامه مطلب بروید.

برنامه نمونه Redwood را راه اندازی کنید

برای راه اندازی یک پروژه جدید Redwood، به نخ و نسخه LTS Node.js روی دستگاه توسعه شما نصب شده است. با وارد کردن دستور نشان داده شده در فهرست ۱، یک برنامه جدید ایجاد کنید.

yarn create redwood-app ./redwood-demo
cd ./redwood-demo
yarn rw dev

هنگام بازدید از localhost:8910 در مرورگر خود، صفحه خوشامدگویی را که در شکل ۱ نشان داده شده است، دریافت خواهید کرد. (پارامترهایی مانند پورت با فایل پیکربندی redwood.toml پیکربندی می شوند.)

شکل ۱. صفحه خوش آمدگویی Redwood.js.

یک صفحه در خط فرمان Redwood اضافه کنید

Redwood.js دارای قابلیت افزودن صفحات و مسیرها از خط فرمان است. صفحه خوش آمدگویی در شکل ۱ توسط فریمورک تعبیه شده است – هیچ فایل واقعی پشتوانه آن وجود ندارد. ما می توانیم صفحه فرود خود را با وارد کردن دستور زیر ایجاد کنیم:

yarn redwood generate page welcome /

در اینجا، فرم کلی دستورات Redwood را مشاهده می کنید. می گوید: صفحه ای به نام خوش آمدید با مسیر اصلی (/) ایجاد کنید. اکنون، اگر از localhost:8910 بازدید کنید، یک صفحه بسیار ابتدایی با عنوان “WelcomePage” دریافت خواهید کرد. Redwood در ترجمه مسیرها از PascalCase استفاده می‌کند و کلمه Page/web/src/pages/WelcomePage/WelcomePage.js بیابید.

معماری تمام پشته Redwood

مانند سایر چارچوب‌های جاوا اسکریپت تمام پشته (مانند Next و SvelteKit)، Redwood برنامه را به دو بخش تقسیم می‌کند: قسمت جلویی و انتهای پشتی. فایل‌هایی که از قسمت جلویی پشتیبانی می‌کنند در فهرست /web زندگی می‌کنند، در حالی که سمت سرور توسط فهرست /api مدیریت می‌شود. Yarn همچنین این دایرکتوری ها را به عنوان فضای کاری درک می کند و می توانید از نام آنها به عنوان هدف در هنگام افزودن وابستگی ها استفاده کنید. از این نظر، شما واقعاً در حال ساخت دو برنامه مختلف هستید: یک سرور و یک مشتری. این دو برنامه از طریق درخواست‌های RESTful با هم تعامل دارند.

مسیریابی با Apollo GraphQL

خود صفحه خوش آمدید هنوز خیلی جالب نیست، اما ما بیشتر علاقه مندیم که Redwood چگونه مسیریابی را مدیریت می کند. می توانید مسیرهای برنامه خود را در /web/src/Routes.js پیدا کنید، همانطور که در فهرست ۲ نشان داده شده است.

import { Router, Route } from '@redwoodjs/router'

const Routes = () => {
  return (
    <Router>
      <Route path="/" page={WelcomePage} name="welcome" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

فهرست ۲ نشان می دهد که شما از روتر Redwood.js استفاده می کنید، که مشابه راه حل های دیگری مانند روتر React، اما دارای برخی ویژگی های متمایز است. به طور کلی، هر ورودی Route یک نقشه بین مسیر URL و مؤلفه صفحه ارائه می دهد که محتوای آن مسیر را ارائه می دهد.

یک ویژگی منحصر به فرد در مورد روتر این است که توسط کتابخانه دولتی Apollo GraphQL هدایت می شود. می‌توانید نحوه تنظیم این مورد را در /web/src/App.js، که جزء اصلی برنامه است، مشاهده کنید. لیست ۳ قسمت مربوطه از کد را نشان می دهد.

<RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
      <RedwoodApolloProvider>
        <Routes />
      </RedwoodApolloProvider>
    </RedwoodProvider>

Redwood بیشتر جزئیات را از برنامه‌نویس برنامه پنهان می‌کند. از Apollo GraphQL برای مدیریت وضعیت برنامه، از جمله مسیریابی استفاده می کند.

افزودن و پیوند دادن یک صفحه

ما یک صفحه جدید برای فهرست کردن اشعار آهنگ ایجاد می کنیم. برای شروع، صفحه را با وارد کردن موارد زیر در خط فرمان اضافه کنید:

yarn redwood generate page songs

اکنون، همانطور که در فهرست ۴ نشان داده شده است، می توانید با استفاده از مؤلفه Link پیوندی در صفحه خوش آمدید ایجاد کنید.

import { Link, routes } from '@redwoodjs/router'
//...
<h2>Go to <Link to={routes.songs()}>Songs</Link></h2>

توجه داشته باشید که اگر برنامه را در حالت برنامه‌نویس در پس‌زمینه اجرا می‌کنید، به‌طور خودکار همه تغییرات شما را منعکس می‌کند.

اکنون، می‌توانید روی پیوند کلیک کنید و به صفحه آهنگ‌ها بروید، که شامل یک صفحه خوش‌آمدگویی اولیه نیز می‌شود. در حالی که در اینجا وارد آن نمی‌شویم، Redwood.js از طرح‌بندی‌هایی پشتیبانی می‌کند، که می‌توانید آن‌ها را در بسیاری از صفحات اعمال کنید تا نیاز به کد boilerplate را کاهش دهید.

کار با Redwood.js back end

اکنون، بیایید نگاهی به انتهای Redwood.js بیاندازیم. Redwood از Prisma ORM برای نقشه‌برداری به پایگاه داده استفاده می‌کند و این شامل SQLite به عنوان یک پایگاه داده در محل برای توسعه. (توجه داشته باشید که Redwood از این نظر شبیه Blitz.js است.) ما می‌توانیم با باز کردن فایل در Blitz.js یک طرح برای صفحه آهنگ‌های خود اضافه کنیم. code>api/db/schema.prism و افزودن ورودی نشان‌داده‌شده در فهرست ۵. (می‌توانید نمونه از پیش موجود، مدل UserExample را حذف کنید.)

model Song {
  id Int @id @default(autoincrement())
  name String @unique
  writers SongToWriter[]
}

اگر با ابزارهای نگاشت شی – رابطه ای مانند Prisma آشنایی ندارید، ممکن است تعجب کنید که لیست ۵ چه می کند. در اصل، یک مدل داده Song ایجاد می کند که برای ترجمه بین برنامه کاربردی و ذخیره داده استفاده می شود. (برای اطلاعات بیشتر درباره مدل‌های داده در Prisma، به اسناد Prisma مراجعه کنید. a>.)

import SongCell from 'src/components/Song/SongCell'

const SongPage = ({ id }) => {
  return <SongCell id={id} />
}

export default SongPage

یک سلول جزء ویژه‌ای است که Redwood.js برای ساده‌سازی حالت‌های مختلف یک نما (بارگیری، خالی، خطا، و عادی) ارائه می‌کند. این یک راه مفید برای مدیریت وضعیت به روش معمولی است. می‌توانید درباره سلول‌ها بیشتر بیاموزید در مستندات Redwood.js.

SongCell شبیه چیزی است که در فهرست ۷ می بینید.

import Song from 'src/components/Song/Song'

export const QUERY = gql`
  query FindSongById($id: Int!) {
    song: song(id: $id) {
      id
      name
    }
  }
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Song not found</div>
export const Failure = ({ error }) => (
  <div className="rw-cell-error">{error.message}</div>
)
export const Success = ({ song }) => {
  return <Song song={song} />
}

در اینجا، مؤلفه چندین توابع مختلف را صادر می کند، که خروجی آنها عناصر JSX متفاوت است. این توابع توسط طرح‌بندی Redwood.js برای خروجی UI صحیح بسته به وضعیت استفاده می‌شوند. توجه داشته باشید که در صورت موفقیت، Redwood.js کارهای سنگین را به مؤلفه اصلی Song واگذار می کند، جایی که تمام کار واقعی انجام می شود. مؤلفه Song در قالبی مشابه کار می‌کند و از GraphQL برای به‌دست‌آوردن و دستکاری داده‌ها از ذخیره‌گاه داده بر اساس یک شی داده‌ای که نما را هدایت می‌کند، استفاده می‌کند. (اگر با الگوی MVC آشنا هستید، خوب دوباره اینجاست.) 

GraphQL

این برنامه از GraphQL برای پر کردن اشیاء داده استفاده شده توسط UI استفاده می کند. به عنوان مثال، در مؤلفه SongCell، مؤلفه Song با متغیر آهنگ پارامتری می‌شود، که توسط پرس و جوی graphql (QUERY) در آدرس هیدراته می‌شود. ابتدای منبع پرس و جو از Slug ID از URL استفاده می کند.

همانطور که در فهرست ۸ نشان داده شده است، Redwood.js کوئری های GraphQL را برای پشتیبانی از این موارد استفاده تولید می کند. درخواست‌ها در api/src/graphql/songs.sdl.ts ذخیره می‌شوند.

export const schema = gql`
  type Song {
    id: Int!
    name: String!
  }

  type Query {
    songs: [Song!]! @requireAuth
    song(id: Int!): Song @requireAuth
  }

  input CreateSongInput {
    name: String!
  }

  input UpdateSongInput {
    name: String
  }

  type Mutation {
    createSong(input: CreateSongInput!): Song! @requireAuth
    updateSong(id: Int!, input: UpdateSongInput!): Song! @requireAuth
    deleteSong(id: Int!): Song! @requireAuth
  }
`

فایل‌های SDL توضیحات طرحواره برای GraphQL API هستند. نکته اصلی فهرست ۸ این است که یک نقطه پایانی GraphQL برای هر بیت از عملکرد در اطراف توابع CRUD Song وجود دارد. این اعمال نقطه تعامل از انتهای جلو تا انتهای عقب هستند.

نتیجه گیری

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

خوشبختانه، Redwood.js تا حد زیادی در محدوده فناوری‌ها و کنوانسیون‌های شناخته شده باقی می‌ماند. می‌توانید از Redwood برای ساختن یک برنامه React-GraphQL-Prisma-RDBMS با پیش‌فرض‌های معقول استفاده کنید، که می‌تواند به عنوان سکوی راه‌اندازی برای توسعه نیازمندی‌های خاص‌تر باشد.

Redwood به گونه‌ای طراحی شده است که استقرار آن در انواع مختلف میزبان آسان باشد. به ویژه، امکان استقرار در محیط های بدون سرور مانند Netlify یا Vercel وجود دارد.

به عنوان یک یادداشت، متوجه شدم که ساختمان با Redwood.js یادآور Ruby on Rails است. یک دقیقه از زمانی که از آن فریم ورک استفاده کردم می گذرد، اما به ذهنم آمد. همانطور که مشخص است، Ruby on Rails الهام‌بخش Redwood.js بود. بنابراین، اگر از طرفداران Rails هستید، حتما به Redwood.js نگاهی بیندازید.