Material UI 6: React komponentai

Kas naujo Material UI šeštoje versijoje?

Material UI jau seniai yra viena populiariausių React komponentų bibliotekų, kuria naudojasi milijonai kūrėjų visame pasaulyje. Šeštoji versija atnešė nemažai pokyčių, kurie daro šią biblioteką dar lankstesnę ir galingesnę. Jei dar nenaudojate MUI arba svarstote pereiti nuo senesnės versijos, verta žinoti, ką šis atnaujinimas siūlo.

Pirmiausia, MUI 6 versija atsisakė React 17 palaikymo ir dabar reikalauja bent React 18. Tai gali pasirodyti kaip trūkumas, bet iš tikrųjų tai leidžia bibliotekai pasinaudoti naujausiais React funkcionalumais ir optimizacijomis. Concurrent rendering, automatic batching ir kitos React 18 galimybės dabar integruotos tiesiogiai į MUI komponentus.

Vienas didžiausių pokyčių – tai nauja temų sistema. Anksčiau temų kūrimas kartais būdavo tikras galvos skausmas, ypač kai reikėdavo pritaikyti sudėtingesnius dizaino sprendimus. Dabar viskas tapo intuityvesnė. createTheme funkcija buvo išplėsta, o TypeScript palaikymas pasiekė naują lygį. Galite lengvai apibrėžti savo spalvų paletę, tipografiją, šešėlius ir kitus parametrus, o IDE automatiškai pasiūlys galimas reikšmes.

Nauji komponentai ir patobulinimai

MUI 6 versija pristato kelis visiškai naujus komponentus, kurie anksčiau buvo prieinami tik kaip eksperimentiniai arba trūko visiškai. Accordion komponentas buvo visiškai perrašytas ir dabar veikia sklandžiau, ypač mobiliuose įrenginiuose. DataGrid komponentas, kuris yra mokamos versijos dalis, gavo daugybę naujų funkcijų – nuo pažangesnio filtravimo iki geresnio virtualizavimo.

Bet labiausiai džiaugiuosi Chip komponento patobulinimais. Dabar galite lengvai pridėti avatarus, ikonas, ištrynimo mygtukus ir net custom elementus be jokių papildomų wrapper’ių. Štai paprastas pavyzdys:

<Chip 
  label="React Developer"
  avatar={<Avatar src="/avatar.jpg" />}
  onDelete={handleDelete}
  color="primary"
  variant="outlined"
/>

Button komponentas irgi sulaukė atnaujinimų. Nauja loading prop leidžia rodyti loading būseną be jokių papildomų bibliotekų ar custom logikos. Tiesiog nustatote loading={true} ir mygtukas automatiškai rodo spinner’į, išjungia interakciją ir išlaiko savo originalų dydį, kad išvengtumėte layout shift problemų.

Stilizavimo galimybės ir CSS-in-JS

Čia prasideda įdomiausia dalis. MUI 6 versija vis dar palaiko Emotion kaip pagrindinį CSS-in-JS sprendimą, bet dabar yra ir alternatyvų. Jei jums nepatinka CSS-in-JS overhead’as arba norite mažesnio bundle size, galite naudoti naują @mui/zero-runtime paketą, kuris generuoja CSS build metu.

Praktiškai tai reiškia, kad jūsų stiliai nebeturi būti generuojami runtime’e, o tai gerokai pagerina performance. Žinoma, prarandate tam tikrą dinamiškumą, bet daugeliui projektų tai yra priimtinas kompromisas. Štai kaip tai atrodo:

import { styled } from '@mui/zero-runtime';

const StyledButton = styled('button')({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
});

sx prop, kuri buvo įvesta ankstesnėse versijose, dabar veikia dar geriau. Performance optimizacijos leidžia naudoti sx net ir didelėse aplikacijose be jokių problemų. Tačiau vis tiek rekomenduoju naudoti styled komponentus, kai stilius yra statiškas ir kartojasi keliose vietose.

Formų valdymas ir validacija

Dirbant su formomis, MUI 6 puikiai integruojasi su populiariomis formų bibliotekomis kaip React Hook Form ar Formik. TextField, Select, Checkbox ir kiti input komponentai turi visus reikalingus props, kad veiktų sklandžiai su šiomis bibliotekomis.

Vienas patarimas – naudokite Controller komponentą iš React Hook Form, kai dirbate su MUI komponentais. Tai užtikrina, kad validacija ir error handling’as veiks taip, kaip tikitės:

import { Controller } from 'react-hook-form';
import { TextField } from '@mui/material';

<Controller
  name="email"
  control={control}
  rules={{ required: 'El. paštas privalomas' }}
  render={({ field, fieldState }) => (
    <TextField
      {...field}
      label="El. paštas"
      error={!!fieldState.error}
      helperText={fieldState.error?.message}
    />
  )}
/>

Autocomplete komponentas, kuris anksčiau kartais būdavo problemiškas su formomis, dabar veikia be priekaištų. Galite lengvai integruoti async duomenų užkrovimą, multiple selection, custom rendering ir kitas funkcijas.

Responsive dizainas ir Grid sistema

MUI Grid sistema buvo atnaujinta ir dabar naudoja CSS Grid vietoje Flexbox (nors Flexbox versija vis dar prieinama per Stack komponentą). Naujoji Grid2 komponentas yra lengvesnis, greitesnis ir intuityvesnis naudoti.

Breakpoint’ai dabar yra lengviau pritaikomi. Galite apibrėžti custom breakpoint’us temoje ir naudoti juos visoje aplikacijoje. Štai kaip tai atrodo praktikoje:

<Grid2 container spacing={2}>
  <Grid2 xs={12} md={6} lg={4}>
    <Card>Turinys 1</Card>
  </Grid2>
  <Grid2 xs={12} md={6} lg={4}>
    <Card>Turinys 2</Card>
  </Grid2>
  <Grid2 xs={12} md={12} lg={4}>
    <Card>Turinys 3</Card>
  </Grid2>
</Grid2>

useMediaQuery hook’as taip pat buvo patobulintas. Dabar jis palaiko server-side rendering be jokių papildomų konfigūracijų ir automatiškai sinchronizuojasi su temos breakpoint’ais. Tai ypač naudinga, kai kuriate responsive navigacijas ar kitokius komponentus, kurie turi keistis priklausomai nuo ekrano dydžio.

Accessibility ir ARIA atributai

Vienas dalykas, kuriuo MUI visada išsiskyrė, tai accessibility. Šeštoje versijoje šis aspektas buvo dar labiau patobulintas. Visi komponentai dabar turi tinkamus ARIA atributus pagal numatytuosius nustatymus, o klaviatūros navigacija veikia sklandžiai visur.

Modal ir Dialog komponentai automatiškai valdo focus management’ą. Kai atidaro modalą, focus’as perkeliamas į jį, o uždarant grąžinamas atgal į elementą, kuris jį atvėrė. Screen reader’iai gauna visą reikalingą informaciją apie modalą ir jo turinį.

Tačiau vis tiek turite būti atidūs. Pavyzdžiui, jei naudojate IconButton be teksto, būtinai pridėkite aria-label:

<IconButton 
  aria-label="ištrinti"
  onClick={handleDelete}
>
  <DeleteIcon />
</IconButton>

Table komponentai dabar automatiškai generuoja tinkamus role atributus, bet jei kuriate sudėtingesnes lenteles su custom funkcionalumu, verta patikrinti, ar viskas veikia teisingai su screen reader’iais. Rekomenduoju naudoti NVDA ar JAWS testavimui.

Performance optimizacijos ir bundle size

Viena didžiausių MUI kritikų visada buvo bundle size. Šeštoje versijoje komanda rimtai ėmėsi šios problemos. Tree-shaking dabar veikia geriau nei bet kada anksčiau. Jei importuojate tik tuos komponentus, kuriuos naudojate, bundle size sumažėja gerokai.

Štai keletas praktinių patarimų, kaip sumažinti bundle size:

Pirma, visada importuokite komponentus tiesiogiai iš jų kelių, o ne iš pagrindinio paketo. Vietoj import { Button } from '@mui/material'; naudokite import Button from '@mui/material/Button';. Nors abu variantai turėtų veikti vienodai su tinkamu bundler’iu, tiesioginis importas garantuoja geriausią tree-shaking’ą.

Antra, jei nenaudojate ikonų iš @mui/icons-material, neįtraukite viso paketo. Vietoj to, galite naudoti kitas ikonų bibliotekas kaip react-icons arba tiesiog SVG failus. Jei vis tiek norite naudoti MUI ikonas, importuokite jas atskirai: import DeleteIcon from '@mui/icons-material/Delete';

Trečia, apsvarstykit lazy loading’ą sudėtingesniems komponentams. DataGrid, DatePicker ir kiti heavy komponentai gali būti užkrauti tik tada, kai jų reikia:

const DataGrid = lazy(() => import('@mui/x-data-grid'));

function MyComponent() {
  return (
    <Suspense fallback={<CircularProgress />}>
      <DataGrid rows={rows} columns={columns} />
    </Suspense>
  );
}

Ką daryti su senais projektais ir kaip migruoti

Jei turite projektą, kuris naudoja MUI 5 ar net senesnę versiją, migracija į šeštąją gali atrodyti bauginanti. Bet iš tikrųjų tai nėra taip sudėtinga, kaip gali pasirodyti. MUI komanda paruošė išsamų migracijos vadovą, o daugelis breaking changes yra gana nedideli.

Pirmiausia, atnaujinkite React į 18 versiją, jei dar to nepadarėte. Tai pats svarbiausias žingsnis. Tada galite pradėti atnaujinti MUI paketus. Rekomenduoju daryti tai palaipsniui – pirmiausia atnaujinkite core biblioteką, tada ikonas, o galiausiai kitus paketus kaip date pickers ar data grid.

Daugelis komponentų veikia be jokių pakeitimų, bet kai kurie reikalauja nedidelių kodo korekcijų. Pavyzdžiui, jei naudojote makeStyles iš MUI 4, turėsite pereiti prie styled arba sx prop. Tai gali užtrukti, bet ilgalaikėje perspektyvoje jūsų kodas bus švaresnis ir lengviau prižiūrimas.

Vienas patarimas – naudokite codemod’us, kuriuos pateikia MUI komanda. Jie automatiškai atnaujina didžiąją dalį kodo ir sutaupo daug laiko. Tiesiog paleiskite npx @mui/codemod v6.0.0/preset-safe ir daugelis pakeitimų bus atlikti automatiškai.

Neužmirškite patikrinti TypeScript tipų, jei naudojate TypeScript. Kai kurie tipai pasikeitė, ir gali reikėti atnaujinti savo komponentų tipus. Bet tai dažniausiai yra tik nedideli pakeitimai, kuriuos IDE pasiūlys automatiškai.

Realūs scenarijai ir geriausia praktika

Dirbant su MUI 6 realiuose projektuose, susiduriate su įvairiais iššūkiais. Vienas dažniausių – kaip organizuoti temų konfigūraciją dideliuose projektuose. Rekomenduoju sukurti atskirą theme folderį, kuriame būtų suskirstyti įvairūs temos aspektai.

Pavyzdžiui, galite turėti palette.js spalvoms, typography.js tekstui, components.js komponentų override’ams. Tada visa tai sujungiate į pagrindinį theme.js failą. Tai leidžia lengviau valdyti sudėtingas temas ir greičiau rasti, ką reikia pakeisti.

Kitas svarbus aspektas – custom komponentų kūrimas. Kartais MUI komponentai nevisiškai atitinka jūsų dizaino reikalavimus. Vietoj to, kad bandytumėte priversti MUI komponentą daryti tai, ko jis nėra skirtas, geriau sukurti savo komponentą, kuris naudoja MUI komponentus kaip pagrindą.

Štai pavyzdys, kaip galite sukurti custom card komponentą:

import { Card, CardContent, CardActions, Typography, Button } from '@mui/material';
import { styled } from '@mui/material/styles';

const StyledCard = styled(Card)(({ theme }) => ({
  maxWidth: 345,
  transition: 'transform 0.2s',
  '&:hover': {
    transform: 'translateY(-4px)',
    boxShadow: theme.shadows[8],
  },
}));

function ProductCard({ title, description, price, onBuy }) {
  return (
    <StyledCard>
      <CardContent>
        <Typography variant="h5" component="h2">
          {title}
        </Typography>
        <Typography color="text.secondary">
          {description}
        </Typography>
        <Typography variant="h6" color="primary">
          {price}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small" onClick={onBuy}>Pirkti</Button>
      </CardActions>
    </StyledCard>
  );
}

Dar vienas dalykas, kurį verta paminėti – dark mode implementacija. MUI 6 daro tai itin paprastą. Tiesiog sukuriate dvi temas ir perjungiate jas priklausomai nuo vartotojo pasirinkimo. Galite net automatiškai aptikti sistemos nustatymus naudojant useMediaQuery('(prefers-color-scheme: dark)').

Kai kuriate formas, nepamirškite naudoti FormControl, FormLabel ir FormHelperText komponentų. Jie ne tik pagerina accessibility, bet ir suteikia nuoseklią išvaizdą visoje aplikacijoje. Error handling’as tampa daug paprastesnis, kai naudojate šiuos komponentus kartu.

Ir paskutinis, bet ne mažiau svarbus patarimas – naudokite MUI dokumentaciją. Ji yra viena geriausių, kokias teko matyti. Kiekvienas komponentas turi interaktyvius pavyzdžius, API dokumentaciją ir net CodeSandbox demo, kurį galite iškart išbandyti. Kai kyla klausimų, pirma pažiūrėkite į dokumentaciją – dažniausiai atsakymas bus ten.

Material UI 6 versija yra brandus, galinga ir gerai optimizuotas įrankis React aplikacijų kūrimui. Nors mokymosi kreivė gali būti šiek tiek statesni pradedantiesiems, investicija į šios bibliotekos išmokimą tikrai atsipirks. Komponentų įvairovė, temų sistema, accessibility palaikymas ir nuolatiniai atnaujinimai daro MUI puikiu pasirinkimu tiek mažiems, tiek dideliems projektams. Svarbiausia – nepersistengti su customization’u ir naudoti biblioteką taip, kaip ji buvo sukurta, o custom sprendimai turėtų būti taikomi tik tada, kai tikrai reikia.