مروری بر Craftjs – کتابخانه مورد استفاده برای صفحه ساز

Summarize this content to 400 words in Persian Lang
ایجاد رابط های کاربری غنی و قابل تنظیم چالشی است که بسیاری از برنامه های کاربردی وب با آن مواجه هستند. توسعه‌دهندگان به راه‌حل‌هایی نیاز دارند که انعطاف‌پذیری، عملکرد و توسعه‌پذیری را فراهم کند، به‌ویژه برای ویرایشگرهای کشیدن و رها کردن، سازندگان صفحه فرود و ایجاد محتوای WYSIWYG. Craft.js را وارد کنید، یک چارچوب بدون سر برای ساخت این رابط های کاربری پیچیده با React. در این راهنما، با معماری Craft.js، گردش کار، اجزای سفارشی، مدیریت حالت و توسعه پذیری آشنا خواهیم شد.

1. مقدمه ای بر Craft.js

Craft.js یک چارچوب هدلس مبتنی بر React برای ساخت ویرایشگرهای رابط کاربری قدرتمند، انعطاف پذیر و قابل تنظیم است. این قابلیت کشیدن و رها کردن، مدیریت حالت، و ترکیب‌پذیری را ارائه می‌دهد و به توسعه‌دهندگان کنترل کاملی بر نحوه ظاهر و رفتار رابط کاربری می‌دهد. برخلاف بسیاری از ویرایشگرهای WYSIWYG خارج از جعبه، Craft.js یک رابط کاربری یا سبک از پیش تعریف‌شده ارائه نمی‌کند، و آن را برای پروژه‌هایی که به تجربیات بسیار مناسب نیاز دارند، ایده‌آل می‌کند.

Craft.js ساخته شده است تا ابزارهای مورد نیاز برای مدیریت درخت های مؤلفه به صورت پویا، ردیابی وضعیت اجزا و مدیریت کارآمد جریان های کاری ویرایشگر تعاملی را در اختیار توسعه دهندگان قرار دهد.

2. ویژگی های کلیدی Craft.js

قبل از غواصی در معماری، اجازه دهید به سرعت ویژگی‌های اصلی را که Craft.js را به یک انتخاب برجسته تبدیل می‌کند، مرور کنیم:

ترکیب پذیر و مدولار: هر قسمت از UI را می توان به عنوان یک جزء React تعریف کرد و آن را ماژولار و قابل استفاده مجدد می کند.

بی سر: Craft.js هیچ رابط کاربری داخلی ارائه نمی دهد، که به توسعه دهندگان اجازه می دهد تا سیستم های طراحی سفارشی را پیاده سازی کنند و ویرایشگر را برای نیازهای خاص تنظیم کنند.

مدیریت دولتی: این فریم ورک وضعیت همه اجزا را مدیریت می کند و ویژگی ها، طرح بندی و تعاملات را پیگیری می کند.

پشتیبانی از کشیدن و رها کردن: کامپوننت ها را می توان با استفاده از عملیات کشیدن و رها کردن، جابجا کرد، دوباره مرتب کرد، و تودرتو کرد.

عملکرد لغو/از نو: Craft.js پشتیبانی داخلی برای واگرد/دوباره، ردیابی همه تغییرات حالت ویرایشگر ارائه می دهد.

3. نمای کلی معماری

Craft.js حول یک سیستم قوی از گره ها ساخته شده است که مؤلفه هایی را در ویرایشگر نشان می دهد. عناصر اصلی معماری Craft.js به شرح زیر است:

سیستم گره

سیستم گره ستون فقرات Craft.js است. هر عنصر ارائه شده در ویرایشگر (خواه متن باشد، یک تصویر یا یک ظرف) به عنوان یک گره نمایش داده می شود. گره ها در یک درخت سلسله مراتبی، مشابه درخت DOM، که در آن هر گره می تواند دارای گره های والد و فرزند باشد، ساختار یافته است.

ویژگی های گره کلیدی:

لوازم جانبی: گره ها دارای ویژگی هایی مانند سبک ها، محتوا یا داده های طرح بندی هستند. اینها را می توان به صورت پویا به روز کرد.

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

رابطه والد/فرزند: گره ها را می توان برای تشکیل ساختارهای پیچیده تو در تو قرار داد و به توسعه دهندگان این امکان را می دهد تا روابط والد-فرزند را برای طرح بندی هایی مانند شبکه ها، فلکس باکس ها و غیره تعریف کنند.

گره‌ها بلوک‌های اساسی سازنده رابط کاربری هستند و Craft.js وضعیت هر گره را ردیابی می‌کند و امکان به‌روزرسانی‌های بی‌درنگ و تعاملات کاربر را فراهم می‌کند.

مدیریت دولتی با گره ها

وضعیت هر گره به صورت مرکزی با استفاده از API زمینه React مدیریت می شود. این حالت مرکزی به‌روزرسانی‌های کارآمد را امکان‌پذیر می‌سازد، زیرا تغییرات در یک گره در سرتاسر ویرایشگر بدون نیاز به ارائه مجدد دستی منتشر می‌شود. حالت تغییرناپذیر است و ادغام عملکرد واگرد/دوباره را آسان می کند.

Craft.js از مدیریت حالت مشابه Redux به صورت داخلی استفاده می کند و یک فروشگاه متمرکز برای تمام عملیات ویرایشگر فراهم می کند. این بدان معناست که هر اقدام کاربر، چه کشیدن یک مؤلفه، به‌روزرسانی لوازم، یا تنظیم مجدد عناصر طرح‌بندی، به عنوان یک اقدام به فروشگاه ارسال می‌شود.

موتور رندر

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

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

پلاگین و سیستم افزونهسیستم پلاگین در Craft.js به توسعه دهندگان این امکان را می دهد که ویرایشگر را با عملکردهای سفارشی گسترش دهند، مانند افزودن انواع گره های جدید، ایجاد کنترل کننده های رویداد جدید، یا تزریق عناصر UI سفارشی به رابط ویرایشگر.

4. گردش کار Craft.js

Craft.js چندین گردش کار را ارائه می دهد که آن را برای ساخت UI کارآمد می کند. اینها شامل نحوه طراحی اجزا، نحوه هماهنگ سازی حالت ها و نحوه عملکرد مدیریت رویداد است.

گردش کار طراحی کامپوننت

هنگام ساخت اجزا در Craft.js، مراحل کلیدی عبارتند از:

کامپوننت را تعریف کنید: یک کامپوننت React ایجاد کنید که نمایانگر بخشی از رابط کاربری شما باشد، مانند یک دکمه، جعبه متن یا تصویر.

کامپوننت را بپیچید: از قلاب useNode استفاده کنید تا کامپوننت را در ویرایشگر Craft.js قابل ویرایش کنید. این به آن اجازه می دهد که قابل کشیدن باشد و وضعیت آن مدیریت شود.

منطق سفارشی را اضافه کنید: تعریف کنید که کامپوننت هنگام تعامل با آن چگونه باید رفتار کند (مثلاً چگونه می توان قطعات را به صورت پویا به روز کرد).

import React from “react”;
import { useNode } from “@craftjs/core”;

const Button = ({ text, backgroundColor }) => {
const {
connectors: { connect, drag },
} = useNode();

return (
{
connect(drag(ref))
}}
style={{ backgroundColor }}
>
{text}

);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

گردش کار همگام سازی حالت

رندر اولیه: Craft.js درخت کامپوننت را مقدار دهی اولیه می کند و هر جزء را در حالت پیش فرض خود قرار می دهد.

به روز رسانی های ایالتی: هنگامی که کاربر با یک مؤلفه تعامل دارد (مانند کشیدن آن به مکان جدید یا تغییر یک ویژگی)، Craft.js اقدامات را به سیستم مدیریت داخلی خود ارسال می کند.

رندر مجدد: فقط مؤلفه هایی که تحت تأثیر تغییر قرار گرفته اند دوباره رندر می شوند. این تضمین می کند که حتی با رشد ویرایشگر، عملکرد بهینه باقی می ماند.

گردش کار مدیریت رویداد

Craft.js تمام تعاملات کاربر را به عنوان رویداد ردیابی می کند. اینها شامل عملیات کشیدن و رها کردن، به‌روزرسانی‌های پایه و سایر تعاملات رابط کاربری است.

اعزام رویداد: هر رویداد به سیستم مدیریت وضعیت ویرایشگر ارسال می شود، که سپس گره مناسب را به روز می کند.

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

5. مثال مفصل با اجزای سفارشی

بیایید گردش کار ایجاد اجزای سفارشی را یک قدم جلوتر ببریم. در این مثال، ما یک جزء کارت قابل ویرایش با متن و یک تصویر می سازیم که کاربران می توانند از طریق کنترل های پایه آن را تغییر دهند.

مولفه کارت را تعریف کنید

import React from “واکنش نشان دهند”; وارد کردن { useNode } از “@craftjs/core”; const Card = ({ imageSrc، عنوان، توضیحات }) => { const { connectors: { connect, drag }, actions: { setProp } } = useNode(); بازگشت (
{connect(drag(ref)) }} style={{ border: '1px solid #cccc', padding: '20px' }} >

{title}
{description}

);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اضافه کردن کارت به ویرایشگر

اکنون کامپوننت Card را با بسته بندی آن با مولفه Element از Craft.js به ویرایشگر خود اضافه می کنیم:

import React from “react”;
import { Editor, Frame, Element } from “@craftjs/core”;
import Card from “./components/Card”;

const App = () => {
return (

);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

6. سفارشی سازی و توسعه پیشرفته

Craft.js به توسعه دهندگان اجازه می دهد تا فراتر از قابلیت های اساسی کشیدن و رها کردن کامپوننت ها بروند. در اینجا چند تکنیک سفارشی سازی پیشرفته آورده شده است:

ساخت ویرایشگرهای سفارشی Prop

برای ایجاد یک ویرایشگر WYSIWYG کاملاً تعاملی، اغلب به کنترل‌های سفارشی نیاز دارید که به کاربران اجازه می‌دهد ویژگی‌های مؤلفه را به صورت پویا تنظیم کنند.

7. گردش کار Craft.js

در زیر فلوچارتی وجود دارد که نشان می‌دهد Craft.js چگونه رویدادها را پردازش می‌کند و اجزا را رندر می‌کند:

گردش کار رویداد

ایجاد کامپوننت:

کاربران می توانند اجزای یک جعبه ابزار را روی بوم اضافه کنند.
ویرایشگر وضعیت را مدیریت می کند و یک گره جدید برای هر جزء ایجاد می کند.

دستکاری مولفه ها:

کاربران می توانند مؤلفه ها را بکشند و رها کنند، که درخت گره را در وضعیت ویرایشگر به روز می کند.
به لطف مدیریت ایالت، ویژگی های اجزا را می توان در زمان واقعی ویرایش کرد.

رندرینگ:

Frame ساختار گره فعلی را می گیرد و آن را به عنوان یک نمایش بصری در Canvas ارائه می کند.
گره ها رندر خود را بر اساس تغییرات ایجاد شده از طریق ویرایشگر به روز می کنند.

تعامل:

اتصال دهنده ها به اجزا اجازه می دهند که مستقیماً با آنها تعامل داشته باشند (مثلاً تغییر اندازه، حرکت).
ویرایشگر تعاملات را ردیابی می‌کند و امکان پیاده‌سازی ویژگی‌هایی مانند لغو/دوباره را فراهم می‌کند.

8. بهترین روش ها برای کار با Craft.js

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

مدیریت کارآمد پروپ: اطمینان حاصل کنید که به‌روزرسانی‌های پایه کارآمد هستند تا از رندرهای مجدد غیرضروری جلوگیری شود.

از Deep Nesting اجتناب کنید: در حالی که Craft.js اجزای تو در تو را به خوبی مدیریت می کند، از سلسله مراتب بیش از حد پیچیده برای اطمینان از عملکرد بهینه خودداری کنید.

9. نتیجه گیری

Craft.js یک چارچوب قدرتمند برای ساخت ویرایشگرهای رابط کاربری قابل تنظیم است که به توسعه دهندگان انعطاف پذیری و کنترل بی نظیری بر نحوه ساختار UI می دهد. چه در حال ایجاد صفحه‌ساز، ویرایشگر ایمیل یا ابزار طراحی سفارشی باشید، Craft.js تمام بلوک‌های ساختمانی لازم برای مدیریت کارآمد طرح‌بندی‌ها، حالت‌ها و تعاملات پیچیده را فراهم می‌کند.

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

import React from "react";
import { useNode } from "@craftjs/core";

const Button = ({ text, backgroundColor }) => {
  const {
    connectors: { connect, drag },
  } = useNode();

  return (
     {
        connect(drag(ref))
      }}
      style={{ backgroundColor }}
    >
      {text}
    
  );
};

import React from "واکنش نشان دهند"; وارد کردن { useNode } از "@craftjs/core"; const Card = ({ imageSrc، عنوان، توضیحات }) => { const { connectors: { connect, drag }, actions: { setProp } } = useNode(); بازگشت (
    
 {connect(drag(ref)) }} style={{ border: '1px solid #cccc', padding: '20px' }} >
      
      
{title}
      
{description}
    
  );
};

import React from "react";
import { Editor, Frame, Element } from "@craftjs/core";
import Card from "./components/Card";

const App = () => {
  return (
    
      
        
          
        
      
    
  );
};

export default App;