Kas yra Material-UI ir kodėl jis tapo tokiu populiarus
Jei dirbi su React ir dar nesi susidūręs su Material-UI (dabar oficialiai vadinamu MUI), tai turbūt gyveni po akmeniu. Šita biblioteka tapo vienu iš populiariausių sprendimų kuriant vartotojo sąsajas React ekosistemoje. Bet kas gi tai per žvėris?
Material-UI – tai React komponentų biblioteka, kuri įgyvendina Google Material Design dizaino sistemą. Skamba gana paprastai, bet realybėje tai daug daugiau nei tik keli mygtukai ir laukeliai. Tai pilnavertė įrankių dėžė, kurioje rasi viską – nuo paprasčiausių mygtukų iki sudėtingų duomenų lentelių ir navigacijos komponentų.
Biblioteka atsirado 2014 metais, kai React buvo dar gana jaunas, o komponentų bibliotekų rinkoje vyravo chaosas. Kūrėjai norėjo turėti kažką patikimo, kas atrodytų gerai ir veiktų be galvos skausmo. Material-UI puikiai užpildė šią nišą ir per kelerius metus tapo vienu iš labiausiai žvaigždutėmis pažymėtų projektų GitHub’e.
Kodėl verta rinktis MUI savo projektui
Pirmas dalykas, kuris traukia kūrėjus – tai paruošti komponentai. Nereikia išradinėti dviračio ir kurti mygtuko iš nulio. Tiesiog importuoji Button komponentą ir viskas veikia. Bet tai tik viršūnė ledkalnio.
MUI komponentai yra prieinami (accessible) pagal numatymą. Tai reiškia, kad jie palaiko klaviatūros navigaciją, turi tinkamus ARIA atributus ir veikia su ekrano skaitytuvais. Jei kada bandei rankiniu būdu padaryti dropdown meniu, kuris būtų visiškai prieinamas, žinai, kad tai ne juokai. Čia visa tai gauni nemokamai.
Dar vienas privalumas – teminės galimybės (theming). MUI turi galingą teminės sistemos įrankį, leidžiantį pritaikyti visą dizainą pagal savo poreikius. Gali keisti spalvas, šriftus, atitrūkimus, užapvalinimus – ką tik nori. Ir viskas atsinaujina visoje aplikacijoje automatiškai.
Dokumentacija yra tikrai gera. Ne tokia tobula kaip norėtųsi, bet palyginus su kai kuriomis kitomis bibliotekomis – tai dangus ir žemė. Kiekvienas komponentas turi pavyzdžių, API aprašymus ir dažniausiai net interaktyvius demo.
Kaip pradėti dirbti su Material-UI
Instaliacija yra paprasta kaip trys kapeikos. Jei naudoji npm:
npm install @mui/material @emotion/react @emotion/styled
Arba su yarn:
yarn add @mui/material @emotion/react @emotion/styled
Pastebėjai Emotion? Tai CSS-in-JS biblioteka, kurią MUI naudoja stilizavimui. Senesnėse versijose buvo naudojamas JSS, bet dabar pereita prie Emotion. Jei tau labiau patinka styled-components, gali naudoti ir juos – MUI palaiko abu variantus.
Paprasčiausias pavyzdys atrodytų taip:
import Button from '@mui/material/Button';
function App() {
return (
<Button variant="contained" color="primary">
Spausk mane
</Button>
);
}
Ir voila – turi gražų Material Design mygtukėlį. Bet tikroji magija prasideda, kai pradedi naudoti sudėtingesnius komponentus ir temų sistemą.
Teminės sistemos galimybės ir pritaikymas
Čia prasideda tikrasis smagumas. MUI teminė sistema leidžia kontroliuoti beveik kiekvieną dizaino aspektą. Sukuri temą naudodamas createTheme funkciją ir apgaubi savo aplikaciją su ThemeProvider.
Paprastas temos pavyzdys:
import { createTheme, ThemeProvider } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
secondary: {
main: '#dc004e',
},
},
typography: {
fontFamily: 'Roboto, Arial, sans-serif',
},
});
function App() {
return (
<ThemeProvider theme={theme}>
{/* Tavo komponentai */}
</ThemeProvider>
);
}
Bet galima eiti daug giliau. Gali keisti breakpoint’us responsive dizainui, nustatyti custom spacing sistemą, modifikuoti kiekvieno komponento numatytuosius stilius. Jei nori, kad visi tavo mygtukai turėtų didesnius užapvalinimus, gali tai padaryti vienoje vietoje:
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: 12,
},
},
},
},
});
Tai labai galinga, nes leidžia išlaikyti dizaino nuoseklumą visoje aplikacijoje be to, kad reikėtų kiekvieną komponentą stilizuoti atskirai.
Dažniausiai naudojami komponentai ir jų ypatumai
MUI bibliotekoje yra daugiau nei 50 skirtingų komponentų. Čia keletas, kuriuos naudosi dažniausiai:
Button ir IconButton – tai pagrindas. Turi kelis variantus: contained, outlined, text. IconButton puikiai tinka toolbar’ams ir kompaktiškoms sąsajoms.
TextField – įvesties laukelis su visais reikalingais priedais. Palaiko validaciją, error būsenas, helper tekstą, įvairius variantus (outlined, filled, standard). Realiai, tai vienas iš geriausiai padarytų input komponentų, kokius teko naudoti.
Grid ir Box – layout komponentai. Grid naudoja flexbox sistemą ir leidžia lengvai kurti responsive išdėstymus. Box yra universalus wrapper’is su spacing ir styling galimybėmis.
Dialog – modaliniai langai. Turi įmontuotą backdrop’ą, užsidarymo logiką, animacijas. Viskas veikia iš dėžės.
AppBar ir Toolbar – navigacijos juostos. Dažniausiai naudojami kartu, kad sukurti viršutinę aplikacijos navigaciją.
DataGrid – tai jau premium komponentas (mokamas), bet verta paminėti. Jei dirbi su dideliais duomenų kiekiais ir reikia lentelės su filtravimo, rūšiavimo, paginacijos galimybėmis – tai gelbėjimas.
Vienas patarimas – nenaudok visko iš karto. Pradėk nuo paprastų komponentų ir pamažu pridėk sudėtingesnius, kai reikės. MUI gali būti gana sunkus bundle’ui, todėl svarbu importuoti tik tai, ko tikrai reikia.
Stilizavimo metodai ir geriausia praktika
MUI siūlo kelis būdus stilizuoti komponentus. Galima naudoti sx prop’ą, styled API, arba tiesiog inline stilius (nors tai mažiausiai rekomenduojama).
sx prop’as – tai naujausias ir rekomenduojamas būdas. Leidžia rašyti stilius tiesiai komponente, bet su prieiga prie temos:
<Box sx={{
bgcolor: 'primary.main',
p: 2,
borderRadius: 1,
'&:hover': {
bgcolor: 'primary.dark',
},
}}>
Turinys
</Box>
Pastebėk, kad gali naudoti trumpinius kaip p (padding), m (margin), bgcolor (background-color). Tai daro kodą kompaktiškesnį.
styled API – jei nori sukurti pakartotinai naudojamą stilizuotą komponentą:
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
const CustomButton = styled(Button)(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
padding: '12px 24px',
'&:hover': {
backgroundColor: theme.palette.primary.dark,
},
}));
Kuri metodą rinktis? Jei stilius naudojamas vienoje vietoje – sx prop’as. Jei kuri pakartotinai naudojamą komponentą – styled API. Paprastai projektai naudoja abu metodus priklausomai nuo situacijos.
Performanso optimizavimas ir bundle dydžio mažinimas
Viena didžiausių MUI problemų – bundle dydis. Jei neatsargiai importuosi viską, gali gauti gana sunkų bundle’ą. Bet yra būdų tai optimizuoti.
Tree shaking – visada importuok konkrečius komponentus, ne visą biblioteką:
// Gerai
import Button from '@mui/material/Button';
// Blogai
import { Button } from '@mui/material';
Antrasis variantas atrodo gražesnis, bet gali sukelti problemų su tree shaking’u priklausomai nuo tavo build konfigūracijos.
Icons optimizavimas – MUI turi atskirą icons paketą su tūkstančiais ikonų. Jei naudosi daug ikonų, svarbu jas importuoti teisingai:
import DeleteIcon from '@mui/icons-material/Delete';
Jei tau reikia tik kelių ikonų, gali net apsvarstyti naudoti SVG failus tiesiogiai, kad išvengtum viso icons paketo.
Dynamic imports – jei turi didelių komponentų, kurie naudojami retai (pvz., sudėtingus dialog’us), gali juos užkrauti dinamiškai:
const HeavyDialog = React.lazy(() => import('./HeavyDialog'));
Dar vienas patarimas – naudok production build’ą. Development versija yra daug sunkesnė dėl papildomų warning’ų ir debug informacijos.
Kas toliau: MUI ateitis ir alternatyvos
MUI nuolat vystosi. Neseniai išėjo v5 versija su dideliais pakeitimais – pereita nuo JSS prie Emotion, pagerintas performansas, atnaujinta teminė sistema. Komanda aktyviai dirba prie naujų komponentų ir funkcionalumo.
Vienas įdomiausių naujų dalykų – MUI Base. Tai nestilinginti komponentai, kurie suteikia funkcionalumą ir prieinamumą, bet leidžia tau visiškai kontroliuoti dizainą. Jei Material Design tau nepatinka, bet nori MUI funkcionalumo – tai puikus variantas.
Kalbant apie alternatyvas – jų yra nemažai. Chakra UI tampa vis populiaresnis dėl paprastesnės API ir mažesnio bundle’o. Ant Design yra galingas, bet labiau orientuotas į enterprise aplikacijas. Mantine – naujesnis žaidėjas su moderniais features. Kiekviena biblioteka turi savo privalumų ir trūkumų.
Bet MUI išlieka viena patikimiausių ir brandžiausių opcijų. Turi didžiulę bendruomenę, gerą dokumentaciją, reguliarius atnaujinimus. Jei kuri komercinį projektą ir nori kažko stabilaus – MUI yra saugus pasirinkimas.
Kai viskas sudėliota į lentynas
Material-UI nėra tobula biblioteka. Ji turi savo keblumų – kartais per daug abstraktuota, bundle’as gali būti sunkus, mokymosi kreivė pradžioje gali būti šiek tiek statoki. Bet kai įsigilinsi, supranti, kodėl tiek daug projektų ją renkasi.
Realiame projekte MUI leidžia sutaupyti daugybę laiko. Nereikia kurti bazinių komponentų, galvoti apie prieinamumą, rūpintis cross-browser suderinamumu. Viskas jau padaryta ir išbandyta tūkstančiuose projektų.
Jei tik pradeди dirbti su MUI, nesistenkite išmokti visko iš karto. Pradėk nuo paprastų komponentų, pamažu įsisavink teminę sistemą, eksperimentuok su stilizavimu. Skaityk dokumentaciją, žiūrėk pavyzdžius GitHub’e, prisijunk prie Discord bendruomenės, jei reikia pagalbos.
Ir svarbiausia – nenaudok MUI aklinai. Jei kažkas neveikia taip, kaip nori, gali visada sukurti custom komponentą arba išplėsti esamą. Biblioteka sukurta būti lanksti, ne riboti tavo galimybes. Kartais geriausia praktika yra suprasti, kada naudoti gatavus sprendimus, o kada geriau parašyti savo.
