Jön a Material-UI 5: Íme, amitől izgatott vagyok

A Material-UI 5 közelgő kiadásának áttekintése

Majdnem két év telt el a Material-UI 4 megjelenése óta, és végre jön a Material-UI 5. Már a Material-UI 5 megjelenése előtt kiadtak egy sor béta verziót.

Tehát ez a cikk megvitat mindent, amit tudnia kell a Material-UI 5 közelgő nyilvános kiadásáról és annak funkcióiról.

A Material-UI 5 előzetes kiadásának újdonságai

Nézzük a Material-UI 5 izgalmas változásait.

1. ACodemod CLI továbbfejlesztései – a 4-es verzióra 5-ös verzióra történő áttelepítés egyszerűbbé vált

Az 5-ös verzió egyik újonnan hozzáadott funkciója a codemod-cli, amely képes automatikusan áttelepíteni a Material-UI 4 kódbázisokat a legújabb verzióra.

A codemod-cli Codemod szkripteket használ jscodeshifttel a Material-UI API-k frissítéséhez. Ez a verzió tartalmazza az összes lényeges transzformátor kombinációját a v4-ről v5-re való átálláshoz.

A codemod-t csak egyszer kell futtatni az alábbi paranccsal.

npx @material-ui/codemod@next v5.0.0/preset-safe <path|folder>

Ha többet szeretne megtudni a codemods-cli-ról, tekintse meg az „Effective Refaktoring with Codemods by Edd Yerburgh” című videót.

2. Kapcsoló komponens – két változat

A Material-UI csapata bemutatott egy új stílus nélkülikomponenst, a switch nevet. A switch támogatja az ON vagy OFF állapotok váltását, így ideális mobil felhasználói felületekhez. Ennek a switch összetevőnek két verziója van.

• Stílus nélküli kapcsoló

A switch komponens stílustalan változata szabadságot ad a súlyos testreszabásokhoz, miközben megőrzi a minimális kötegméretet.

Ezen túlmenően, amikor a UnstyledSwitch komponenst használtam, bármilyen stílusmódszert, például alapvető CSS-osztályokat, CSS-keretrendszert, Emotion könyvtárat stb. használhattam a megjelenés és az érzés testreszabásához.

• useSwitch Hook

A useSwitch hook is testreszabható, és ugyanazokkal a funkciókkal rendelkezik, mint a SwitchUnstyled komponens, a component, components és componentsProps kellékek nélkül.

import { useSwitch } from '@material-ui/unstyled/SwitchUnstyled';

Megjegyzés: A Material-UI Snippets beépülő modult használom a VS Code szerkesztői támogatására, mivel ez megkönnyíti a kódolást a legújabb Material-UI verzióból származó részletekkel.

3. Az alapértelmezett színértékek módosításai

A Material-UI csapata frissítette a info, success, és, warning alapértelmezett színértékeit, hogy könnyebben hozzáférhető legyen. Az új alapértelmezett értékeket a dokumentációban találja.

4. Változások a Sliderben

Az új Material-UI a Slider összetevőt új megjelenéssel látja el, összhangban az anyagtervezési elvekkel.

Áttérés a Material-UI 4-ről 5-re

Ha szeretné frissíteni a Material-UI 4 megvalósítását erre az újabb verzióra, nézzük meg a követendő lépéseket.

1. Frissítse a React és TypeScript verziókat

Először frissítse a Reactot a legújabb elérhető verzióra, a React 17-re, mivel ez volt a Material-UI 5 minimális követelménye.

Ha a projektje react-scripts, @types/reactés @types/react-dom csomagot tartalmaz, ezeket is frissítenie kell a legújabb elérhető verzióra.

2. Frissítse a Material-UI-t

Ezután frissítse a material-UI verziót a legújabb Material-UI 5 előzetes kiadásra. Az alábbi parancs elvégezte a munkát.

npm install @material-ui/core@next @emotion/react @emotion

Ha a @material-ui/lab és/vagy @material-ui/icons rendelkezik, mindkettőt frissítenie kell a legújabb verzióra.

Az 5-ös verzió előzetes kiadására való ideiglenes átálláshoz telepítenie/frissítenie kell a @material-ui/styles (JSS) fájlt az áttelepítési folyamat részeként. Ezt az alábbi paranccsal teheti meg.

npm install @material-ui/styles@next

Ezután a package.json a következőképpen fog kinézni.

Megjegyzés: Amikor először próbáltam ki, az alkalmazásom a fenti lépések végrehajtása után összeomlott, mert a stíluskönyvtár JSS(v4) helyett emotion( v5).

A „codemods" azonban elérhető volt az áttelepítési folyamat megkönnyítése érdekében.

Tehát, ha ez megtörténik Önnel, használhatja a codemodeszkripteket a frissítés folytatásához.

3. A Codemode Scriptek végrehajtása

Nézzük meg a „codemods-cli”-ben használható szkripteket

• Preset-safe script —A migráció szempontjából előnyös transzformátorok többsége szerepel ebben a codemod.

npx @material-ui/codemod@next v5.0.0/preset-safe <folder>

A codemod mappánként csak egy végrehajtása javasolt. További részletekért olvassa el a Codemods útmutatót.

A codemod fázis befejezése után próbálja meg újra futtatni az alkalmazást. Zökkenőmentesen, hiba nélkül kell működnie.

4. A makeStyles áttelepítése érzelmekre

A @material-ui/styles csomag eltávolítása a forrásból az áttelepítési folyamat utolsó szakasza. 2 ajánlott lehetőség van.

• Használja a styled vagy sx API-t

Bár adunk egy codemod-t, amely segíti a JSS-stílusok styled API-ra való áttelepítését, ez a megközelítés növeli a CSS-specifikusságot.

npx @material-ui/codemod v5.0.0/jss-to-styled <folder|file>

• Használja a tss-react kódot

Az API hasonló a JSS make style-okhoz. Azonban stílusok helyett érzelmek könyvtárával működik.

Megjegyzés: Az alábbi paranccsal eltávolítottam az összes felesleges @material-ui/styles-t, miután befejeztem az összes stílus áttelepítési folyamatát.

npm uninstall @material-ui/style

Ezekkel a lépésekkel végre tudja hajtani a Material-UI 4-ről 5-re való áttelepítést.

Ha pontosan követi a „Migráció 4-ről v5-re” útmutatót, figyelembe véve a Material-UI összetevőket tartalmazó projektet, az áttelepítés sokkal könnyebb lesz.

A Material-UI 5-ös verziója által támogatott böngészők

Az alapértelmezett csomag a következő minimális verziókat támogatja:

• Chrome 84 (49-ről)
• Edge 85 (14-ről)
• Firefox 78 (52-ről)
• Safari 13 (macOS) és 12.2 (iOS) (10-ről)
• és több…

Alapértelmezés szerint azonban már nem kompatibilis az Internet Explorer 11-gyel. Ha szüksége van az Internet Explorer 11 támogatására, nézze meg a "örökölt csomagot" a Material-UI-val.

Végső gondolatok a fejlesztők szemszögéből

• A Material-UI támogatja astílusos összetevőket,és azEmotiont nagyban hozzájárul a JSS használatához.
• Az újUnstyledSwitch összetevő testreszabható és kisebb kötegmérettel gyorsabbá teszi a felhasználói felület megjelenítését.
• Előfordulhat, hogy felül kell írnia néhány társfüggőséget, amikor átállítja a Material-UI verzióját a legújabbra.

Független alkatrészekből építkezve a sebesség és a méretek érdekében

Ahelyett, hogy monolitikus alkalmazásokat hozna létre, először készítsen független összetevőket, és állítsa be azokat funkciókba és alkalmazásokba. Gyorsítja a fejlesztést, és segít a csapatoknak konzisztensebb és skálázhatóbb alkalmazások létrehozásában.

Az olyan OSS-eszközök, mint a Bit nagyszerű fejlesztői élményt kínálnak független komponensek és alkalmazások összeállításához. Sok csapat kezdi azzal, hogy önálló komponenseken keresztül építi ki tervezőrendszerét vagy mikro-frontendjét.
Próbáld ki →

Következtetés

A „kiadási ütemterv” szerint nagyjából 2021 szeptembere körül várható a Material-UI 5. verziójának megjelenése. Mi a kedvenc újdonsága a Material-UI-hoz? Tudassa velem a megjegyzésekben.

Köszönöm hogy elolvastad !!!

Tudj meg többet