راهنمای پذیرش MUI: بررسی اجمالی، مثال‌ها و جایگزین‌ها

نوشته شده توسط Nefe Emadamerho-Atori✏️

MUI یا Material UI یکی از بزرگترین و شناخته شده ترین کتابخانه های مؤلفه UI در فضای توسعه وب است. در سال 2014 راه اندازی شد و از آن زمان به طور گسترده برای ساخت وب سایت ها و برنامه ها مورد استفاده قرار گرفت.

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

بیا شروع کنیم.

MUI چیست؟

MUI یک کتابخانه کامپوننت React منبع باز است که بر اساس اصول طراحی UI/UX طراحی متریال گوگل ساخته شده است: به خاطر داشته باشید که اگرچه رابط کاربری Material UI بر اساس اصول طراحی متریال ساخته شده است، اما مترادف نیستند. در واقع، تیم MUI به طور خاص نام تجاری خود را به روز کرد تا سعی کند سردرگمی در مورد نام ها را کاهش دهد و ارتباط قوی با Google را از بین ببرد.

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

پس از محبوبیت سریع، Material UI امروزه به یکی از پرکاربردترین کتابخانه های مؤلفه UI تبدیل شده است. شرکت‌هایی مانند Auth0، Codementor، Medium، Nhnost و Shutterstock از MUI برای ساختن رابط‌ها و اجزای وب‌سایت‌ها و برنامه‌های خود استفاده می‌کنند.

می‌توانید از MUI برای ساختن پروژه‌های مختلف مانند داشبورد، صفحات فرود، وب‌سایت‌های نمونه کارها، فروشگاه‌های تجارت الکترونیک، برنامه‌های چت و شبکه‌های اجتماعی استفاده کنید – هیچ محدودیتی برای کارهایی که می‌توانید با آن انجام دهید وجود ندارد. از زمان نگارش این مقاله، آخرین نسخه MUI نسخه پیش انتشار v7 و نسخه پایدار توصیه شده v5.16.4 است.

در حالی که Material UI کتابخانه اجزای اصلی در اکوسیستم MUI است، راه حل های موجود دیگر عبارتند از:

• رابط کاربری Joy – جایگزینی برای MUI که بر اساس دستورالعمل های Joy Design به جای دستورالعمل های طراحی متریال ساخته شده است
• رابط کاربری پایه – برخلاف MUI و Joy UI، Base UI از رویکرد بدون سر پیروی می کند، به این معنی که هیچ یک از اجزای UI آن با سبک عرضه نمی شود. این به شما کنترل بیشتری بر CSS و استایل کامپوننت ها می دهد
• MUI X – مجموعه ای از اجزای پیشرفته React برای ساخت برنامه های پیچیده و غنی از داده. این شامل اجزایی مانند انتخابگر تاریخ و زمان، شبکه های داده و نمودارها است

بیشتر خواندن:

• برترین کتابخانه ها و کیت های React UI
• راهنمای طراحی متریال با React
• برنامه Next.js خود را با استفاده از Auth0 احراز هویت کنید

چرا از MUI استفاده کنید

بیایید در مورد دلایلی بحث کنیم که چرا باید MUI را به عنوان کتابخانه مؤلفه React خود در نظر بگیرید.

توسعه را سرعت می بخشد

MUI بیش از 50 مؤلفه را ارائه می دهد که می توانید آنها را به پروژه خود وصل کنید. این کار نیاز به ساخت کامپوننت‌ها از ابتدا، نوشتن تست برای آن مؤلفه‌ها و حفظ پایگاه کد فردی آنها را حذف می‌کند. درعوض، می‌توانید این اجزای آماده را برای جمع‌آوری سریع طرح‌بندی‌ها و رابط‌های پیچیده ادغام کنید.

ثبات برند را ترویج می کند

MUI بر اساس دستورالعمل‌های طراحی متریال، مجموعه‌ای از اصول طراحی و بهترین شیوه‌های توسعه‌یافته توسط Google برای کمک به برندها در ایجاد تجربیات کاربرپسند و ارتقای ثبات ایجاد شده است. استفاده از MUI به شما این امکان را می دهد که یک رابط بصری دلپذیر در سراسر برنامه های خود ایجاد کنید.

دسترسی به وب را تحمیل می کند

اجزای MUI به طور کامل با استانداردهای دسترسی WCAG مطابقت دارند:

• کاربران می توانند با صفحه کلید در میان آنها حرکت کنند
• اجزای MUI از ویژگی‌های ARIA مناسب برای بهبود سازگاری با صفحه‌خوان استفاده می‌کنند
• طرح زمینه پیش‌فرض MUI با کنتراست رنگی کافی برای رعایت دستورالعمل‌های دسترسی طراحی شده است
• این مؤلفه هایی مانند VisuallyHidden، که به شما امکان می دهد عناصر را به صورت بصری پنهان کنید و در عین حال آنها را برای فناوری کمکی در دسترس قرار دهید

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

آزمایش شده در نبرد و به طور گسترده پذیرفته شده است

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

از آنجایی که MUI به طور گسترده در تولید توسط شرکت‌هایی در هر اندازه، از استارت‌آپ‌ها گرفته تا Fortune 500s استفاده می‌شود، قابل اعتماد بودن آن در مقیاس نیز ثابت شده است.

دارای جامعه و اکوسیستم بزرگ و فعال است

MUI یک جامعه توسعه دهندگان بزرگ دارد که تقریباً سه هزار مشارکت کننده منبع باز و 92.2 هزار ستاره GitHub را شامل می شود. اندازه انجمن به این معنی است که می توانید به راحتی آموزش های مبتدی و سایر منابع آموزشی، قالب های شروع رایگان و پولی و موارد دیگر را بیابید.

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

اگر می‌توانید یک پروژه موجود حاوی اجزایی را که می‌خواهید استفاده کنید پیدا کنید، به جای ساختن از ابتدا، می‌توانید کد آن پروژه را شبیه‌سازی کنید – با فرض اینکه منبع باز است – و تنظیمات را مطابق با نیازهای خود انجام دهید.

دارای مجموعه بزرگی از تم ها و قالب ها است

MUI چندین الگوی رسمی برای انواع برنامه های معمولی مانند داشبورد مدیریت، صفحات ورود به سیستم و صفحات فرود ارائه می دهد. انجمن همچنین قالب های رایگان و پولی دیگری را ارائه می دهد. استفاده از قالب های MUI می تواند به شما کمک کند در زمان صرفه جویی کنید و سریعتر به بازار بروید.

پشتیبانی از چندین فریمورک

می‌توانید MUI را با فریم‌ورک‌های مختلفی مانند React Native، Next.js، Vue و غیره ادغام کنید. سازگاری آن با ابزارهای مختلف آن را به یک انتخاب برتر برای توسعه دهندگان تبدیل می کند.

بیشتر خواندن:

• استفاده از MUI در React Native
• شروع کار با MUI و Next.js

چرا از MUI استفاده نکنیم

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

منحنی یادگیری

منحنی یادگیری MUI می تواند شیب دار باشد، به خصوص برای موارد استفاده پیشرفته و توسعه دهندگانی که تازه وارد React یا توسعه مبتنی بر کامپوننت هستند. ممکن است کمی زمان و تلاش لازم باشد تا با مفاهیم، ​​API و بهترین شیوه های MUI آشنا شوید.

خوشبختانه، MUI مستندات جامعی با توضیحات و مثال‌های دقیق برای ساده‌سازی فرآیند توسعه ارائه می‌کند.

اندازه بسته

مجموعه گسترده مؤلفه‌ها و سبک‌های MUI می‌تواند به اندازه بسته بزرگ‌تر منجر شود، که ممکن است بر زمان بارگذاری اولیه برنامه شما تأثیر بگذارد. اگر روی یک پروژه حیاتی کار می کنید، MUI ممکن است بهترین انتخاب نباشد.

طراحی با نظر و نیازهای سفارشی

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

در حالی که می‌توانید تم پیش‌فرض MUI را سفارشی کنید و از اصول طراحی متریال منحرف شوید، این می‌تواند چالش‌برانگیز و زمان‌بر باشد، به‌ویژه به این دلیل که گزینه‌های سفارشی‌سازی زیادی برای مرتب‌سازی وجود دارد. در زیر با جزئیات بیشتری درباره شخصی سازی MUI صحبت خواهیم کرد.

ویژگی های MUI

بیایید برخی از ویژگی‌های MUI را بررسی کنیم.

اجزای از پیش تعریف شده

MUI اجزای مختلف از پیش ساخته شده را ارائه می دهد که تقریباً تمام جنبه های یک رابط کاربری مدرن را پوشش می دهد. این مولفه ها شامل دکمه ها، ورودی ها، لغزنده ها، فرم ها، نوارهای کناری، جداول، راهنمای ابزار و موارد دیگر می باشد.

در اینجا یک نمونه از Button جزء در عمل:

import Button from '@mui/material/Button';

export default function BasicButtons() {
  return (
    <>
    <Button variant="text">Text</Button>
    <Button variant="contained">Contained</Button>
    <Button variant="outlined">Outlined</Button>
    </>
  );
}

بیشتر خواندن:

• استفاده از Material UI با React Hook Form
• با react-pro-sidebar و MUI نوارهای فرعی پاسخگو ایجاد کنید
• استفاده از Material-table در React برای ساخت جداول داده غنی از ویژگی

از سفارشی سازی ها پشتیبانی می کند

MUI به شما اجازه می دهد تا ظاهر اجزای خود را کنترل کنید. شما می توانید ویژگی هایی مانند پالت رنگ، تایپوگرافی، فونت، فاصله و نقاط شکست را برای مطابقت با نیازهای برند خود سفارشی کنید. MUI a ThemeProvider جزء و الف createTheme روشی که می توانید برای ایجاد یک تم سفارشی استفاده کنید.

در اینجا نحوه ایجاد یک تم سفارشی آمده است. ابتدا شیء تم سفارشی را با تعریف کنید createTheme:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: "#3f51b5", // Change the primary color
    },
    secondary: {
      main: "#f50057", // Change the secondary color
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', // Change the font family
    fontSize: 14, // Change the base font size
  },
  // Add more customizations as needed
});

سپس، برنامه React خود را با ThemeProvider کامپوننت و پاس در موضوع سفارشی:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  // Your custom theme configuration
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* app content */}
      {/* MUI components will use the custom theme */}
    </ThemeProvider>
  );
}

بیشتر خواندن:

• 3 روش برای اضافه کردن فونت های سفارشی به پروژه MUI

طراحی تعاملی

MUI ویژگی‌های مختلفی را ارائه می‌کند که به شما کمک می‌کند طرح‌بندی‌های پاسخگو بسازید که با اندازه‌های مختلف صفحه تنظیم شوند. این شامل:

• سیستم شبکه، که بر روی CSS Flexbox ساخته شده است، از یک طرح 12 ستونی پیروی می کند و روشی انعطاف پذیر برای مرتب کردن محتوا ارائه می دهد.
• را Container مؤلفه ای که به شما امکان می دهد محتوا را روی یک صفحه قرار دهید و در مرکز آن قرار دهید
• پنج نقطه شکست از پیش تعریف شده:
  • xs (بسیار کوچک): 0 تا 600 پیکسل
  • sm (کوچک): 600 پیکسل تا 899 پیکسل
  • md (متوسط): 900 پیکسل تا 1199 پیکسل
  • lg (بزرگ): 1200 پیکسل تا 1535 پیکسل
  • xl (بسیار بزرگ): 1536 پیکسل و بالاتر
• را useMediaQuery هوک، که به شما امکان می‌دهد استایل‌ها را اعمال کنید یا مؤلفه‌ها را به صورت مشروط بر اساس اندازه نمای فعلی اعمال کنید

قطعه زیر اجزای مختلف قابلیت‌های طراحی واکنش‌گرای MUI را نشان می‌دهد:

import Grid from "@mui/material/Grid";
import Container from '@mui/material/Container';
import { useMediaQuery } from '@mui/material/useMediaQuery';

//grid system with beakpoints applied
export default function BasicGrid() {
  return (
    <Grid container spacing={2}>
      <Grid xs={6} sm={6} md={3} >{/* app content */}</Grid>
      <Grid xs={4}>{/* app content */}</Grid>
      <Grid xs={4}>{/* app content */}</Grid>
    </Grid>
  );
}

//Container component
export default function SimpleContainer() {
  return <Container maxWidth="sm">{/* app content */} </Container>;
}

//useMediaQuery hook
export default function MyComponent() {
  const isSmallScreen = useMediaQuery('(max-width:600px)');

  return (
    <div>
      {isSmallScreen ? 'Small screen' : 'Large screen'}
    </div>
  );
}

بیشتر خواندن:

• راهنمای سیستم شبکه MUI

سازگار با راه حل های مختلف یک ظاهر طراحی شده

MUI با راه حل های مختلف یک ظاهر طراحی شده سازگار است. می توانید آن را با پیش پردازنده های CSS مانند Sass، ماژول های CSS، کتابخانه های CSS-in-JS مانند Emotion و styled-components و غیره ادغام کنید. MUI همچنین اخیراً Pigment CSS، مدفوع داخلی CSS-in-JS خود را راه اندازی کرده است.

بیایید نحوه ادغام MUI را با برخی از این راه حل های یک ظاهر طراحی کنیم.

برای ادغام MUI با Sass:

//styles.scss
@import '~@mui/material/Button/Button.css';

//Override the button color
.MuiButton-root {
  color: red;
}

//Import the Sass file in your Button component file
import Button from '@mui/material/Button';
import './styles.scss';

export default function MyComponent() {
  return <Button variant="contained">Styled with Sass</Button>;
}

برای ادغام MUI با ماژول های CSS:

//MyComponent.module.css
.customButton {
  color: green;
}

//apply module style
import styles from './MyComponent.module.css';

export default function MyComponent() {
  return (
    <Button variant="contained" className={styles.customButton}>
      Styled with CSS Modules
    </Button>
  );
}

برای ادغام MUI با Emotion:

import Button from '@mui/material/Button';
import { css } from '@emotion/css';

const customButtonStyles = css`
  background-color: purple;
  color: white;
`;

export default function MyComponent() {
  return (
    <Button variant="contained" className={customButtonStyles}>
      Styled with Emotion
    </Button>
  );
}

برای ادغام MUI با styled-components:

import styled from 'styled-components';

const CustomButton = styled(Button)`
  background-color: orange;
  color: white;
`;

export default function MyComponent() {
  return <CustomButton variant="contained">Styled with styled-components</CustomButton>;
}

برای ادغام MUI با سبک های درون خطی:

    export default function MyComponent() {
      return (
        <Button
          variant="contained"
          style={{
            backgroundColor: 'blue',
            color: 'white',
          }}
        >
          Styled with inline styles
        </Button>
      );
    }

بیشتر خواندن:

• راهنمای قطعی SCSS
• یک فرو رفتن عمیق در ماژول CSS
• احساس در React
• استفاده از styled-components در React
• کاوش Pigment CSS، یک کتابخانه CSS-in-JS با زمان صفر توسط MUI

شروع کار با MUI

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

npm install @mui/material @emotion/react @emotion/styled @fontsource/roboto @mui/icons-material

or
yarn add @mui/material @emotion/react @emotion/styled @fontsource/roboto @mui/icons-material

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

import { Card, CardContent, Typography } from '@mui/material';

<Card>
  <CardContent>
    <Typography variant="h5" component="div">
      Card Title
    </Typography>
    <Typography variant="body2">
      This is the content of the card.
    </Typography>
  </CardContent>
</Card>

خودشه! از اینجا، می‌توانید با MUI به همان اندازه که می‌خواهید به طرحی که از آن راضی هستید برسید.

MUI در مقابل سایر کتابخانه های مؤلفه UI

در حالی که MUI یک کتابخانه مؤلفه React محبوب است، تنها گزینه موجود در اکوسیستم نیست. بیایید بررسی کنیم که چگونه با کتابخانه های رابط کاربری جایگزین مانند Chakra UI، Shadcn UI، Radix UI و Ant Design مقایسه می شود.

قالب ها و تم ها

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

• جامعه رابط کاربری چاکرا الگوها و نمونه‌های تم مختلفی ایجاد کرده است، البته نه به اندازه MUI. همچنین Chakra UI Pro، مجموعه‌ای از اجزای پولی برای ساخت اپلیکیشن‌های تجارت الکترونیک، وب‌سایت‌های بازاریابی و برنامه‌های وب وجود دارد.
• Shadcn UI قالب ها و تم های شروع کننده رسمی ندارد. با این حال، بلوک‌ها و رابط‌های نمونه برای داشبورد، کارت‌ها، جریان‌های احراز هویت و موارد دیگر را فراهم می‌کند.
• رابط کاربری Radix هیچ قالب یا مضمونی ندارد
• Ant Design چندین قالب رسمی برای داشبورد، صفحات فرود و دیگر طرح‌بندی‌های رایج برنامه‌های سازمانی ارائه می‌دهد. علاوه بر قالب های مبتنی بر کد، قالب های Figma را نیز برای انواع مختلف پروژه ارائه می دهد

بلوغ و فرزندخواندگی

MUI در سال 2014 منتشر شد و بهترین انتخاب برای ساخت رابط های UI بوده است. این توسط شرکت هایی مانند Auth0، Codementor، Medium، Nhnost و Shutterstock استفاده می شود. این انجمن بزرگ و فعالی دارد که به طور مستمر از رشد آن با مواد آموزشی، مضامین و الگوها حمایت می کند.

در مقایسه:

• Chakra UI در سال 2020 منتشر شد و توسط شرکت هایی مانند Udacity، Ethereum، Solidity و Suno استفاده می شود.
• Shadcn UI در سال 2023 منتشر شد و توسط شرکت هایی مانند Vercel، Flatiron Health و Codedamn استفاده می شود. اگرچه در مقایسه با کتابخانه‌های آن‌ها نسبتاً جدید است، رویکرد منحصر به فرد آن برای دسترسی مستقیم به کد منبع یک جزء کپی، همراه با این واقعیت که بر روی Shadcn UI و Tailwind CSS ساخته شده است، آن را به محبوبیت طرفداران تبدیل کرده است.
• رابط کاربری Radix در سال 2020 منتشر شد و توسط شرکت هایی مانند Codesandbox، Vercel، Liveblocks، Supabase، Linear و Open AI استفاده می شود. از پذیرش گسترده ای برخوردار است و معمولاً برای ساخت سیستم های طراحی داخلی و سایر کتابخانه های مؤلفه استفاده می شود
• Ant Design در سال 2017 منتشر شد و توسط شرکت هایی مانند Xiaomi، Snapchat و Shopify استفاده می شود.

جدول زیر برخی از آمارهای اضافی در مورد هر کتابخانه را مقایسه می کند:

بیشتر خواندن:

• راهنمای پذیرش چاکرا UI
• راهنمای پذیرش Shadcn UI
• راهنمای پذیرش Radix UI
• راهنمای پذیرش بوت استرپ
• راهنمای پذیرش Bulma CSS
• مقایسه Bootstrap در مقابل Tailwind CSS در مقابل Material UI (MUI)

نتیجه

MUI به عنوان یک کتابخانه اجزای UI قدرتمند و همه کاره برای توسعه React متمایز است. مجموعه جامعی از ویژگی‌های آن، آن را به انتخابی قانع‌کننده برای ایجاد رابط‌های کاربری جذاب و قابل دسترس تبدیل می‌کند.

با ردیابی خطای مدرن LogRocket در چند دقیقه راه‌اندازی کنید:

1. برای دریافت شناسه برنامه به https://logrocket.com/signup/ مراجعه کنید.
2. LogRocket را از طریق NPM یا تگ اسکریپت نصب کنید. LogRocket.init() باید سمت مشتری نامیده شود نه سمت سرور.

NPM:

$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

برچسب اسکریپت:

Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>

3. (اختیاری) پلاگین ها را برای ادغام عمیق تر با پشته خود نصب کنید:

• میان افزار Redux
• میان افزار ngrx
• افزونه Vuex

در حال حاضر آغاز شده است